5

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:

enter image description here

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

3
  • You didnt save your fiddle so its empty. Have your tryed using line-height ?
    – cernunnos
    Apr 22, 2013 at 14:26
  • This is not related to your issue, but label tag works with id property, not name property. So with this code, clicking label won't work unless you add ids. Apr 22, 2013 at 14:32
  • jsfiddle saved. @AurélienGrimpard, thanks but for now i am only after the looks and placement of the labels
    – Saint Dee
    Apr 22, 2013 at 14:34

7 Answers 7

10

If I understand correctly, a simple:

label {
    vertical-align: top;
}

should give you the results you want.

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

1
  • Simple and what I was looking for as well.
    – Joey Cho
    Jun 10, 2021 at 17:11
3

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>
2

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.

1

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/

0

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>
0

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>
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.