You can place a form anywhere in the body of an HTML document. Some people like to use a table to organize form elements; others create form fields within ordinary paragraphs. A form is enclosed in a two-sided <form> tag:

<form method="post">
...
</form>

The method attribute specifies what will happen when the form is submitted. Almost all forms use the method=“post” attribute, meaning that the data users enter into the form will be collected and either delivered (by email) or sent to the server, where server-side code can retrieve it and perform tasks such as storing it (in a database).

Within the opening <form> tag, you specify an action attribute. This is typically either an email address to which to send information or the URL of a script that will run when the user submits the form. For an email delivery, the action attribute might look like this:

<form action="mailto:[email protected]" enctype="text/plain">

To send the form contents to a CGI script, include the URL for the appropriate CGI script stored on your server:

<form action="http://www.margiestravel.com/cgi-bin/feedback.pl">

You place the various tags that create form controls between the opening and closing <form> tags. Form controls available include text boxes, buttons, check boxes, lists, and/or command buttons. A command button is a button that executes a function, such as submitting the form or resetting it.

Creating a Text Box

The most basic type of control is a text box. Users can enter data such as names, addresses, phone numbers, and comments into text boxes. There are two types of text boxes: regular text boxes (single line) and text areas (multi-line). In Figure 14-1, the top four fields are single-line text boxes, while the Comments box is a multi-line text area.

Figure 14-1. This form contains both single-line and multi-line text boxes.

You create a regular text box using a single-sided <input> tag with a type=“text” attribute:

<input type="text">

Each control within a form must have a unique name, expressed with the name attribute. For example, to name a particular text box phone:

<input type="text" name="phone">

You can specify a width for the text box with the size attribute. The default width is 20 pixels.

<input type="text" name="phone" size="30">

You can also specify a maximum length for the text string that users enter into the text box. This is different from the size of the text box. If the specified maximum length is greater than the text box width, the text scrolls horizontally as the user types. When users reach the specified maximum number of characters, the text box does not accept any more input. Use the maxlength attribute:

<input type="text" name="phone" size="30" maxlength="100">

In HTML5, you can require users to fill out a field before they submit the form (this applies only to HTML5-compliant browsers). To mark a field as required, add the required attribute to its tag:

<input type="text" name="phone" size="30" maxlength="100" required>

<input type="email" name="email-address">

<input type="URL" name="website">

<textarea name="comments" rows="5"></textarea>

<textarea name="comments" rows="5" cols="60"></textarea>

Creating a Submit or Clear Button

You will need to include a Submit button on the form so visitors can send the information to you. Submit refers to the button’s function, not the wording that appears on the button face. The default button text is Submit, but you can use a value attribute to display different text on the button. For example, to make the word Submit appear on the button face, set up the value attribute:

<input type="submit" value="Send">

You can also include a Reset button on the form, which allows the user to clear all the fields (see Figure 14-2). Again, use the value attribute to change the text on the button:

<input type="reset" value="Clear">

Figure 14-2. Submit and Clear buttons.

Many web designers find it useful to place form fields in tables to make it easier to align the fields. For example, as shown in Figure 14-3, you could place field labels in one column and the actual fields themselves in another. You’ll see this type of design in the next exercise.

Figure 14-3. You can use a table to make the fields and labels align neatly.

<input type="text" name="country" value="United States of America">

<textarea name="comments" rows="5">Great job! Keep up the good work.</textarea>

<input type="text" name="country" placeholder="Enter your country here">

When the valid responses to a particular prompt will always be one of a few simple options, such as sex or employment status, you will get more consistent and easier-to-evaluate results by using check boxes and option buttons rather than text boxes.

For example, suppose you are asking site visitors a yes/no question such as, “Are you interested in receiving our catalog by mail?” If you provide a text box, people might answer the question in any number of ways: y, n, Y, N, yes, no, Yes, No, YES, NO, maybe, Sure, No Thanks, and so on. Tabulating such results would be tedious because a human would need to evaluate each one. But by providing a check box, you remove any doubt: a check mark means yes; the lack of a check mark means no.

You use check boxes for single binary (yes/no) questions. A form might contain multiple check boxes, but each one is a separate decision for the person filling out the form (see Figure 14-4).

Figure 14-4. Check boxes allow users to make multiple independent selections.

To create a check box, use the type=“checkbox” attribute with the <input> tag:

<input type="checkbox" name="europe">

By default, the results of the form will show a value of On when the check box has been selected. For the check box shown in Figure 14-4, the results would display like this:

europe=on

You can change that default by specifying a value attribute. For example, you could report the word Yes for the check box:

<input type="checkbox" name="europe" value="Yes">

By default, check boxes display unselected; users must click each check box to select it. In some cases, however, it might be advantageous to have a check box preselected. For example, to encourage people to sign up for your newsletter, you could select the Newsletter check box by default, so that users must click it to clear it. To do this, add the checked=“checked” attribute:

<input type="checkbox" name="europe" value="Yes" checked="checked">

Use option buttons (also called radio buttons) to present a group of mutually-exclusive options. When you select an option button, all the other option buttons in the group are cleared (see Figure 14-5).

Figure 14-5. Option buttons enable users to select only one of a group of related choices.

To create a group of option buttons, choose a name for the group. You will specify the same name in the name attribute for each individual button. Use the value attribute (which will be different for each button in the set) to specify the value that will be reported for the group in the form results.

