HTML Form Tags

There are a few HTML tags that you need to be familiar with before you can create a Web interface to a database. This section introduces you to the tags you will use most often. Tags used for basic HTML pages and tables are not covered. Please refer to the World Wide Web Consortium's Web site at http://www.w3.org for more information and links to tutorials.

We cover the tags used most often; then we show a couple examples to bring it all together so that you can see these items in action, gaining a better understanding of how they work together.

<form>

The HTML <form> tag is used to begin a form on a Web page. The <form> tag has two attributes we are going to cover: action and method.

<form action='/cgi-bin/foo.cgi'>

The action attribute tells the browser where to send the request when the form is submitted. The /cgi-bin/ directory is where CGI programs are normally located on Web servers. This path may change based on how the Web server you use is configured.

<form action='/cgi-bin/foo.cgi' method='post'>

The method attribute tells the Web browser how data should be passed to the Web server. Two methods are used: post and get. The post method passes the form data via the standard input, STDIN. The get method passes the form data in the URL. Because get passes the data on the URL, it has some limitations that the post method does not. Namely, there is a limit on how much data can actually be passed on the URL. This limit varies for different browsers and Web servers. The post method does not have this limitation, nor does it make the information passed to the server readily visible like the get method does.

The action attribute is required by the HTML specifications: If it is left off, it is up to the browser to determine the appropriate action. To ensure compatibility, always use the action attribute. The default attribute for the method attribute is get.

When developing Web applications, use the get method so that you can always see what data is being passed to the program. When you are satisfied with the application, switch to the post method so that the URL doesn't get cluttered with all of the form data and so that you don't hit the URL-length limit.

For example, if we have a CGI application called name.cgi and we use the get method to pass the information, the URL will look something like this:

http://www.perlguy.net/cgi-bin/name.cgi?first=Brent&last=Michalski

If we use the post method, the URL will look like this:

http://www.perlguy.net/cgi-bin/name.cgi

The same data may have been passed, but since it is being passed via a different method, it is not visible to the user.

<input type='foo' name='field_name'>

The <input> tag is the most popular tag for HTML forms. It is so widely used because it is so versatile and has many different attributes to modify its behavior, as we'll see in the following sections.

<input name='field_name'>

The name attribute is used to maintain a relationship between the form data and the item on the page. It is basically a variable name used to gain access to the data stored in the field.

<input name='field_name' type='text'>

The input type of text is the commonly seen text-entry box that appears on many forms. This type of HTML form input is used to gather text information from the user.

<input name='field_name' type='password'>

The password type is exactly like the text input box. But when data is entered into this box, only the * character shows up. This field is helpful; when you type sensitive data such as passwords, this field prevents others from seeing what you have entered.

The password type by itself is not an adequate security measure; the data submitted is still passed as the user has entered it (unencrypted). If the form uses the get method and has a password field, the plaintext password is visible in the URL once the form is submitted and in the browser's history.

For example, if a user enters "supersecret" into a password field named "password" on a form that uses the get method, the URL may look like this once the form has been submitted:

http://www.perlguy.net/cgi-bin/admin.cgi?task=delete&password=supersecret

Notice that no encryption of the password field has occurred; it is exactly as the user has typed.

<input name='field_name' type='hidden' value='value_to_pass'>

The hidden type also has a name that can be deceiving. Although the data that this field contains is hidden on the HTML form (it does not show up on the form as it appears on the screen), the data is visible in the HTML source. This means that sensitive data should not be passed in a hidden field because anyone can see the information by simply choosing ViewÍSource in his or her browser.

The hidden field type can be very useful for maintaining nonsensitive data in a CGI application by passing the data in hidden fields between CGI program calls.

<input name='field_name' type='radio' value='val'>

The radio input type creates radio buttons on the form. Radio buttons are the round input widgets used for lists on which only one item can be selected. For the name attribute, the same name is used for all radio buttons of the same type. The data in the value attribute is what gets passed to the HTML form.

<input name='field_name' type='checkbox' value='val'>

The checkbox creates the small square boxes on the form that are used for lists that can have multiple items selected. Checkboxes are similar to radio buttons, but with a checkbox, more than one item can be selected. Again, items belonging to the same list use the same name value.

Note: The radio and checkbox input items may also be passed a checked value, like so: <input name="name" type="radio" value="yes" checked>. Passing a checked value causes the item to be initially selected when the form is loaded.

<input type='reset' value='Reset Form'>

An input type of reset is used to reset all values on the current form to their default values. The value attribute allows you to set the text that appears on the button.

<input name='button_name' type='submit' value='Add Record'>

The submit input type is used to submit data on the HTML form to the CGI program on the server. The value attribute is used to set the text on the button shown. If no value attribute is set, the default button text is "Submit Query". A form can have multiple submit buttons; on the server side, the CGI application can check to see which button has been clicked and can take appropriate action.

<select name='list_name'>

The select HTML tag is used for lists of items presented in a drop-down style.

<option value='item_value'>

The option tag goes inside of a select block. The value attribute is passed to the server if that item is currently selected when the form is submitted. For example:

 <select name="state">  <option value="MI">Michigan</option>  <option value="MN" selected>Minnesota</option>  <option value="MS">Mississippi</option>  <option value="MO">Missouri</option> </select>

In the preceding code, a drop-down list containing four states is created. By using the selected attribute, the Minnesota item is displayed on the form when it is first loaded and also when the Reset button is pressed. The full state names will be displayed in the drop-down list, but when the form is submitted, only the two-character abbreviation in the value attribute is sent to the CGI application.

<textarea name='item_name' rows='4' cols='40' wrap='physical'>

A textarea can have quite a few attributes. The name attribute serves the same purpose as it does in the other HTML form tags. The rows and cols tell the browser how many rows and columns this textarea is supposed to be displayed as. The wrap attribute is used to cause the text to wrap automatically when it gets to the edge of the textarea.

The textarea tag requires a closing tag; any text in between the opening and closing tags is displayed in the textarea upon page load and also if the reset button is pressed.

For example:

<textarea name="comments" rows="2" cols="20" wrap="physical">  This is a feedback section. </textarea>

produces a textarea with "This is the feedback section." as the default text.

These are the only tags we will cover; these tags will be worked into our examples so that each can be seen in action.