Styling Your forms with CSS and Labels

<style>
label { position: absolute; text-align:right; width:130px; }
input, textarea { margin-left: 140px; }
label.check, label.radio { position:relative; text-align:left; }
</style>

<form>
  <label for="name">Your Name:</label>
  <input type="text" name="name" id="name" /><br />
  <label for="email">Your Email:</label>
  <input type="text" name="email" id="email" /><br />
  <input type="checkbox" name="subscribe" id="subscribe" />
  <label for="subscribe" class="check">Subscribe</label>
</form>

#myFormID input, #myFormID textarea { ... } 

Not sure it's necessarily better, but a different approach since I've been tackling the same problem lately: I've found I prefer myself to nest the form element inside the label tag and and style the labels like block elements, without using break tags.
Even though this requires a bit more CSS, the benefit is that the HTML needn't be touched if a layout change is desired (i.e. - you want to have First Name and Last Name on the same line instead of separate.) It also gives me additional selectors to use when styling a long form.
I'd post an example of what I mean, but it looks like your comments don't allow HTML.

I know what you mean Jon, your method does have the advantage of more flexibility within the CSS. Thanks for sharing.

Both very cool techniques. I'll definately use one or the other in the future.

I have been trying to use a similar approach with a list of checkboxes & labels. I have the problem of long label text (basically titles and authors of books). These long labels tend to wrap and then end up under the checkbox and looking pretty bad. I don't want to use any absolute positions as the layout is relative.
has anyone dealt with this kind of thing before.

Why not just use a table? This is one of the few cases where tables actually make sense: I want to have two columns of things, one column of which is labels, the other column of which is fields. The CSS approach you've listed here won't gracefully deal with people scaling their fonts via Firefox, or with people who customize their font size via local stylesheets.

I prefer this approach over tables because it uses much less code. Also if you keep your label width large enough scaling font sizes shouldn't be much of an issue.

This is not to say that there aren't some cases where a table would work better, but I think for most cases this is a better solution.

Does anyone know if perhaps <label> and <input> are supposed to be enclosed by a block level element such as <p> or <dl>? If you notice, without styling, all of these elements will render on the same line.

One problem that you might run into with this approach is that because you've used fixed-pixel widths - the user will have problems when resizing text (or when your labels are too long?)

I usually use a relative unit to define widths of elements.

Check out my form template:
http://afrobean.dyndns.org:81/ap/examples/form-layout.html

Uh. How do you make a form just like this one? Can you give me the code please?

Still a bit lost how do you align the input boxes so they are vertical and spaced a bit without using the <p> or <br /> tags? I am a web design intern/student (more of a print media kind of designer), so sorry if it is here already and I haven't picked it up.

Michael,

If you are asking your question regarding my first response to Pete's post, I have actually changed my opinion since I posted my response in favor of using <br/> tags. I've found some situations where this makes form layout much easier.

If you do want to do without <br/> or <p> tags you can do so like this using CSS:
/*Use the Label as Block Element */
/*You can control spacing using padding and line-height styles - we've applied a class attribute to the <label> tag */

label.formLabel {position: relative; display:block!important; width: 100%; text-align:left;padding: 5px 0 5px 0; line-height: 15px;}

/*Form Inputs -we've already applied a class to the input */
/* Note: We'll use the margin-top attribute to control the v-position of the input within the label element. */

label input.formInput {position: relative; float:right; margin-top: -15px;}

Hope that clarifies for you.

Thanks Jon, it makes a little bit more sense, trying to wrap my head around it right now. I am going to use the CSS method but for now I am just trying to find out what works the the AD wants to get it clean coded and place it in the site we are doing. I applied a <div> to the section and that has lined up everything for now. I just need to adjust their widths so the browsers all render the same thing.
Thanks again.

Why try so hard to avoid table tag?
It's on the contact form.
I am not going to spend extra time optimizing contact page. They will fill the form no matter what (if they want to contact me).
I have other pages to worry about.

what i really miss is the ability to control the look of my form 100%, the whole idea of a standardized look and feel is useless among most skilled webdesigners, becourse most younger users simply dont care about that part, since they could reconise a button/whatever the grapical opject is intended for instantaneously.

In this case, if someone speak about accessibility of a given website, its more of a brag about his own skills, then its going to help you. Becourse, what he is doing, is simply stating the obvious.

The trick to get older or just inexperianced computer users to reconise a given opjects use, is obviously to indicate its use as moch as possible, make it as obvious as possible without limiting your design to moch, almost anyone trying to learn how to create websites can allready feel this to some degree, however some who call themself "webdesigners" have become lazy and incompetent, and while they feel somthing is wrong with their site, they wont lift a finger to learn how to fix it.

alone the style'ing can be really hard to learn, and dose take some time.

However the result is well worth it, and sometimes it would guantee your page a 1th ranking on a given keyword.

Why we havent even a fully functional and reliable way of doing things yet is really slowing down my own work, and forms is one of the outdated things that could use a'little work by w3c.

Tables allways somehow seam to get the work done, almost regardless of what you want. But damn its annoying, to read the source code of bigger sites who use tables for everything, its not hard for experianced webdesigners, but it dose increase the time required to understand the site structure before we can modify it, and in last end (sometimes the costs of the finished product/website becourse of the increase in work hours)

It is so moch faster to finish a bit of work, for someone who have had his whole site made without tables to begin with, sometimes a major update can be applied in a matter of mins. (if the site structore is correct)

When looking at dedicated webmasters design patterns, we will often find that they are very similer. So if they reconize a given design pattern, it will be moch faster for them to apply a patch/major update.

That is my reason why you would dump tables, even thoug that one or two pages containing a form in a table, isent/wont be the problem.

Having that said, i still lack the skills to present everything 100% the way i want it to be shown.

But even with my humble skills as a grapical designer, where everything i make pretty moch end up randomly in photoshop. Im atleast trying to get things shown the way i want, and i hope that im not limited by outdated views of how the web should be.

views like having the most accessible website, wont hold in the long run, we shouldent be limited by the device that is rendering our site.

And never, ever.. will i limit my webdesign, just becourse some wannabee PC equipment trys to take the role of a real computer. Or cant live up to peoples expectations, when rendering websites and disslike.

As far as im conserned, its the device that has a problem, not the designer. And thats the pure truth, and im shure we will see devices getting their problems solved insted of people blameing it on the designers in the future.

If these new devices want to browse the web, they really need a major update in their rendering engine... Becourse, well it simply suck.

Or they should be limited to their own web, im not going to kneel as long at theres the PC, witch where here first.

I feel like jumping on my mobile phone, im shure it would be a greath feeling. Better not, i need it right now. HAHA

Don't forget that the fieldset tag is required for strict xhtml

Also, I do prefer floating the inputs, it removes the br tags, and allows you to easily re-arrange the position of the label on each 'row' of the form: for example: you might want the label to be positioned ABOVE the input on some forms that can't afford the extra width.

I do also use a div for each row of the form as someone asked about in comments. it helps with positioning a lot to have several types of form 'rows' already set up in CSS (submit, regular input, indendted, required, optional, etc...).

The article code works well, but I cannot figure out how to format using the same technique as the top comment. I cannot seem to get the boxes to left-align like the presented in this article. Has anyone been able to get this version to display the same: "I've found I prefer myself to nest the form element inside the label tag and and style the labels like block elements, without using break tags."

I can't figure out how to make this code cross browser compatible. It looks pretty bad in IE 7

i need only print label in html page. using css. pls help me