Let me start out by saying: I have a working solution. However, it requires extra mark-up and that really bothers me. I was hoping someone here knew how to do it without 'cheating'.

My current method looks like this:

<form>
<label><span>Name (First Last)</span> <input type="text" /></label>
<label><span>User Name</span> <input type="text" /></label>
<form>

label  {
    display: block;
    overflow: auto;
    line-height: 22px; }

label span {
    display: block;
    float: left; }

input {
    float: right;
    height: 16px;
    padding: 2px;   }

And it works as I expect it to. However, having to insert that extra span to make the layout work properly drives me crazy.

When I've just tried floating the input within the label it's fine in the most modern browser, but breaks in IE7 or 6 -- the input ends up a line down below the label.

The most common solution I've seen on the web is:

<li><label>Text</label><input type="text" /></li>

But to me that's also extra markup (the LI) and it makes the labels and inputs require the for and ID attributes.

Any solution that works with just the basic markup of:

<label>Text here <input type="text" /></label>

Thanks in advance for your help.

1 answer

1
point

Your method of wrapping the label around the input is the least markup, but has implications for accessibility, and hence best practice is to use label elements (and id and for attributes) and have those separate from the field elements.

By using the more accessible html layout, then you have plenty of hooks for styling.

http://webaim.org/techniques/forms/controls

Sometimes less markup isn't better.

Answered about 6 years ago by Tony Crockford