Suppose you want to collect some information from a user such as their name and email address. This is done with HTML forms. A simple form consists of an input element such as a text box and a submit button to send the form data to the destination you specify. Form data is handled by a server-side program that can process HTTP requests such as an ASP document, CGI program, or Java servlet. But that's beyond the scope of this tutorial. Here, we'll simply discuss how to create and send a form.

Forms are created with the <FORM> tag the syntax is...

<FORM ACTION="" METHOD="" ENCTYPE=""> form elements go here... </FORM>

ACTION

This attribute is the url to which the form data will be sent. If omitted it defaults to _self which is the page containing the form.

METHOD

This attribute is either "GET" or "POST". With GET, the form data is appended to the ACTION url. This is useful if the form data is simply being used to get more data and if the form data is not sensitive. With POST, the form data is hidden in the HTTP request. GET is the default.

ENCTYPE

This is the mime-type used to encode the form data. This defaults to 'application/x-www-form-urlencoded' and is typically not changed.

Now let's create a simple form. We'll let all the attributes default.

Most community sites don't allow you to use the <FORM></FORM> tag. So don't include it with your form elements.

<form>
<input type="text" name="text1">
<input type="submit" name="submit1" value="Submit">
</form>

You should see the following.

Now let's look at most of the available HTML form elements.

Form Elements

First we'll cover the INPUT tags. Note that for INPUT tags the TYPE and NAME attributes are required. NAME is used to identify this form field to the receiving url.

Text Input 

<INPUT TYPE="text" NAME="text1" VALUE="" SIZE="" MAXLENGTH="">
An initial value may be specified with the "VALUE" attribute. And the "SIZE" and "MAXLENGTH" attributes may be used to specify the display size and the maximum number of characters respectively.

Hidden Text Input 

<INPUT TYPE="hidden" NAME="hiddentext1" VALUE="v">
A hidden textbox is used when you want to send some form data that is not input by the user. A hidden field is typically used to pass data such as a userid between pages or to pass information to the receiving url such as required fields. The VALUE attribute is required.

Password Text Input 

<INPUT TYPE="password" NAME="hiddentext1">
A password field is used when you want to retrieve text that you don't want displayed when typed. Asterisks are displayed in place of the typed text.

Submit Button 

<INPUT TYPE="submit" NAME="submit1" WIDTH="" HEIGHT="">
The submit input tag is used to send the form data to the receiving url. Width and height are not required and specify the size of the button in pixels.

Reset Button 

<INPUT TYPE="reset" NAME="reset" WIDTH="" HEIGHT="">
The reset input tag is used to reset all of the form values to their original values when the page was loaded. Width and height are not required and specify the size of the button in pixels.

Checkbox 

<INPUT TYPE="checkbox" NAME="checkbox" VALUE="" CHECKED>
The checkbox field enables the user to put a checkmark by the value identified by VALUE attribute which is required. Use the CHECKED attribute if you want this value to default to selected, otherwise omit it. To give the checkbox a label, simply put some text before or after the checkbox tag.

Radio Button 

<INPUT TYPE="radio" NAME="radio" VALUE="" CHECKED>
The radiobutton field enables the user to specify one and only one value, identified by the required VALUE attribute, from a cluster of values. Typically, several radiobuttons with the same name are grouped together on the page. When one is selected, the other is automatically deselected. This is useful for presenting something like a multiple choice exam.

Now for the remaining form elements...

Textarea 

<TEXTAREA NAME="textarea1" ROWS="" COLS=""></TEXTAREA>
The textarea tag is used when you want to receive free-form, multiline user input. The "ROWs" and "COLS" attributes are required and are used to specify the display area size by rows (height) and columns (width). You can initialize the textarea with any text between the start and end tags.

Select  option1 option2

<SELECT NAME="select1" SIZE="" MULTIPLE>
<OPTION VALUE="">option1</OPTION></SELECT>
The select tag is used to present a list for the user to choose from. Each option tag represents an item in the list. The displayed value of each option is specified between the start and end option tags. The value sent to the receiving url is specified in the VALUE attribute of the option tag selected. The SIZE attribute of select specifies the height of the select box. If more items exists than can be displayed in the size, the down-arrow will appear. The width of the select box is the same as the widest option. Use the MULTIPLE attribute to allow the user to select more than one item at a time (using the ctrl key). Omit it for a single selection list.

There are a few other form elements that are a bit more advanced such as FILE, BUTTON, and IMAGE. Check the links section for links to more advanced HTML topics.

Now for another exercise. Try reproducing the following form. Remember that you can use form elements inside of table cells. Also, start the form before you start the table and end the table before ending the form.

Next >>