HTML Form Tutorial
HTML forms allow your visitors to enter information that you in some way want to process. The most common use for a this is probably a html email form. This page contains a small tutorial to help you make your own forms.
There are six different types of elements that can be used to gather information from the user. These are:
- Text fields
- Textarea fields
- Checkboxes
- Radiobuttons
- Drop-down menus
- Multiple select lists
The basics
To create a form, simply start of with a <form> tag and end it with </form>. The tag got three attributes. The ACTION attribute should contain the name of the file that will take care of the input. There's also a NAME attribute (which doesn't need any explanation) and a method attribute. The METHOD can be set to either GET or POST. GET sends the information included in the URL while POST sends it in the HTTP environment (suitable for longer forms and more secure).
Basic html form:
<form name="input" action="myActionFile.php" method="get">
<input> //Here is where you place your elements
</form>
The <input> tag is used for most of the elements. You specify the type with the TYPE attribute. In most cases you also select a name for the element with the NAME attribute.
Submit button
We do of course need a submit button since we want the form to be able to do something with the input. The VALUE attribute is used to set the text written on the button.
This example:
<input type="submit" value="Text on button">
Html form button:
Text fields
Usually used for input of names, e-mail, phone number etc. Text fields are always only one row (no line-breaks accepted). You can set the NAME and VALUE as usual.
The code:
Name: <input type="text" name="name">
Site: <input type="text" name="URL" value="http://">
Gives the following output:
Name:
Site:
Textarea
If your information doesn't fit into a text field then you can use a textarea. It's basically a text field that allows line-breaks and scrolling. You can set the size of it with the ROWS and COLS attributes.
Code for two textareas:
<textarea name="firstText">
Default size
</textarea>
<textarea name="moreText" rows="4" cols="30">
Custom sized textarea
</textarea>
The result:
Checkboxes
Checkboxes are used to let the user choose one or several options. You can choose to set a checkbox to be checked by default by adding the value CHECKED in the tag. The value attribute is the information that'll be sent IF the checkbox is checked.
Code for checkboxes:
<input type="checkbox" name="checkBox1" value="alt1">
Alternative 1
<input type="checkbox" name="checkBox2" value="alt2" checked>
Alternative 2
They look like this:
Alternative 1
Alternative 2
Radiobuttons
When you need the user to be able to choose ONE of several options you use radiobuttons. Radiobuttons that belong to the same question should have the same name. You can select the default selected radiobutton by adding the value CHECKED.
Radiobutton example:
<input type="radio" name="chooseOne" value="1">
Alternative 1
<input type="radio" name="chooseOne" value="2">
Alternative 2
Result:
Alternative 1
Alternative 2
Drop-down menu
A drop-down box let's the user choose one of the options you've chosen to include. It may be wise to replace some text fields with a drop-down menu if the options should be limited. If you want to, you can mark one of the options as SELECTED.
Sample code for a html form drop-down menu:
<select name="howGood">
<option value="1">Terrible</option>
<option value="2">OK</option>
<option value="3" selected>Great</option>
</select>
Gives this drop-down box:
Multiple select list
You can also create a list where multiple option can be selected. The SIZE attribute sets the height of the list (number of options that are shown).
Code for multiple select:
<select name="geometry" MULTIPLE SIZE=5>
<option value="1" selected>Circle</option>
<option value="2">Rectangle</option>
<option value="3" selected>Square</option>
<option value="4">Triangle</option>
</select>
And here's the example:
Example form
This is an example to show you how you use several together.
HTML form example:
<form>
Name: <input type="text" name="name">
Site: <input type="text" name="URL" value="http://">
What are you interested in?
<input type="checkbox" name="checkBox1" value="alt1">
Web design
<input type="checkbox" name="checkBox2" value="alt2">
Search engine optimization
Join mailing list?
<input type="radio" name="mailing" value="1" checked>Yes
<input type="radio" name="mailing" value="2">No
Any other comments?
<textarea name="moreText" rows="4" cols="30">
</textarea>
<input type="submit" value="Send">
</form>
Html form tutorial:
Name:
Site:
What are you interested in?
Web design
Search engine optimization
Join mailing list?
Yes
No
Any other comments?
