I am available for freelance work - HIRE ME

A Simple Attribute for More Semantic HTML Forms

posted by Matt Ward on Dec 8, 2010.

In this article, we will take a brief look at the concept of semantics and the Semantic Web, and then turn to one little, often overlooked but extremely useful little HTML attribute that can really help make your web forms more semantic (assuming you’re not using it already).

Semantics, semantics, semantics—sometimes it feels like it has become just another clichéd buzzword that we like to throw around the web these days. Obviously it’s more than that though. Semantics has everything to do with meaning. More specifically, in the context of web design/development and the deployment of markup, it has to do with meaning in a very particular context.

I’ve always tended to think of semantics in web design as being primarily a means of accurately describing content. In fact, that’s how I have described HTML to a number of the people who have asked me questions as they were getting started using the language. The tags in which we wrap our content essentially describe what the content is, and as the sort of person who obsesses over grammar, structure and the meaning instilled by language, this is a huge part of the reason that I preach the necessity of using the correct tags in your HTML.

Using the wrong tag is basically telling us that the content is something that it’s not.

This understanding of semantics is, well, primarily semantic. In other words, it concerns itself with meaning for meaning’s sake. Yeah, trust the guy with the English degree to make that argument.

There are others on the web, however, who (being far more intelligent than I) look beyond the semantics of semantics and theorize the concept of what they call the Semantic Web. All the way back in 2001, Tim Berners-Lee, James Hendler and Ora Lassila authored an article published in Scientific America about this very topic. Simply entitled “The Semantic Web,” the article envisions meaning (semantics) as becoming the common bond the would bring information from different and even unrelated sources together in a way that could be readily processed by software, due simply to the common shape of meaning. In the article, the authors write:

The Semantic Web will bring structure to the meaningful content of Web pages, creating an environment where software agents roaming from page to page can readily carry out sophisticated tasks for users.

It is a fascinating idea, and though we will probably get there one day, I don’t think we’re there yet. There are probably thousands of semantic “content pockets” all over the web, but the glaring inconsistencies between sites and other data models are probably still polluting the waters too much for any truly extensive semantic tasks to be readily performed by the envisioned “agents”

That being said, however, it is still a good practice to work at creating the most semantically accurate code that we can today. It is important simply for the sake of meaning, but also to train ourselves for the day when semantic coding will be more than just a best practice that we as web designers and developers like to talk about amongst ourselves. The chances are very good that one day, semantics will become a true requirement.

But What about Forms?

Yes, this article is about forms. We’re getting there.

If you follow me at all on Twitter, you may have seen that I am currently working on an application called Survd, which will allow users to create and manage surveys (on other data collection forms) right from their own websites. As such, I’ve been spending a lot of time working with forms lately, and it occurred to me that, up to now, I had not been creating forms that were quite as semantic as they could have been.

Why, you ask?

Simply because I had previously been unaware of a somewhat obscure little attribute of the <label> tag, called “for”. In a nutshell, this little attribute actually allows us to specifically declare the input field that a particular label actually describes. For example, I could define a label and input in HTML like this:

<label>Name</label>
<input type="text" name="name" id="yourname" />

As human beings looking at this, code we can obviously deduce that the label is intended to describe the input field. However, from a purely technical standpoint, the label and the input are not related to each other in any way other than their relative proximity. An extremely intelligent program might be able to correlate the name value of the input with the contents of the label, but what if we had something like this?

<label>What do they call you?</label>
<input type="text" name="name" id="yourname" />

Now there is no textual relationship at all. The elements may rest right beside each other in the document, but is it really safe for any program parsing the document to assume that this proximity automatically implies relationship? Probably not. There are too many possible exceptions.

That’s where the for attribute comes in really handy. Now, we can take our same block of code, but add the attribute in:

<label for="yourname" >What do they call you?</label>
<input type="text" name="name" id="yourname" />

Instantly, this establishes the desired relationship! The label now explicitly defines the connection between the input and its label through the common value held by the id attribute of the input. Using this attribute also brings the added usability benefit of allowing the user to click on the label to bring focus to the related input element. It’s a small touch, but in many ways, isn’t that what a lot of usability is all about—those small touches that help to make a site or web app super user friendly?

Conclusion

