Jul 25 2007 at 9:14am
What’s the right way to mark up Forms in HTML and CSS?
We’ve been discussing this on the forum and haven’t come to a satisfactory conclusion. When doing a side-by-side form layout (with label to the left or right of the input), what’s the best way to structure them?
Ideally you would not need any extra code. You would simply have the input and the label, like so:
<label for="name">Name</label> <input type="text" id="name" name="name"> <label for="email">Email</label> <input type="text" id="email" name="email">
Then you would add some CSS to float the label next to the input and everything would be fine. However, Internet Explorer doesn’t like this, and requires some extra mark-up to clear the next label. See Andy’s test page as an example.
So, if that’s the case then we need some extra markup to make sure the inputs and labels stay together. If forms have to have extra structure, then what should it be? What is a form? Is it:
- an ordered or unordered list
- a definition list
- paragraphs
- a table
- divs (divisions)
- none of the above – just put <br /> in after the inputs
- none of the above – just wrap the input in the
- something else (please explain!)
Others have decided that the list mark-up is overkill and are using div’s and br’s instead. However, I sort of think it would be better to use something that at least has some meaning rather than resorting to div’s and br’s.
The Web Standards Group’s accessible form example also uses <br />’s. The CSS guy is using definition lists in this example. PPK at quirksmode.org also uses <br />’s
So maybe the truth is that I need to stop being so anal about line breaks?
Edit: This ALA article uses ordered lsits. Any other authoritative sources?
Update 09/08: Based on this article from Autistic Cuckoo, I am now leaning towards the one of thte no-list options. As the article explains, lists shouldn’t be used if they don’t make sense with the bullets on. Would a list of form elements with bullets beside them be an appropriate method? Not really. However, would the definition list approach make sense? Possibly…
CSS Guy July 31st, 2007 at 8:15 pm
I got slammed by a couple of folks for using definition lists in my example. The only thing clear is that we know there isn’t a “one way” to do it, particularly since the variety of length and types of information asked will require different presentation methods, which many times means different markup.
Choose what is best for the one form you are putting together.
Check out wufoo for other form examples. (They use unordered lists, and they do a great job).
Megan August 1st, 2007 at 2:29 pm
Almost every time I code a form I think about doing it with definition lists, and go back and forth a few times in my mind between regular lists (usually ordered) and definition lists before settling on regular lists.
I think this is one of those situations where there are several satisfactory solutions, none of which are ideal, but none of which are significantly better than the other.
Catarina Santos October 5th, 2007 at 6:21 pm
In Lynda.com’s “CSS for Designers” by Andy Clarke and Molly E. Holzschlag they put the input inside the label tag:
<label for="name"><span>Name:</span>
<input type="text" name="name" id="name" /></label>
<label for="email"><span>Email:</span>
<input type="text" name="email" id="email" /></label>
I’m not sure this is the best option, but it works. I prefer <br /> but I’m still learning and I haven’t created enough forms yet.
Megan October 6th, 2007 at 9:21 am
That’s my option “g” above. I don’t like that method because, as I saw pointed out somewhere (but I forget where), the input isn’t the label. Putting the label around it wouldn’t be semantically correct. But are lists? Ehhh….