Blog

In XHTML 1 strict and HTML 5, the name attribute on many elements has been replaced with the id attribute. But name hasn't been replaced entirely. Form elements still use both name and id, and both serve very different functions.

The id Attribute

Most web developers are familiar with the id attribute in some way. It is a unique identifier for elements in HTML. Because all ids on a page must be unique, they are very useful for specific targeting with CSS and Javascript. The ids themselves are most effective when they are descriptive, such as:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

IDs are also used for inner-page links. Let's say you want to create a link to mysite.com/products.html, but want to jump directly to the content of the page. This would be done by giving the content area an id of 'content', and then creating a link like this:

<a href="http://mysite.com/products.html#content">My Content</a>

The #content at the end of the link represents the specific element to which to jump.

The name Attribute

Before XHTML, the name attribute was mostly used the same way the id attribute is now. It was usually a unique identifier, just like the id. But in XHTML and HTML 5, their function has become focused on interaction and forms.

Form elements can have both name and id attributes. The id attribute on form elements serves the same purpose as I described above...unique identifiers. But the name attribute is different, and in certain circumstances doesn't need to be unique.

When a form is submitted, the page is redirected to the location indicated in the action attribute in the form tag. The values entered into the form are added to the new page as name/value pairs in the HTTP header. Those values can then be accessed with Javascript or a server-side script, where they can be processed or added to a database. The name attribute is what is used for the name in the name/value pair.

Checkboxes and radio buttons have the same name attribute when they are grouped together. This is how they are associated with each other. So a series of checkboxes would look like this:

<label><input type="checkbox" name="colors" id="blue" value="blue"> Blue</label>
<label><input type="checkbox" name="colors" id="red" value="red"> Red</label>
<label><input type="checkbox" name="colors" id="yellow" value="yellow"> Yellow</label>

As you can see, they have the same name, but unique ids. So when the form is submitted, if Blue and Red are checked, the HTTP header will include colors:blue and colors:red.

I hope this has helped clear any confusion you may have had when creating forms. When used together, the id and name attributes can give you a lot of control over HTML.