Adding Final Touches to Web Page
Elements in a Form
There are a variety of elements that can be used within a form to provide interface for user response. This section provides a narrative through the most popularly used elements:

The Input :
This element is the basic way to get input from the user in a variety of situations. The key that an input element can define many types of graphical user interface features:
  • pull-down menus
  • radio buttons
  • text fields
  • checkboxes
These are all variations on the INPUT element with a different type attribute set for each. There are many situations when eliciting user response can be done using INPUT. For example, asking for a visitor's name. Here is the tag that queries the user for a name. (Using "text" as the value of the attribute TYPE)
Name: <INPUT TYPE="text" SIZE=40 NAME="name">

The "text" values of the attribute TYPE identify this as a single line text input field that will display 40 characters. The NAME attribute of the INPUT tag designates the variable name that will be used in the data structure sent to the query program. This NAME is used to identify the value of the user's response from the INPUT tag.

The INPUT tag can be used to create many different kinds of user interface features. This is an INPUT "checkbox" example used to ask the user to fill in any number of responses:

The <SUBMIT>
This is also one of the elements of the INPUT. This element will allow the user to click and send the form to the URL that specified in the <FORM>. The structure of this tag will look like:
<INPUT TYPE="Submit" NAME="Submit"
VALUE="Sent Form">
The value, "Sent Form", that you see in the tag will appear on the face of the button. Therefore, there is no need to type in any word after the tag.

The <RESET>
The tag is opposite the SUBMIT> tag as it will clear all the input entered by the user. The value ="Clear Form", also will appear on the face of the button. The structure of this tag is:
<INPUT TYPE="Reset" NAME="reset" VALUE="Clear Form">

Example of a form:
<FORM METHOD="POST" ACTION="cgi-bin/order.pl">
<Name:INPUT TYPE="text" SIZE="40" NAME="name">
<Age:INPUT TYPE="text" SIZE="5" NAME="age">
This is an INPUT "radio" button example used to ask the user
to fill in one and only one selection from a series of
responses:
Sex:
<INPUT TYPE="radio" NAME="sex" VALUE="male">Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">Female
Interest:
<INPUT TYPE="checkbox" NAME="badminton">Badminton
<INPUT TYPE="checkbox" NAME="swimming">Swimming
<INPUT TYPE="checkbox" NAME="reading">Reading
<INPUT TYPE="checkbox" NAME="cycling">Cycling
< INPUT TYPE="Submit" NAME="submit" VALUE="Send Form">
<INPUT TYPE="Reset" NAME="reset" VALUE="Clear Form">
<INPUT TYPE="Button" NAME="button" VALUE="Normal Button">
</FORM>


Web Pages created by Edu.Net
Feedback to Webmaster
webmaster@sabah.edu.my