HTML Form Tutorial, Part I

By Will Bontrager
2004-07-06


The <input> Tag
Most of the information forms collect is specified by the <input> tag. Single-line text entry fields, checkboxes, radio selections, password entry fields, form buttons, file upload fields, and image buttons are all specified with the <input> tag.

The <input> tag can have several other attributes depending on the "type" attribute. It almost always has a name attribute. Every input tag requires a type attribute.

The "type" Attribute

It is probably safe to say that every form has an <input> tag of some kind and that the tag contains the "type" attribute. The type attribute tells the browser what type of form field or button to create. The type attribute looks something like this:

type="_______"

with the underscore representing one of numerous types of type attributes.

The type="submit" Attribute

The submit button is the most common form element, created with the type="submit" attribute. It might or might not have a "value" attribute, depending on whether or not you want to specify the text of the button. Also, the submit button might or might not have a name, depending on what the information receiving program or function's requirements are.

In this example, it does not have a name but it does have a value:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="submit" value="Click Me!">
</form>

Forms may contain more than one submit button. In that case, it is usual for the attributes to have names so the processing program or function knows which of them was clicked. Example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="submit" name="1" value="First Visit">
<input type="submit" name="2" value="Second Visit">
<input type="submit" name="3" value="Third Visit">
</form>

The type="text" Attribute

The type="text" attribute is a common form input field. It creates a place wherein a line of information can by typed.

If you want to put default text into the input field, use the "value" attribute. Example:

value="http://"

Both a "size" and a "maxlength" attribute may be used. These specify the size of the text input area and the maximum number of characters that may be typed into the input area. You may use neither, one, or both of those tags.

Here is an example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="submit">
</form>

The type="password" Attribute

The type="password" attribute works the same as the type="text" attribute except the characters typed into the input area are displayed as asterisks. Here is an example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="password" name="P" size="9" maxlength="20">
<input type="submit">
</form>

The type="checkbox" Attribute

The checkbox either contains information or it doesn't, depending on whether or not it is checked. Checkbox tags almost always have a "value" attribute.

If you want any checkboxes pre-checked, include the CHECKED attribute. Example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="checkbox" name="c_blue" value="yes">
<input type="checkbox" name="c_red" value="yes" CHECKED>
<input type="checkbox" name="c_pink" value="yes" CHECKED>
<input type="checkbox" name="c_yellow" value="yes">
<input type="submit">
</form>

In the above example, the user will see four checkboxes with the middle two pre-checked.

Notice that each checkbox has a different name. This separates the information into different chunks for the receiving program or function to process. In some cases, the receiving program or function might require the checkboxes to have the same name, but do it that way only if specified in the instructions.

The type="radio" Attribute

Only one radio button in a set contains information, the one that is checked. Radio tags almost always have a "value" attribute.

If you want to pre-check one radio button, use the CHECKED attribute:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="red" CHECKED>
<input type="radio" name="color" value="pink">
<input type="submit">
</form>

In the above example, the user will see three radio buttons with the middle one pre-checked.

Each radio button in a set must have the same name. When more than one radio button has the same name, only one of them can be checked at a time.

The type="file" Attribute

If the form information receiving program or function can upload a file from the user's computer to your internet server, the type="file" attribute is used. (To use this attribute, the <form> tag should have the enctype attribute specified as "multipart/form-data")

Optionally, you may restrict the type of file the user may upload with the "accept" attribute. The accept attribute specifies a MIME Content Type. There are many MIME types and to list them all would be space prohibitive. However, here are those you are most likely to need.

To restrict the uploads to images, use:

accept="image/*"

To restrict to only GIF images, use:

accept="image/gif"

To specify only JPEG, PNG, or TIFF image files use:

"image/jpg,jpeg", "image/png", or "image/tiff", respectively.

To specify only GIF and JPEG, use:

"image/gif,jpg,jpeg"

To restrict to text files only, use:

accept="text/*"

To specify HTML files or plain text files, use:

"text/html" or "text/plain", respectively.

Optionally, you may specify the size of the input field and the maximum number of characters that may be entered with the "size" and "maxlength" attributes.

Here is an example file upload form input area:

<form method="POST"
action="/cgi-bin/something.cgi"
enctype="multipart/form-data">
<input type="file" name="upfile" accept="image/*">
<input type="submit">
</form>

The type="hidden" Attribute

Use the type="hidden" attribute to specify information for the receiving program or function that the user may not change. This information is usually required by the program or function in order to process the other information and/or to determine what to sent back to the browser. The installation instructions of the program or function should specify what hidden fields are required, if any.

Here is an example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="hidden"
name="nextpage"
value="http://willmaster.com/">
<input type="submit" value="Click For Next Page">
</form>

The type="reset" Attribute

This attribute creates a reset button. Clicking that button will reset the form to the state it was in when it was first loaded into the browser. It might or might not have a "value" attribute, depending on whether or not you want to specify the text of the button. It rarely requires a name because the reset button's value is rarely used by the receiving program or function.

In this example, it does not have a name but it does have a value:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="reset" value="Erase Everything!">
<input type="submit" value="Submit Now!">
</form>

The type="button" Attribute

This attribute creates a clickable button with text you specify in the "value" attribute. This type of button is typically used to send information to a JavaScript function with the "onClick" attribute. In this case, a submit button may be optional. Example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="text" name="email" size="17" maxlength="44">
<input type="button"
value="Verify Email Address"
onClick="return EmailVerification()">
<input type="submit">
</form>

The type="image" Attribute

An image may be used instead of a submit button. To do that, use the type="image" attribute.

When using the type="image" attribute, the "src" attribute must be specified. The src attribute is specified like you would specify the src attribute in an <img> tag to place an image on a web page. Optionally, you may include "align", "border", "height", "width", "hspace", and/or "vspace" attributes, just like you would in an <img> tag.

When the user clicks the image, the form submits its information to the program or function specified in the <form> tag.

Here is an example:

<form method="POST" action="/cgi-bin/something.cgi">
<input type="text" name="url" size="17" maxlength="44">
<input type="image"
src="myimage.gif"
border="0"
align="right">
</form>

Tutorial Pages:
» HTML Form Tutorial, Part I
» How Information Is Sent
» Specifying the Encoding Method for the Information Being Sent
» Form Related Tags
» The <input> Tag
» Part II


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables