Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

324 LESSON 12: Designing Forms

If you include your form control within the label element, as shown in the following

code, you can omit the for attribute:

<label>User name <input type="text" name="username"></label>

The <label> tag doesn’t cause visible changes to the page, but you can style it using

CSS , as you saw in the sample login form earlier. One common styling approach people

use is to apply a special style to the labels of required fields. For example, you may

declare a style rule like this:

label.required { font-weight: bold; }

You can then set the class for the labels for all the required fields in your form to

“required,” and the labels for those fields will appear in boldface.

You should not use purely visual effects (like boldface or color

changes) to indicate if a field is required. These will not be acces-

sible to users with screen readers. It’s best to mention it in

the text so that screen readers can read aloud that the field is

required.

CAUTION

Creating Form Controls with the Tag

Now it’s time to learn how to create the data entry fields form. The <input> tag enables

you to create many different types of form controls.

Form controls are special HTML tags used in a form that enable you to gather informa-

tion from visitors to your web page. The information is packaged into a request sent to

the URL in the form’s action attribute.

The input element consists of an opening tag with attributes, no other content, and no

closing tag:

<input attributes />

The key point here is using the right attributes to create the form control you need. The

most important of these is type, which specifies what kind of form control to display. For

all controls, except Submit and Reset buttons, the name attribute is recommended. It asso-

ciates a name with the data entered in that field when the data is sent to the server. Most

designers make the name attribute and the id attribute the same value to reduce confusion.

The rest of this section describes the different types of controls you can create using the

input element.