By Stephen Bucaro
A form is an html element that allows users to enter information that can be used
by the web designer to perform some local reconfiguration, or the information can
be sent to the web server for processing. A form has five parts:
1. The form tags. These consist of an opening tag <form> and a
closing tag <form>. All the forms elements are contained between these two tags.
2. Tags for the form's controls. A form usually contains several input elements
where the user can enter their data, make selections, or execute the form. These may
be text boxes, check boxes, radio buttons, a submit button, and any number of other controls.
3. The method by which the form's data will be submitted. This can be either by
the post method, where the forms information is sent in HTTP format
to the server, or the get method, where the information is sent in a query string
attached to the URL. This configuration is defined by the method attribute of
the form tag as shown below.
4. The name of, and path to, the script or program on the web server that will
handle the form's data when the user submits the form. This configuration is defined
by the action attribute of the form tag as shown below.
<form method="post" action="scriptname"
5. The form's name. Each form on a webpage needs a name to identify it from
other forms on the webpage. Each input control in the form should also have a name.
These names are used to identify the data that is sent to the server. This configuration
is defined by the name attribute of the form tag as shown below.
<form method="post" action="scriptname" name="myform">
If you do not give a form a name, it will be identified by its order in the forms[n]
collection, which is a document object array of the forms on the webpage, starting
with forms. If you do give an input control a name, it will be identified by its
order in the forms[n].elements[n] collection, which is a document object array of the
elements in the form.
can use their id attribute to give them a unique id. But each id must be
unique within a page.
The Text Element
When you design a form, the html code for the entire form is placed between the
<form> and </form> tags. Inside those tags, you might place a form
"element"; for example, a text box. A text box is coded with the html
<input type="text"> tag. Shown below is the html code for a text box
Name: <input type="text">
Below is shown how a text element would appear on a web page.
The text element can contain several other attributes. The most commonly used
are size, maxlength, and value. The size attribute is the
number of characters wide the text box should be. The maxlength attribute defines
the maximum number of characters the user is allowed to enter into the text box. The
value attribute is default text that is displayed in the text box. Below is an
example of the use of these attributes.
<input type="text" name="name" size="50" maxlength="64" value="default text">
The Submit Button Element
A form usually contains a Submit button input element. A Submit button
is coded with the html <input type="submit"> tag. Shown below is the html code
for a Submit button input element.
<form method="get" action="program.asp">
Name: <input type="text">
Below is shown how a Submit button would appear on a web page.
When the user clicks on the [Submit] button the form is submitted to the server,
where the program in the the action element is executed. That program handles
the data that the user entered into the form's input elements.
Name: <input type="text" name="name" onkeypress="return event.keyCode!=13"><br /">
<input type="Submit" onclick="showForm(this.form)">
The code shown above is a slight modification of the previous code. The form's onSubmit
event handler has code that prevents the form from being submitted to the server. This is to
text input tag, an onkeypress event handler prevent the form from being submitted
if the user clicks the keyboard [Return] key after entering their name in the text box.
The Submit button's onclick event handler calls a function named showForm
showForm function (which should be placed in the head section of the webpage) uses an
alert message box to display the contents of the form's text box.