HTML Tutorial - Forms
Forms allow you to gather information from your web site's visitors.
These are often used for shopping carts,
polls or to provide feedback. The information entered is sent to
a program which in turn reads the form data.
1. Defining a form
A form starts with the below line of .html code.
|
<FORM METHOD="POST" ACTION="script.cgi">
|
|
The METHOD attribute tells the web server how to pass the
data to the script. Usually, this is POST for forms.
Replace script.cgi with the name of your program
which will receive the data from your web based form.
Forms end by closing the FORM tag, as shown below.
Form elements are defined between those html tags.
2. Submit button
Clicking a submit button sends the information entered in forms to the program which will
handle the data.
<FORM METHOD="POST" ACTION="script.cgi">
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
This will create a button with the text we defined on it.
Most form fields are INPUT tags. The
TYPE attribute defines the type of
data it will provide. The VALUE
attribute populates the html field with data.
3. Form fields
3.1 Text
This field type allows for text to be collected via forms.
<FORM METHOD="POST" ACTION="script.cgi">
Your name <INPUT TYPE="text" NAME="name"><BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
The INPUT tag is defined to
be of the 'text' TYPE. The NAME
attribute will tell the program receiving the data from the form how to find this specific html
field.
This creates a form where plain text can be entered.
3.2 Checkbox
This html field type allows for one or more options to be selected in online forms.
<FORM METHOD="POST" ACTION="script.cgi">
Colors you like<BR>
<INPUT TYPE="checkbox" NAME="color1" VALUE="Red"> Red<BR>
<INPUT TYPE="checkbox" NAME="color2" VALUE="Green"> Green<BR>
<INPUT TYPE="checkbox" NAME="color3" VALUE="Blue"> Blue<BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
The INPUT tags are defined to
be of the 'checkbox' TYPE.
3.3 Radio buttons
This field type allows for only of of many options to be selected in html forms.
<FORM METHOD="POST" ACTION="script.cgi">
Your favorite color<BR>
<INPUT TYPE="radio" NAME="color1" VALUE="Red"> Red<BR>
<INPUT TYPE="radio" NAME="color2" VALUE="Green"> Green<BR>
<INPUT TYPE="radio" NAME="color3" VALUE="Blue"> Blue<BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
The INPUT tags are defined to
be of the 'radio' TYPE.
3.4 Drop down menus
This field type offers multiple choices in a drop-down menu within html based forms.
<FORM METHOD="POST" ACTION="script.cgi">
Your favorite color<BR>
<SELECT NAME="color">
<OPTION VALUE="Red"> Red<BR>
<OPTION VALUE="Green"> Green<BR>
<OPTION VALUE="Blue"> Blue<BR>
</SELECT>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
The SELECT html tag is used to start the drop down menu.
The OPTION tags add options to the menu.
3.5 Multiple lines of text
This html field type allows for large multiple lines of text to be entered into this form example.
<FORM METHOD="POST" ACTION="script.cgi">
Your address<BR>
<TEXTAREA NAME="address">
</TEXTAREA>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
|
|
The TEXTAREA tag adds a larger input box to forms.
4. Practical use of forms
The many html form fields can be combined in a single form to
make it useful.
Additional attributes can be defined for the html tags used here.
The goal of this tutorial/guide is to provide a place for beginners to find
help and get started.
