How to position label tags in relevance to the input fields

Question

I am having a problem sorting this one out.

here's my html

<form>
    <p><label for="comp-name">Name:</label>
        <input type="text" name="comp-name"></input>
    </p>
    <p>
        <label for="company-address">Address:</label>
        <textarea name="company-address"></textarea>
    </p>
    <p>
        <label for="postcode">Postcode:</label>
        <input type="text" name="postcode"></input>
    </p>
    <p>
        <label for="phone">Phone Number:</label>
        <input type="text" name="phone"></input>
    </p>
    <p>
        <label for="email">Email:</label>
        <input type="text" name="email"></input>
    </p>
</form>

here is what I want the form to look like:

here is the jsfiddle link.

having hard time figuring out how to place the label on the top-left part of the input/textarea.

Answer 1

If I understand correctly, a simple:

label {
    vertical-align: top;
}

should give you the results you want.

Fiddle: http://jsfiddle.net/N7e67/2/

Answer 2

You can just put the labels in the left column of a table and the fields in the right, then position them within their cells

<table>
    <tr>
        <td>(label)</td>
        <td>(input)</td>
    </tr>
    ...
</table>

Answer 3

Try to put your lable and input type inside the div tag

<p><div><label for="comp-name">Company Name:</label></div>
    <div> <input type="text" name="comp-name"></input></div>
 </p>

this should help you. if this si not what you expect please elaborate what you want to see.

Answer 4

You can try using this boilerplate http://www.csskarma.com/lab/contactForm/ or this tutorial http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/

• PS : for your information, the label for attribute should reference an id of an input.
• PPS : you might find this article interesting http://www.lukew.com/ff/entry.asp?1502

Answer 5

you can use this code for positioning your object: style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"

change the left, top, height and width as per form design.

<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>

Answer 6

The easiest is to put the <input> inside the <label>

<div>
  <label for="comp-name">Company Name: <input type="text" name="comp-name" />
  </label>
</div>

Answer 7

You have two options for placing label and input.

1) You can place the label and the input next to each-other as siblings.

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">

2) You can place the input element inside the label so that the label becomes the parent element and the input the child element of the label.

<label>Do you like cheese?
  <input type="checkbox" name="cheese">
</label>

Both solutions are valid HTML according to MDN, but when you go for solution one you need to explicitly link the label to the input element by adding an id to the input element and for attribute to the label element.
When you choose the second option you don't need to do this since the DOM automatically knows (because of the parent child relationship) that the label and element are related to each-other. That I would consider a clear advantage of the second solution.

---

Note. With css you can get the desired styling result for either of those solutions, so I would not use that as an argument for choosing between 1 and 2.