Creating Form Controls with the input Tag

Creating Form Controls with the <input> 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 information 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 attributes that will 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 required. It associates a name with the data entered in that field when the data is sent to the server. The rest of this section describes the different types of controls you can create using the input element.

Creating Text Controls

Text controls enable you to gather information from a user in small quantities. This control type creates a single-line text input field in which users can type information, such as their name or a search term.

To create a text input field, create an input element and choose text as the value for the type attribute. Make sure to name your control so that the server script will be able to process the value:

Input

<p>Enter your pet's name: <input type="text" name="petname" /></p>

Figure 10.4 shows this text control, which tells the user what to type in.

Output

Figure 10.4. A text entry field.

You can modify the appearance of text controls by using the size attribute. Entering a number sets the width of the text control in characters:

<input type="text" name="petname" size="15" />

To limit the number of characters a user can enter, add the maxlength attribute to the text control. This doesn't affect the appearance of the field; it just prevents the user from entering more characters than specified by this attribute. If users attempt to enter more text, their web browsers will stop accepting input for that particular control.

<input type="text" name="petname" size="15" maxlength="15" />

To display text in the text control before the user enters any information, use the value attribute. If the user is updating data that already exists, you can specify the current or default value using value, or you can prompt the user with a value:

<input type="text" name="petname" size="15" maxlength="15" value="Enter Pet Name" />

In this case, Enter Pet Name appears in the field when the form is rendered in the web browser. It remains there until the user modifies it.

Caution

When you're using the value attribute, using a value that's larger than the size of the text control can confuse the user because the text will appear to be cut off. Try to use only enough information to make your point. Ensure that any value is less than or equal to the number of characters you specified in size.

Creating Password Controls

The password and text field types are identical in every way except that the data entered in a password field is masked so that someone looking over the shoulder of the person entering information can't see the value that was typed into the field.

Tip

You don't have to limit your use of the password control to just passwords. You can use it for any sensitive material that you feel needs to be hidden when the user enters it into the form.

To create a password control, create an input element with the type set to password. To limit the size of the password control and the maximum number of characters a user can enter, you can use the size and maxlength attributes just as you would in a text control. Here's an example:

Input

<p>Enter your password: <input type="password" name="userpassword"   size="8" maxlength="8" /></p>

Figure 10.5 shows a password control.

Output

Figure 10.5. A password form field.

Caution

When data entered in a password field is sent to the server, it is not encrypted in any way. Therefore, this is not a secure means of transmitting sensitive information. Although the users can't read what they are typing, the password control provides no other security measures.

Creating Submit Buttons

Submit buttons are used to indicate that the user is finished filling out the form. Setting the type attribute of the form to submit places a Submit button on the page with the default label determined by the browser, usually Submit Query. To change the button text, use the value attribute and enter your own label, as follows:

<input type="submit" value="Send Form Data" />

Note

Your forms can contain more than one Submit button.

If you include a name attribute for a Submit button, the value that you assign to the field is sent to the server if the user clicks on that Submit button. This enables you to take different actions based on which Submit button the user clicks, if you have more than one. For example, you could create two Submit buttons, both with the name attribute set to "action". The first might have a value of "edit" and the second a value of "delete". In your script, you could test the value associated with that field to determine what the user wanted to do when he submitted the form.

Creating Reset Buttons

Reset buttons set all the form controls to their default values. These are the values included in the value attributes of each field in the form (or in the case of selectable fields, the values that are preselected). As with the Submit button, you can change the label of a Reset button to one of your own choosing by using the value attribute, like this:

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

Caution

Reset buttons can be a source of some confusion for users. Unless you have a really good reason to include them on your forms, you should probably just avoid using them. If your form is large and the user clicks the Reset button when he means to click the Submit button, he isn't going to be very pleased with having to go back and re-enter all of his data.

Creating Check Box Controls

Check boxes are fields that can be set to two states: on and off (see Figure 10.6). To create a check box, set the input tag's type attribute to checkbox. The name attribute is also required, as shown in the following example:

Input

<p>Check to receive SPAM email <input type="checkbox" name="spam" /></p>

Output

Figure 10.6. A check box field.

To display the check box as checked, include the checked attribute, as follows:

<input type="checkbox" name="year" checked="checked" />

You can group check boxes together and assign them the same control name. This allows multiple values associated with the same name to be chosen:

<p>Check all symptoms that you are experiencing:<br /> <input type="checkbox" name="symptoms" value="nausea" /> Nausea<br /> <input type="checkbox" name="symptoms" value="lightheadedness" /> Light-headedness<br /> <input type="checkbox" name="symptoms" value="fever" /> Fever<br /> <input type="checkbox" name="symptoms" value="headache" /> Headache </p>