For example, suppose you want users to choose among three membership categories: Gold, Silver, and Bronze. Because you make the most money on a Gold membership, you want to make it the default choice:

<p><input type="radio" name="category" value="gold" checked="checked"> Gold<br>
<input type="radio" name="category" value="silver"> Silver<br>
<input type="radio" name="category" value="bronze"> Bronze</p>

As shown in Figure 14-6, each button is followed by text describing that option (Gold, Silver, Bronze). The words Gold, Silver, and Bronze are just ordinary text within the paragraph, as shown in the previous code.

Figure 14-6. In this option button set, Gold is the default choice.

When the form results are returned, this button group will report its name and the selected value:

category=gold

In the following exercise, you will enhance a form by adding a group of option buttons and a check box.

Check boxes are good for yes/no questions, and option buttons are appropriate when there are a few options to choose from, but what if you have a dozen or more choices? Option buttons for that many choices can take up a lot of space onscreen and can overwhelm a web visitor.

For situations involving many options, consider a list, also called a menu. A list can contain as many options as needed, yet it takes up very little space on the form (see Figure 14-7).

Figure 14-7. A menu list when closed (left) and when opened (right).

To create a list, start with a two-sided <select> tag. Within it, place each option in its own <option> tag. Place the text that you want to appear on the list between the opening and closing <option> tags. For example, to create the list shown in Figure 14-7, use the following code.

<p>Color: <select name="colors" size="1">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Pink</option>
<option>Brown</option>
<option>Black</option>
<option>Teal</option>
<option>Beige</option>
</select></p>

A list can be any height you like. In the preceding code, the size attribute is set to 1, which creates a drop-down list. If you set the size attribute to a larger value, the element renders as a list box instead. If there are more items in the list than will fit in the viewing space, a scroll bar displays automatically at the right side of the box. For example, you might change the opening <select> tag in the preceding code to this:

<p>Color: <select name="colors" size="5">

The result would be a list like the one shown in Figure 14-8.

Figure 14-8. A menu list with a size greater than 1 appears as a scrolling list box.

If the list’s choices fall into categories, you might want to divide them into sections (see Figure 14-9).

Figure 14-9. A multi-level list divides choices into categories.

To format a list as shown in Figure 14-9, surround the groups of options with an <optiongroup> tag. Include a label attribute that specifies the heading text for each option group. Here’s the code for the preceding example:

<select name="printers" size="1">
   <optgroup label="Inkjet">
      <option>SuperJet 1400</option>
      <option>SuperJet 1405</option>
      <option>SuperJet 1405 Plus</option>
   </optgroup>
   <optgroup label="Laser">
      <option>SuperLaser Value Edition</option>
      <option>SuperLaser Pro</option>
      <option>SuperLaser Plus</option>
   </optgroup>
</select>

In the following exercise, you will add a drop-down menu list to a form.

HTML5 provides several other field types that can add that extra bit of polish to your forms. If the user’s browser does not support them, it renders and treats them as text fields, so you can use them freely without worrying about backward compatibility.

Spin boxes (see Figure 14-10) are used to increment numeric values.

Figure 14-10. A spin box is a text box that includes increment buttons on the right side.

The spin box shown in Figure 14-10 was created by using the following code:

<input type="number" name="copies" min="0"max="100" step="1" value="1">

The min and max attributes control the minimum and maximum values, respectively. The step attribute specifies how much the value increments or decrements when you click the up or down arrow buttons. The value attribute specifies the default value.

A slider (see Figure 14-11) is a sliding bar that you can drag from side to side. Its type is range and its attributes are nearly identical to those for a spin box.

Figure 14-11. A slider is a bar you can drag to choose a setting within a range.

<input type="range" name="copies" min="1"max="4" step="1" value="1">

As you have learned in this chapter, directing form results to an email address is a quick, no-hassle way of collecting information, provided the visitor’s web browser and email program support it. As the volume of messages increases, however, organizing all the information you receive can become a challenge. You need to copy the information from the form results into a database or you need to at least print out a copy of the email messages. When you start receiving hundreds of form submissions a day, that responsibility can become overwhelming.

As an alternative, you can rely on a server-based script or application to handle the form results. A Common Gateway Interface (CGI) script written in a programming language such as Perl is one common, low-cost possibility. You reference the script in your <form> tag’s action attribute. The server on which you host your site must allow CGI scripts (some do not, for security reasons.)

There are hundreds of websites that offer free CGI scripts that you can modify in a text editor (such as Notepad) to meet your needs. To do this, you must know a little something about programming, which is beyond the scope of this book. However, if you are interested in learning about Perl and CGI scripting or you are looking for a service that will host your CGI script, see one of these websites:

As your website becomes more sophisticated, you also might want to include a public bulletin board area where people can post and read comments, or a guest book where people can leave public comments. You cannot create one of those by using only HTML, but you can integrate add-on components into your site that will do the job. There are many free and low-cost sources of programming code for a message board, both in CGI (see the previously mentioned sites) and in other languages. For example, check out the phpBB open-source bulletin board package at www.phpbb.com. (In order to use that package, your server must support PHP.) There are also many servicessuch as ProBoards (www.proboards.com) that will host your bulletin board on their servers,. You place a link to the message board hosting site on your webpage; to your visitors, it seems like the message board is part of your site.