HTML / XHTML Forms

  1. The NAME Attribute
  2. The ID Attribute
  3. How NAME Deprecation Affects Forms
  4. How to use ID in Forms
  5. Tests
  6. Examples
  7. Notes

The NAME Attribute

The name attribute in HTML was used on many elements to provide a identification token for reference by the browser and by scripts. As documented in the W3 XHTML Specifications the HTML name attribute is deprecated for the elements a, applet, form, frame, iframe, img, and map for XHTML 1. The id attribute is now used in place of the name attribute as a unique identifying token in XHTML documents.

The W3 HTML Compatibility Guidelines noted that the change from name to id could affect the intended functionality of a web page. For example, the name attribute was often used in conjunction with a to create anchors on a web page. These anchors could then be used as links to jump from section to section in a page as shown in example 1. For valid and up-to-date XHTML (or forward-thinking HTML) the code should use id in place of name as shown in example 2. The expected behavior relies on the web browser, however, and some browsers at the time of the specification were not yet programmed to jump to anchors defined by id attributes alone. Thus, the the W3 HTML Compatibility Guidelines append the note that "identical values may be supplied for both of these attributes to ensure maximum forward and backward compatibility" as shown in example 3.

The ID Attribute

The id attribute can be used on nearly every HTML element, although it is a well-known standard documented by the W3 that the id attribute must be unique (appear only once) within a given document. The id attribute is used to apply CSS styles, to find and manipulate elements with Javascript, and to provide a unique reference to an element, which is useful for a variety of purposes. In an XHTML form, the id attribute can give the form element a unique name. Both HTML and XHTML forms can associate a field label with the appropriate input by matching the for attribute of the label to the id attribute of the input.

How NAME Deprecation Affects Forms

You may have noticed that the ubiquitous input element, the tag used to create form fields, is not mentioned in the list of elements for which name is deprecated. The input element's cousin, the select element, is not on the list either (although their parent element, the form tag, is among those affected). Simply speaking, the deprecation of name in favor of id does not affect the use of name for the fields of XHTML forms; name is essential to forms.

How to use ID in Forms

The fact that name is not deprecated for the input element or select element is important to an observed "undesirable behavior" in Firefox 3.0.5 (take a look at the tests). Although coders know that the id attribute must be unique within a given HTML document, it is easy[2] to overlook this fact and inadvertantly combine incomplete knowledge regarding the deprecation of name and a habit based on the HTML compatibility guidelines to write forms with incorrect code (see example 6). Blindly adhering to the idea that name and id should match can and will result in duplicated id attributes within a form. Since the name attribute is not deprecated for form fields, id should be used normally. Obviously if it will not result in id being duplicated, name and id can match, but id, as the standards state, should never be duplicated within a single page (see example 7).

Tests

Text Inputs

Examples of text input fields. Each input adds an attribute.

Radio Inputs, No ID

Examples of radio input fields without the use of an id attribute.

Radio Inputs, With ID (Matching)

Examples of radio input fields with the use of identical name and id attributes. Some users, notably Firefox 3.0.5 users, may see odd behavior.

Radio Inputs, With ID (Unique)

Examples of radio input fields with the use of both name and unique id attributes. This is the preferred method.

Checkbox Inputs, No ID

Examples of checkbox input fields without the use of an id attribute.

Checkbox Inputs, With ID (Matching)

Examples of checkbox input fields with the use of identical name and id attributes. Some users, notably Firefox 3.0.5 users, may see odd behavior.

Checkbox Inputs, With ID (Unique)

Examples of checkbox input fields with the use of both name and unique id attributes. This is the preferred method.

Back to "How to use ID in Forms"

Examples

Example 1


1:<a name="anchor1"></a>
2:<a href="#anchor1">Link to anchor 1</a>
				
  1. Creates an anchor named "anchor1" in the position of the document flow at which the code appears.
  2. Creates a link to the anchor named "anchor1" in the position of the document flow at which the code appears.
Back to "The NAME Attribute"

Example 2


1:<a id="anchor2" />
2:<a href="#anchor2">Link to anchor 2</a>
				
  1. Creates an anchor named "anchor2" in the position of the document flow at which the code appears.
  2. Creates a link to the anchor named "anchor1" in the position of the document flow at which the code appears.
Back to "The NAME Attribute"

Example 3


1:<a name="anchor3" id="anchor3" />
2:<a href="#anchor3">Link to anchor 3</a>
				
  1. Creates an anchor named "anchor1" in the position of the document flow at which the code appears.
  2. Creates a link to the anchor named "anchor1" in the position of the document flow at which the code appears.
Back to "The NAME Attribute"

Example 4


1:<input type="text" id="fullname" value="Full Name" />
2:<input type="text" name="fullname" id="fullname"  value="Full Name" />
				
  1. Creates a text input field without the name attribute.
  2. Creates a text input field with the name attribute.
Back to "How NAME Deprecation Affects Forms"

Example 5


1:<input type="radio" name="question1"  value="Yes" />
2:<input type="radio" name="question1" value="No" />
				
  1. Creates an radio input (grouped with other radio inputs named "question1") with the value "Yes".
  2. Creates an radio input (grouped with other radio inputs named "question1") with the value "No".
Back to "How NAME Deprecation Affects Forms"

Example 6


1:<input type="radio" name="question2" id="question2" value="Yes" />
2:<input type="radio" name="question2" id="question2" value="No" />
				
  1. Creates an radio input (grouped with other radio inputs named "question2") with the value "Yes".
  2. Creates an radio input (grouped with other radio inputs named "question2") with the value "No".
Back to "How to use ID in Forms"

Example 7


1:<input type="radio" name="question3" id="question3_yes" value="Yes" />
2:<input type="radio" name="question3" id="question3_no" value="No" />
				
  1. Creates an radio input (grouped with other radio inputs named "question3") with the value "Yes".
  2. Creates an radio input (grouped with other radio inputs named "question3") with the value "No".
Back to "How to use ID in Forms"

Notes

Note 1

Forms are one of the areas in which the best practice of "separation of content, behavior, and style" is especially difficult. Form elements and their attributes explicitly state many things about the fields' appearance and expected behavior.

Back to "How NAME Deprecation Affects Forms"

Note 2

In retrospect, it seems obvious that violating the standard regarding repetition of an id within a document (just because it is a form and the compatibility guidelines state that name and id should match) is wrong-headed. Personally, I assumed (mistake) that if name was deprecated for one element, it was (or would eventually be) deprecated for all elements. All the information was in front of me, I simply failed to add 2 and 2 correctly. However, I've noticed this in others' source code as well, so it seems useful to document this information.

Back to "How to use ID in Forms"
Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License .