What is the Cleanest Way to Create Forms?

[rwilson]

What is the cleanest most efficient way to write forms? with tables, labels, lists, or fieldsets?

Currently I've been creating forms like this:

<form action="thankyou.php" method="post" name="contactform" id="contactform">
 <fieldset>

 <input type="hidden" name="recipient" value="contactform" />
 <input type="hidden" name="subject" value="Response from Web Form" />

 <label>
 <span>Name:</span>
 <input type="text" name="name" size="65" /> 
 </label>

 <label>
 <span>E-mail address:</span>
 <input type="text" name="email" size="65" />

 <input type="submit" value="submit" />
 <input type="reset" value="clear" />
 
 </fieldset>
</form>

and adjusting with css like this:

label{display:block; clear:both;}
label span{float:left;}
label input{float:left;}

Doing it this way lightens up markup but complicates designing for different form elements, checkboxes, text inputs. Anyone have any preferred methods?

[milosevic]

Excellent question rwildson!

I don't think it's semantically correct to have the form field inside the label element.

I generally use a structure like:

<form action="blah" id="form-contact">

<div class="form-block form-text-fields">

<div class="form-field">

<label for="form-email">E-mail</label>
<input type="text" name="email" id="form-email" size="65" />
</div>

<div class="form-field">
<label for="form-name">Name</label>
<input type="text" name="name" id="form-name" size="65" />
</div>

</div>

<input type="submit" value="submit" />

</form>

This is to allow maximum levels of control with descendant selectors. For simple forms the divs aren't necessary.

This lets you write rules like (examples off the top of my head)

.form-block { (style blocks of related fields)
border-bottom:1px solid;
}
.form-text-fields div { (style elements inside particular block of related fields)
background:#ccc;
padding:0px 10px;
}
form label { (control elements in all forms)
float:left;
}

#form-contact input { (control elements in specific form)
background:#efe;
}
#form-contact input#form-email:after { (control specific field in specific form)
content:url(/email.png);
}

Use attribute selectors to control radio/checkboxes, ie

form input[type="radio"] {
width:20px;
}

[rwilson]

Semantically the "for" attribute makes sense and it looks easier to work with when declaring styles. The way I was doing it was making the label the container which makes it difficult to style. Thank you!

I had thought about putting checkbox groups in lists for long complex forms, but I'm not sure if it's necessary or if it would just bloat the code? For styling, lists don't seem necessary

[milosevic]

The for attribute I believe mainly functions so that clicking on a label makes the field it applies to active - ie you can click on the text next to the checkbox to select the checkbox.

The attribute selector is the real gem in form design - I used to have so many headaches until I cottoned on to it.

Also, breaking up CSS code into stuff that will apply to all forms on a site and things only for specific forms reduces headaches and code complexity greatly (the same for control of fields within a form).

As for using lists, there's no reason not to use this that I can think of - though I'd only bother if I needed a container element around each checkbox - otherwise I'd try to use a checkbox attribute selector to get the result I wanted without that. (or a div that grouped the checkboxes together in order to control labels for them too).

A more advanced technique could make the containing div unnecessary if you gave all the checkboxes an id with a common prefix such as "chbox-subscribe", "chbox-privacy" etc and used a for attribute on the labels referencing this.

Then you could use an attribute selector like:

label[for|=chbox] {
font-weight:bold;
}

See here: [w3.org...]

[rwilson]

Very cool! divs would work for grouping checkboxes, but I like your way of using the attribute selector. Using your original css I attempted it and was able to have one id suffix have the labels float left of the input then clear for a new line and the other have the label on the right. I don't know if this is the best way to clear them, but it looks like it works.

label[for|=product] {
clear:left;
font-weight:bold;
}
input[id|=product] {
float:left;
}

input[id|=subscribe] {
float:left;
clear:left;
}

form input[type="submit"] {
display:block;
clear:both;
}


<form action="blah" id="form-contact">
<fieldset>

<label for="product-apple">Apple</label>
<input type="checkbox" name="product-1" value="checkbox" id="product-apple" />

<label for="product-bananna">Bannana</label>
<input type="checkbox" name="product-2" value="checkbox" id="product-bananna" />

<label for="product-orange">Orange</label>
<input type="checkbox" name="product-3" value="checkbox" id="product-orange" />

<input type="checkbox" name="subscribe" value="checkbox" id="subscribe-email" />
<label for="subscribe-email">Yes, I would like to subscribe to email newsletter.</label>

<input type="checkbox" name="subscribe" value="checkbox" id="subscribe-mailer" />
<label for="subscribe-mailer">Yes, I would like to subscribe to mailer.</label>

<input type="submit" value="submit" />

</fieldset>
</form>

[rwilson]

I think I over complicated the prefix naming, instead of product I should have used "chbox-" and maybe for a variant with the checkbox on the right "chboxRight-" this way I can use it globally

[milosevic]

Glad you found it useful!

The only thing to beware of I guess with this approach (that I should have mentioned previously...) is that attribute selectors don't work in IE6 - so if your site has large numbers of IE6 visitors you'll need to cater to them separately. Nowadays there are few sites where this is a real worry for me personally and I use attribute selectors in forms with little worry.

