Web Design in a Nutshell, 3rd Edition

There are two ways to apply a label to a form control. One is to nest the control and its associated description within the label element. Following is an example of labels being applied to a simple form with this method.

    <form action="/cgi-bin/guestbook.pl" method="GET"><label>Login account: <input type="text" name="login" /></label>
    <label>Password: <input type="password" name="password" /></label>
    <input type="submit" />
    </form>

The other method is to associate the label with an id value specified in the input form. The for attribute says which control the current label is for. This method is useful for form fields that are not juxtaposed with their descriptions, such as when they span across different table cells. The following is an example of the label element referencing an id.

    <form action="/cgi-bin/guestbook.pl" method="GET"><label for="log">Login account:</label>
    <input type="text" name="login" id="log" />

    <label for="pswd">Password:</label>
    <input type="password" name="password" id="pswd" />
    <input type="submit" />
    </form>

id and name in Form Elements

When applied to form control elements (such as input, select, etc.), the id and name attributes have different and distinct functions. The value of the name attribute is passed to the forms processor when the form is submitted. The id attribute is used to give the element a unique identifier that may be accessed by a style sheet rule, script, or the label element as shown in the previous example. An id attribute may not be ...