When this form is submitted to a script for processing, each check box that's checked returns a value associated with the name of the check box. If a check box isn't checked, neither the field name nor value will be returned to the serverit's as if the field didn't exist at all.

Creating Radio Buttons

Radio buttons, which generally appear in groups, are designed so that when one button in the group is selected, the other buttons in the group are automatically unselected. They enable you to provide users with a list of options from which only one option can be selected. To create a radio button, set the type attribute of an <input> tag to radio. To create a radio button group, set the name attributes of all the fields in the group to the same value, as shown in Figure 10.7. To create a radio button group with three options, the following code is used:

Input

<p>Select a color:<br /> <input type="radio" name="color" value="red" /> Red<br /> <input type="radio" name="color" value="blue" /> Blue<br /> <input type="radio" name="color" value="green" /> Green<br /> </p>

Output

Figure 10.7. A group of radio buttons.

As with check boxes, if you want a radio button to be selected by default when the form is displayed, use the checked attribute. One point of confusion is that even though browsers prevent users from having more than one member of a radio button group selected at once, they don't prevent you from setting more than one member of a group as checked by default. You should avoid doing so yourself.

Using Images As Submit Buttons

Using image as the type of input control enables you to use an image as a Submit button:

Input

<input type="image" src="/books/2/631/1/html/2/submit.gif" name="submitformbtn" />_

Figure 10.8 shows a custom button created with an image.

Output

Figure 10.8. The image input type.

When the user clicks on an image field, the x and y coordinates of the point where the user clicked are submitted to the server. The data is submitted as name.x = x coord and name.y = y coord, where name is the name assigned to the control. Using the preceding code, the result might look like the following:

submitoformbtn.x=150&submitformbtn.y=200

You can omit the name if you choose. If you do so, the coordinates returned would just be x = and y =. Form controls with the type image support all the attributes of the <img> tag. You can remove the border from the image by using border="0", or add a horizontal buffer around it using hspace="10". To refresh your memory on the attributes supported by the <img> tag, go back to Lesson 7, "Adding Images, Color, and Backgrounds."

Creating Generic Buttons

In addition to creating Submit, Reset, and Image buttons, you also can create buttons that generate events within the browser that can be tied to client-side scripts. To create such a button, set the type attribute to button. Figure 10.9 shows a button that calls a function when it is pressed. Use the following code to create a button:

Input

<input type="button" name="verify" value="verify" onclick="verifydata()" />

Output

Figure 10.9. A button element on a web page.

This example creates a button that runs a function called verifydata when it's clicked. You provide the label that appears on the button with the value attribute of Verify Data.

Unlike Submit buttons, regular buttons don't submit the form when they're clicked.

Hidden Form Fields

Hidden form fields are used when you want to embed data in a page that shouldn't be seen or modified by the user. The name and value pair associated with a hidden form field will be submitted along with the rest of the contents of the form when the form is submitted. To create such a field, set the field's type to hidden and be sure to include both the name and value attributes in your <input> tag. Here's an example:

<input type="hidden" name="id" value="1402" />

Hidden form fields are generally used when data identifying the user needs to be included in a form. For example, let's say you've created a form that allows a user to edit the name and address associated with her bank account. Because the user can change her name and address, the data she submits can't be used to look up her account after she submits the form, plus there might be multiple accounts associated with one name and address. You can include the account number as a hidden field on the form so that the program on the server knows which account to update when the form is submitted.

The File Upload Control

The file control enables a user to upload a file when he submits the form. As you can see in the following code, the type for the input element is set to file:

Input

<p>Please select a file for upload: <input type="file" name="fileupload" /></p>

Figure 10.10 shows a file upload control.

Output

Figure 10.10. The file upload control.

If you want to use a file upload field on your form, you have to do a lot of behind-the-scenes work to get everything working. For one thing, the program specified in the action attribute of your form must be able to accept the file being uploaded. Second, you have to use the post method for the form. Third, you must set the enctype attribute of the <form> tag to multipart/form-data. I haven't discussed the enctype attribute because this is the only case where you'll have to use it. Ordinarily, the default behavior is fine, but you must change the enctype in this particular case.

Let's look at a simple form that supports file uploads:

<form action="/cgi-bin/upload.cgi" enctype="multipart/form-data" method="post"> <input type="file" name="new_file" /> <input type="submit" /> </form>

After you've created a form for uploading a file, you need a program that can process the file submission. Creating such a program is beyond the scope of this book, but all popular web programming environments support file uploads.