Because of this though it's worth not going too overboard on attribute selectors when an alternative will do.

There's no other good way to distinguish checkboxes from text inputs without adding to the HTML so the attribute selector is a good use in these cases.

But with your usage for IDs, this is really replicating the function of a class. What I would do is this:

<input type="checkbox" name="product-1" value="checkbox" id="apple" class="product" />

<label for="product-bananna">Bannana</label>
<input type="checkbox" name="product-2" value="checkbox" id="bananna" class="product" />

input.product {
float:left
}
input#banana {
color:yellow;
}

Don't forget you can use multiple classes separated by a space, this can be useful in very complex forms. If you wanted to avoid using attribute selectors altogether, the way to implement it would be with a checkbox class for all the checkboxes. But I prefer to use attribute selectors because it's quicker to code and more elegant.

But your idea of using these attribute selectors on element IDs like this is actually something I never considered, and I bet it could be a very useful technique in certain circumstances with generated output - nice one!


N.B - In my original post I said it wasn't semantically correct to lay out the code like you did, but it turns out from looking at W3 specs this is actually a technically correct way to do it - the label surrounding the form element works in the same way as a "for" attribute.

However, I feel that this way is likely to be harder to work with and control with CSS in most instances.

N.B. 2 - I don't believe you need the value="checkbox" attribute on your checkboxes

[rwilson]

Not IE6 again! Unfortunately a large enough portion of people visiting my site are using IE6, so I'm going to avoid using the attribute selector.

I can't seem to get anything to clear properly in IE6 unless it's enclosed in an element that has clear:both. So I tried a list, and gave it's li's clear:float; I could've used div also.


/* Lists
----------------------------------------*/

ol, ul {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; list-style: none;}

/* Forms
----------------------------------------*/

/* Global Form Elements */
form label {float:left;}

/* Related Fields */
.form-block {border-bottom:1px solid;}

/* Text Fields */
.form-text-fields div {
background:#ccc;
padding:0px 10px;
}

/* Check Boxes */
.form-checkboxes-radio{display:block; width:100%; overflow:hidden; clear:both;}
.form-checkboxes-radio li{clear:both;}

.form-checkboxes-radio label{
display:block;
clear:right;
}
.form-checkboxes-radio input{
float:left;
clear:left;
display:block;
}

/* Specific Form Elements */
#form-contact input {background:#efe;}


<form action="blah" id="form-contact">
<fieldset>

<div class="form-block form-text-fields">

<div class="form-field">
<label for="form-email">E-mail</label>
<input type="text" name="email" id="form-email" size="65" />
</div>

<div class="form-field">
<label for="form-name">Name</label>
<input type="text" name="name" id="form-name" size="65" />
</div>

</div>

<ul class="form-checkboxes-radio">
<li>
<input type="checkbox" name="product-1" id="chboxRight-apple" />
<label for="chboxRight-apple">Apple</label>
</li>
<li>
<input type="checkbox" name="product-2" id="chboxRight-bananna" />
<label for="chboxRight-bananna">Bannana</label>
</li>
<li>
<input type="checkbox" name="product-3" id="chboxRight-orange" />
<label for="chboxRight-orange">Orange</label>
</li>
<li>
<input type="checkbox" name="subscribe" id="chbox-email" />
<label for="chbox-email">Yes, I would like to subscribe to email newsletter.</label>
</li>
<li>
<input type="checkbox" name="subscribe" id="chbox-mailer" />
<label for="chbox-mailer">Yes, I would like to subscribe to mailer.</label>
</li>
</ul>

<input type="submit" value="submit" />

</fieldset>
</form>

[milosevic]

If you're using JQuery on the site, you can use this script:

[skulljackpot.com...]

to get support for attribute selectors.

There's also the ie7.js and ie8.js scripts that will do this, however in my experience these can break sites.

[rwilson]

There's so much in CSS that I've avoided because of IE, that script opens up a lot of possibilities. I do intend to use JQuery, I'll have to check this out! Thank you so much for all your help!

In regards to using lists in forms, could that be a benefit to users with screen readers or mobile browsers with limited css support? They'd see the form elements lined up and segmented based on what portion of the form it was.

[milosevic]

Glad you've found this useful - it's an interesting topic.

Yes, I've moved more and more towards using Jquery for old browser support - in particular I always use rounded corners scripts nowadays rather than making background images.

As for the list format, it's a little difficult to imagine how it would work - I guess the only way to judge would be to look at the form with CSS disabled. The only possible negative side I can think of is insertion of bullet points as without CSS the default behaviour would be to show these.

[rwilson]

Yes, very useful! I'm going to have to let this absorb, I'm not that efficient with the attribute selectors yet.

When you say rounded corner scripts, are you referring to using :before and :after to position corner images or is there another way?

That is a good point, the lists will have bullets when CSS is disabled. Other than the bullets it looks ok.

[milosevic]

Rounded corners script I use is this:

[jquery.malsup.com...]

It's good because it inserts -moz-border-radius or -webkit-border-radius into browsers that support it (and works with much more than just divs as a result - e.g. tables), in IE it creates single pixel wide divs that give the appearance of rounded corners.

[rwilson]

That is so cool! Thanks for sharing. much nicer way to do that