I’m sure that there are plenty of people out there who already knew about the for attribute. Until, recently, I wasn’t one of them. It’s one of those oddly obscure attributes that you don’t read a lot about and which doesn’t do anything overly visible of flashy to draw attention to itself. As such, in my continuing journey of self-education, it was unfortunately something that got lost or glossed over.

I’m glad to have it well in mind now, though, and I hope that those of my readers who were in the same boat as me will also benefit from the knowledge. I’ve already gone back and checked through my comment form on the blog (attributes were already there, thanks to rock-solid coding from WordPress), and will be improving the semantics of all my forms of the future by explicitly linking my labels and inputs.

What about you? Are you so familiar with the for attribute that it’s like second nature to you now? Or, did you come into this article like me, having somehow missed it?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Dec 8, 2010

Ian Graham says:

Using the for attribute is great. I’m not sure where or how I learned about it, but it doesn’t seem to be all that well known. Since learning about how the for attribute works in forms, I’ve developed the habit of clicking on what I assume is the label for checkboxes and radio buttons. I’m always surprised when larger web companies are not using them(google for example).
From a usability perspective it increases the clickable area of the element with is always a win.

One thing that I have noticed that people are(or can be) confused about is that the value in the for attribute relates to the id attribute of the form element and not the name attribute.

Dec 8, 2010

Matt Ward says:

Yeah I thought it was kind of odd that the correlation was done through the id rather than the name. Probably because so many other links (# targeting for instance) are done through the name attribute. Could trip a few people us.

But I agree, it’s an awesome little attribute. :)

Dec 8, 2010

Temc says:

Especially checkboxes benefit from this as one can click the label to tick/untick the checkbox.

Semantics are important in many ways. From parsing by bots to interpretation and usablilty.

But also progressive enhancement, for example, you could use javascript to enhance a thing or two or let some magic happen to the right of the form and not only have ‘it’ trigger based on the id-attribute but bind it also to the label’s with an equal attribute value in for=”".

For example
var stuff = ['foo', 'bar']‘
$.each(stuff, function(key, val){
$( ‘input#’+val+’, label[for="'+val+'"]‘ ).doStuff();
});

Dec 8, 2010

Jp says:

Thanks this is def. one i’m going to be usging.

Dec 8, 2010

Jens Scherbl says:

It’s also valid to wrap the entire label-tag around input-field and caption:

<label>
What do they call you?
<input type=”text” name=”name” id=”yourname” />
</label>

Dec 8, 2010

devCTRL says:

Thanks alot for this short but sweet article. Like you I was not familiar with the FOR attribute at all in HTML, but looking at it now it makes perfect sense and in a page with many fields and labels could come in handy from a readability standpoint.

Dec 9, 2010

Awarnach says:

I also add ‘label {cursor: pointer;}’ to my CSS

Dec 9, 2010

Evan Mullins says:

yea, I love the ‘for’ attribute. I don’t remember where I learned it either, but am also amazed at the number of people who don’t use it. Such a better ux.

Dec 9, 2010

Amber Weinberg says:

I have to admit I’ve known about the attribute, but I don’t use it much. I hate dealing with forms an normally leve it to a programmer to deal with it. I use the pluton Contact form 7…but I don’t think they auto include labels at all.

Dec 10, 2010

Jenna says:

I always use ‘for’ on labels now. I guess that was one useful thing I learned in my ‘new media’ class where the instructor tried to tell me that javascript wasn’t important. I actually like coding forms :)

Dec 10, 2010

Matt Ward says:

JavaScript not important?! Yikes! We can’t rely entirely on it, but it’s a key for a lot of progressive enhancement.

Dec 10, 2010

kureikain says:

I always do semanctic! Everything is born is to used and to have its purpose!

Not much people really care about semantic anyway!

Dec 10, 2010

Jenna says:

I know… I think the instructor just didn’t want to help me with JS because the other students weren’t past basic html, but still.

Dec 14, 2010

Adam says:

People don’t know about “for”?!

On the point about it working off the ID and not the name attribute, I think it’s because the name attribute isn’t required to be unique, as far as I know, whereas the ID has that constraint.

Feb 14, 2012

Dan McLean says:

I have to admit that as a self-taught webpage builder and developer, I had never heard of the “for” attribute – I had just been using plain text in the adjacent cell. Perhaps this is one of the great things about this business: There is always something new to learn.

Leave a Comment

Links

  1. CSS Brigit | A Simple Attribute for More Semantic HTML Forms

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014