HTML Forms

 

HTML Forms

HTML forms are used to enable your visitos to provide information through your website. Your visitors can input their information into your form, click on a “submit” button, and their information will be instantly sent to you.

An HTML form is created using the <form> </form> tags and elements.

Creating a Form

In order to process the information your form receives, you will need to have a form processing script. This script will reside on your server and will be used to process your form’s information. Check with your web host, as they will already have this set up for you.

Form Action

To insert a form into your webpage, begin your form with the opening <form> tag and end with </form>. The opening <form> tag should contain an action attribute that tells the form where to send the data to be processed and a method in which to post the data.

The ACTION may be the URL to the form processing script or it may be an email address.

<form method=”post” action=”/cgi-bin/example.cgi”>

There are two methods used to post data — get and post.

method="get"

This method will append all of the information from a form onto the end of the URL being requested.

method="post"

This method will transmit all of the information from a form as a separate packet to the HTTP server immediately after the requested URL. This is the preferred method.

Form Elements

In order to collect data through a form, you must use form elements that will be placed between the <form> and </form> tags.

Two of the most basic form elements are the TEXT INPUT and the SUBMIT INPUT:

<input> Tag

The <input> tag specifies user input fields.

Text

Enables users to input text, such as an email address.

HTML Code

HTML code viewed within an HTML document:
html-line

<input type="text" />

Browser View

HTML coding viewed through a web browser:
html-line

html_input

Checkbox

A checkbox will enable the user to select multiple options.

HTML Code

HTML code viewed within an HTML document:
html-line

<input type="checkbox" name="poll" value="Dogs" /> I love dogs<br />
<input type="checkbox" name="poll" value="Cats" /> I love cats

Browser View

HTML coding viewed through a web browser:
html-line

I love dogs

I love cats

Radio

A radio button will enable the user to select specific options.

HTML Code

HTML code viewed within an HTML document:
html-line

<input type="radio" name="food" value="pizza" /> Pizza
<input type="radio" name="food" value="lasagna" /> Lasagna

Browser View

HTML coding viewed through a web browser:
html-line

Pizza

Lasagna

Select Lists

A select list will enable the user to select an option from a drop down box.

HTML Code

HTML code viewed within an HTML document:
html-line

<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6 </option>
</select>

Browser View

HTML coding viewed through a web browser:
html-line

Submit

A submit button will enable users to send the form information to the form processing script.

HTML Code

HTML code viewed within an HTML document:
html-line

<input type=”submit” />

Browser View

HTML coding viewed through a web browser:
html-line

 
This concludes the HTML forms tutorial. In the next section, we will focus on HTML iframes.