pf » 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.

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

This is cool but is this supported in other browsers?

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've just rewritten a table-based form to use CSS instead, but the problem is that the "size" attribute for the text input scales with the font, so it's quite easy to break the layout with only a couple enlargements by the user. Any way to restrict the scaling of the text window?

I've just rewritten a table-based form to use CSS instead, but the problem is that the "size" attribute for the text input scales with the font, so it's quite easy to break the layout with only a couple enlargements by the user. Any way to restrict the scaling of the text window?

I prefer separating form controls with p tags rather than br's:

<p> <label for="name">Your Name:</label> <input type="text" name="name" id="name" /> </p>

You might also want to use a definition list:

<dl> <dt> <label for="name">Your Name:</label> </dt> <dd> <input type="text" name="name" id="name" /> </dd>

<dt> <label for="surname">Your Surname:</label> </dt> <dd> <input type="text" name="surname" id="surname" /> </dd> </dl>

By using "float: left;" on <label>, instead of "position: absolute;", you can avoid using <br />s after every <input> without nesting the "form element inside the label tag," which is not valid XHTML. If this doesn't work in IE/Win, would someone please correct me.

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 not just use display: block; ?

it is rendering it as display: inline;, the simple solution would be to render it as a block and give it float'(s) and positioning if or as it is needed.

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 somtimes 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 (somtimes 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, somtimes 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

Haven't read every entry in too great detail, but the original post and some subsequent ones got me on the right track. Here's what i ended up doing... form label { display: table-cell; width: 80px; float:left; } form input, textarea, select { display: table-cell; }

It worked a treat, and the html uses only the <form> tag and <label> tags, nothing more.

Flobo Recovery is the leading provider of powerful data recovery, drive image, HDD repair and PC privacy utilities for the Windows OS family. All Flobo software titles are listed below.Trial versions of each program can be downloaded free of charge by using the Download link above or the FREE Trial link listed with each product. Use the Buy It! link to securely purchase any Flobo product and download right to your desktop. www.floborecovery.us

Flobo Recovery is the leading provider of powerful data recovery, drive image, HDD repair and PC privacy utilities for the Windows OS family. All Flobo software titles are listed below.Trial versions of each program can be downloaded free of charge by using the Download link above or the FREE Trial link listed with each product. Use the Buy It! link to securely purchase any Flobo product and download right to your desktop. www.floborecovery.us

???????????????????????????????????????? ??????? ?????? ????????????.?????? ??????????????? ???????????????? ??????????.????????????? ???????????ã? ??????? ?????õ???? ?????????????? ?????? ????????õ??????? ????????? ???? ?????????? ?????û???????? ??? ??? 13906330292 QQ 635670440 ???ID???ñ???6431

6250

beautiful code! a couple of lines and all my forms passed from horrible to quite nice. in less that 5 minutes

this was exactly the solution I was looking for. thank you very much