Last week I posted about how I'm marking up HTML forms these days. The process of writing that post really highlighted the need in HTML for some sort of semantically agreed upon wrapper for elements within a fieldset. After all, what is a fieldset really a set of?
I've seen (and been in) debates about how someone should markup a form. Some people argue dt/dd elements are the way to go. Others argue for lists. Still others forms as tabular data . I'm currently using divs. None of us is more right or wrong than the other. We are all just abusing existing tags because there is a clear gap in HTML.
In the past, our web forefathers (myself included) struggled with just getting a page that simply looked ok. We didn't give a crap about accessibility or validation. Those were lofty and near impossible goals with the state of technology at the time. We just wanted a page that looked ok across browsers (if you think life with IE6 is bad... you have no idea). As a result we abused HTML to get layouts that just worked. The table element being the poster child for our transgressions.
Those days are behind us now, CSS/HTML has matured to a state were we worry about stuff like semantically correct code and accessibility. But to achieve these goals we find ourselves once again abusing HTML.
This is not a new revelation, HTML5 is coming to the rescue to resolve some of our most common semantic infractions. We are getting the header, footer and nav elements. Which will replace our div#header and div#footer elements.
I would argue that the same transgressions that caused the good folks working in HTML5 to come up with these new elements are at work in HTML forms. We are all re-purposing some element (dt,li,div,etc) because there is no clearly correct wrapper for a "field". Something like this would be awesome:
<fieldset>
<legend>Account Info</legend>
<field>
<label>Name</label>
<input type="text" />
</field>
<field>
<label>Email</label>
<input type="text" />
<p>We will send you a confirmation email to the address entered</p>
</field>
</fieldset>
Ahh.... beautiful.
3 comments:
<field> Could allow you to wrap related inputs as well. Such as date, phone number, or first/last name.
e.g.:
<field>
Date:
<label>Month <select/></label>
<label>Day <input/></label>
</field>
A fieldset is the appropriate element for a set of a related inputs and their labels.
I think a field element is a fantastic idea. I usually use a div element to wrap my form controls and labels, but I always feel strangely evil doing-so. However, I can't think of any more appropriate element to use.
I use dl list for wrapping form fields. I found it best in case of forms because I often need to separate the "name of field(s)" and "field(s)".
The idea of field element is nice, but this element wouldn't help me.
For example:
<dl>
<dt><label>Postal</label>, <label>City</label></dt>
<dd><input name="postal">, <input name="city"></dd>
</dl>
In this case field won't be enough. In fact all elements except dl list doesn't fit here.
BTW. Last time, doing research for the "right way" for
coding forms I've found that dl element isn't "definition list" as in HTML 4.01, but now it is "description list" which makes it more usable.
But it's nice to know that not only me have problem with this topic.
PS. blogger forced me to post this comment from some strange Google account. Where is option "anonymous"?
Post a Comment