Starting an Online Form with the <Form> Tag
Before you begin to plan the layout, there are several elements which are commonly used in Web page forms which needs to be addressed.
- Input boxes for text and numerical entries
- Radio buttons, also called option buttons, to select a single option from a predefined lists
- Selection button for long lists of options, usually in a drop-down list box
- Check boxes to specify an item as either being present or absent
- Text areas for extended entries that might include several lines of text
- Submit and Reset buttons to either submit the form to the CGI script or to reset the form to its original state.
Each element in which the user can enter information is called a field. Information entered into a field is called the field value, or simply the value. Before you can create any field, you must first indicate to the browser that the page will contain fields. You do this using the <FORM> tag. The general syntax of the <FORM> tag is:
<FORM>
</FORM>
Between the <FORM> tags, you will place the various tags for each of the fields in the form.
First, set up a basic HTML page in your text editor (<HTML>, <HEAD>, <TITLE>, </TITLE>, </HEAD>, <BODY>, </BODY>, </HTML>). Remember to place the name survey for the title. Save your file, using the .html extension, under the name surveyform.html.
Return to your text editor and place your cursor behind the beginning body tag and press enter to create a new blank line. You will center the companies logo here. Write the HTML code to center it in the blank line created under the beginning body tag. Press the enter key to insert a blank line and type in the survey form directions as follows:
To better serve our customers, please fill out our survey below:
Save your file and view it in a browser window. Make sure your logo is centered at the top of the page and your description of the form is aligned to the left of the page and directly under the logo.
Return to the file surveyform.html in your text editor. Directly above the </BODY> tag insert the following two lines:
<FORM NAME=SVY>
</FORM>
Turn to page 6.9 in your textbook. This is how your form will be laid out. Figure 6-5 shows the simple two-column table that you'll use to create the form. Now, you'll add the tags for the two-column table to the surveyform.html file.
You will now place the table in your form. Tables allow you to place information on a page that can be easily manipulated. In the surveyform.html file, insert the following two lines between the <FORM> AND </FORM> tags:
<TABLE>
</TABLE>
Save your changes. With the <FORM> and <TABLE> tags in place, you can now start to insert tags for each field in the form. You'll begin by learning how to create input boxes.
