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:
<input type="text" />
- Browser View
- HTML coding viewed through a web browser:
Checkbox
A checkbox will enable the user to select multiple options.
- HTML Code
- HTML code viewed within an HTML document:
<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:
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:
<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:
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:
<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:
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:
<input type=”submit” />
- Browser View
- HTML coding viewed through a web browser:
This concludes the HTML forms tutorial. In the next section, we will focus on HTML iframes.