Creating a Form on a Web Page - HTML5 and CSS Comprehensive - page 293

( continued )

3. Lay out the input areas effectively. One of the first input items you may want is the visitor's
name and e-mail address information. That should go to the top of the page. Also, you can
group information together on the same line if it makes sense to make the Web page form
short enough that visitors do not have to scroll much. Notice in our form that the last name/
first name/e-mail address are on one line of the Web page. Collecting e-mail addresses is
a great way to continue communication with visitors or customers. A company can e-mail
newsletters, coupons, and general information to customers once they have their e-mail
addresses.
4. Use grouping techniques for clarity. The final thing that you may want to do on a Web
page form is group like input items together. Use the fieldset tag to segregate personal
information from preference information and from other comments that the visitor
might make.

Adding Text Boxes
As previously discussed, a text box allows for a single line of input. The HTML
code below shows an example of the code used to add a text box to a form:

<input name="lastname" type="text" size="25" />

The <input /> tag creates an input control, while the attribute and value type="text"
specifies that the input control is a text box. The name attribute of the input control is set
to the value lastname, to describe the information to be entered in this text box. When the
form is submitted, the name is used to distinguish the value associated with that field from
other fields.
The size attribute indicates the size of the text box that appears on the form. In the
following HTML code, size="25" sets the text field to 25 characters in length, which means
that only 25 characters will appear in the text box. The maxlength attribute maxlength="25"
limits the number of characters that can be entered in the text box to 25 characters. The
maxlength attribute specifies the same number of characters (25) as the size attribute (25), so
all characters entered by a user will appear in the text box. If you specify a maximum number
of characters that is greater than the number of characters specified in the size attribute, the
additional characters scroll to the right in the text box as the user enters them.

To Add Text Boxes

The next step in creating the form is to add three text boxes to the form for users to enter last name, first name,
and e-mail address. Table 6-5 shows the HTML code to add three text boxes to the form. Each text box has a size
of 25 characters so that you provide enough room for your visitor to add the information. No maxlength attribute is
specified, which means users can enter text items longer than 25 characters, but only 25 characters will display in the
text box. As you learned in the last chapter, the special character &nbsp; (nonbreaking space) is used to provide space
between the text boxes and the labels.

Table 6-5 HTML Code to Add Text Boxes

Line HTML Tag and Text

<p>First Name: <input name="firstname" type="text" size="25" /> &nbsp; &nbsp;

19

Last Name: <input name="lastname" type="text" size="25" /> &nbsp; &nbsp;

20

E-mail Address: <input name="email" type="text" size="25" /></p>

21