• To gather data or information from users.

 

The <FORM> and </FORM> tags define the area of a form in a Web page.

The general format of a form is as follows:

<FORM method="how_to_send" action="URL_of_script">

...form data...

</FORM>

The method attribute accepts either get or post as its value.

  • The get method simply appends any form data to the URL and sends it to the server for processing. It is easier to deal with, but is limited by the total amount of data that can be sent (about 1 Kilobytes, or 1,000 characters).
    e.g., <FORM method="get" action="/cgi-bin/process.pl">...form data...</FORM>
  • The post method is more popular because it allows for a greater amount of data to be sent. It is also more secure than the get method in sending data.
    e.g., <FORM method="post" action="/cgi-bin/process.pl">...form data...</FORM>

The action attribute simply locates the URL for the script file that will process the data from the form.

  • Most often, such scripts are stored in a directory called cgi-bin/ or bin/ located on the Web server.

 

The <TEXTAREA> and </TEXTAREA> tags define an area to accept multiple lines of text (e.g., feedback, or comments from users) in a form.

The general format to create a text area is as follows:

<TEXTAREA name="variable_name" rows=number cols=number>

...default_text...

</TEXTAREA>

The name attribute is a variable name for the string of text that will get passed on to the processing script on the Web server.

The rows and cols attributes determine the size of the textarea box.

An additional wrap attribute can also be added to determine how text wraps inside the textarea box. The wrap attribute may take three values:

  • OFF, which is the default value.
  • PHYSICAL, which forces the browser to include actual line breaks in the text when sending it to the Web server.
  • VIRTUAL, which makes the textarea box seem to offer line wrap, but actually sends a continuous stream of words to the Web server.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<P>Please take a moment to tell us your comments and suggestions about our Web site.<BR>
Your feedback will be highly appreciated.</P>
<FORM method="post" action="cgi-bin/process.pl">
<TEXTAREA name="feedback" rows=10 cols=60 wrap=virtual>
Enter your feedback here...
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Note that this form cannot be submitted yet.

 

The general format to create a single-line text box is as follows:

<INPUT type=text name="variable_name" size=no_of_char maxlength=max_no_of_char value="default_text">

For the <INPUT> tag,

  • when the type attribute is assigned text, a single-line text box is created;
  • the name attribute is a variable name to contain the text entered;
  • the size attribute determines the length of the text box (in number of characters);
  • the maxlength attribute determines the maximum number of characters that can be accepted;
  • the value attribute sets the default text for the text box.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<P>Please enter your user name below:</P>
<FORM method="post" action="cgi-bin/process.pl">
User name:
<INPUT type=text name="username" size=25 maxlength=50 value="Enter your E-mail here">
</FORM>
</BODY>
</HTML>

 

The general format of a single-line password box is very similar to that of a single-line text box.

<INPUT type=password name="variable_name" size=no_of_char maxlength=max_no_of_char>

When the type attribute of the <INPUT> tag is assigned password, the text box responds to typed characters by displaying bullet points to keep the actual characters from being read.

However, the entered text is still stored as normal text as typed by the user.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<P>Please enter your password below:</P>
<FORM method="post" action="cgi-bin/process.pl">
Password:
<INPUT type=password name="password" size=25 maxlength=8>
</FORM>
</BODY>
</HTML>

Note that only eight characters can be entered in the above example since maxlength is set to 8.

 

The general format to create a check box is as follows:

<INPUT type=checkbox name="variable_name">description_text

An additional checked attribute can also be added to make the check box selected by default.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<P>Which Web page authoring tool(s) are you using now?</P>
<FORM method="post" action="cgi-bin/process.pl">
<INPUT type=checkbox name="notepad" checked>Notepad<BR>
<INPUT type=checkbox name="dreamweaver" checked>Macromedia Dreamweaver<BR>
<INPUT type=checkbox name="frontpage">Microsoft FrontPage<BR>
<INPUT type=checkbox name="golive">Adobe GoLive<BR>
</FORM>
</BODY>
</HTML>

Note that the first two check boxes is checked by default.

 

The general format to create a radio button is as follows:

<INPUT type=radio name="variable_name" value="some_value">description_text

Similarly, an additional checked attribute can also be added to make the radio button selected by default.

However, it is important to note that the radio type is designed to accept only one response from among its options. It is required that the variable_name should be the same for all of the radio buttons in a group, and the value for each choice should be different.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<FORM method="post" action="cgi-bin/process.pl">
Sex:
<INPUT type=radio name="sex" value="male" checked>Male
<INPUT type=radio name="sex" value="female">Female<BR>
</FORM>
</BODY>
</HTML>

It is a common practice to check one of the radio buttons as default, in order to prevent users from skipping the entry altogether.

 

The purpose of a Reset Button is to clear all the entered data in the Web form.

The general format to create a Reset Button is as follows:

<INPUT type=reset value="description_text">

On the other hand, the purpose of a Submit Button is to submit the data that has been entered in the Web form.

The general format to create a Submit Button is as follows:

<INPUT type=submit value="description_text">

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<FORM method="post" action="cgi-bin/process.pl">
<INPUT type=reset value="Clear Form">
<INPUT type=submit value="Submit Form">
</FORM>
</BODY>
</HTML>

Note that the Submit Button does not actually work yet because there is no such process.pl file in the cgi-bin directory to process the form.

 

Hidden fields can be used to pass some sort of value (e.g., a keyword, a validation number) to the processing script so that the script knows it is being accessed by a valid Web page (or user).

The general format to create a hidden field is as follows:

<INPUT type=hidden name="variable_name" value="some_value">

However, it is important to note that a hidden field is not really that hidden or secure. A user can always view the source code of the HTML page by choosing Source from the View menu of the Web browser.

Anyway, on a large Web site, the hidden value might tell a multipurpose script that which form, for instance, is sending the data.

 

A drop-down list box allows users to choose from a list of predefined choices.

The general format to create a drop-down list box is as follows:

<SELECT name="variable_name">

<OPTION value1="some_value">description_text

<OPTION value2="some_value">description_text

...more_options...

</SELECT>

The selected attribute can also be added to any of the <OPTION> tags to set it as the default choice.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
Your Class:
<SELECT name="class">
<OPTION value="form1" selected>Form 1
<OPTION value="form2">Form 2
<OPTION value="form3">Form 3
<OPTION value="form4">Form 4
<OPTION value="form5">Form 5
<OPTION value="form6">Form 6
<OPTION value="form7">Form 7
</SELECT>
</BODY>
</HTML>

 

A Scrolling List box also allows users to choose from a list of predefined choices.

The general format to create a scrolling list box is almost the same as that to create a drop-down list box.

<SELECT name="variable_name" size=elements_to_display>

<OPTION value1="some_value">description_text

<OPTION value2="some_value">description_text

...more_options...

</SELECT>

The most import difference is including the size attribute in the <SELECT> tag. Excluding the size attribute or setting the value of size to 1 will create a drop-down list box rather than a scrolling list box.

The selected attribute can also be added to any of the <OPTION> tags to set it as the default choice.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
Your Favorite Color:<BR>
<SELECT name="color" size="4">
<OPTION value="red" selected>Red
<OPTION value="yellow">Yellow
<OPTION value="blue">Blue
<OPTION value="white">White
<OPTION value="black">Black
<OPTION value="other">Other
</SELECT>
</BODY>
</HTML>

In addition, the multiple attribute allows users to select more than one option from the list box.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
Your Favorite Color(s):<BR>
<SELECT name="color" size="4" multiple>
<OPTION value="red" selected>Red
<OPTION value="yellow">Yellow
<OPTION value="blue">Blue
<OPTION value="white">White
<OPTION value="black">Black
<OPTION value="other">Other
</SELECT>
</BODY>
</HTML>

Note that you need to Control-click in order to select multiple options from the list box.

 

The following Web form has included all the form elements described in this page together.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<FORM method="post" action="cgi-bin/process.pl">
User name:
<INPUT type=text name="username" size=25 maxlength=50 value="Enter your E-mail here">
<P>Password:
<INPUT type=password name="password" size=25 maxlength=8></P>
<P>Sex:
<INPUT type=radio name="sex" value="male" CHECKED>Male
<INPUT type=radio name="sex" value="female">Female</P>
Your Class:
<SELECT name="class">
<OPTION value="form1" selected>Form 1
<OPTION value="form2">Form 2
<OPTION value="form3">Form 3
<OPTION value="form4">Form 4
<OPTION value="form5">Form 5
<OPTION value="form6">Form 6
<OPTION value="form7">Form 7
</SELECT>
<P>Your Favorite Color(s):<BR>
<SELECT name="color" size="4" multiple>
<OPTION value="red" selected>Red
<OPTION value="yellow">Yellow
<OPTION value="blue">Blue
<OPTION value="white">White
<OPTION value="black">Black
<OPTION value="other">Other
</SELECT></P>
<P>Which Web page authoring tool(s) are you using now?</P>
<INPUT type=checkbox name="notepad" checked>Notepad<BR>
<INPUT type=checkbox name="dreamweaver" checked>Macromedia Dreamweaver<BR>
<INPUT type=checkbox name="frontpage">Microsoft FrontPage<BR>
<INPUT type=checkbox name="golive">Adobe GoLive<BR>
<P>Please take a moment to tell us your comments and suggestions about our Web site.<BR>
Your feedback will be highly appreciated.</P>
<TEXTAREA name="feedback" rows=10 cols=60 wrap=virtual>
Enter your feedback here...
</TEXTAREA>
<INPUT type="hidden" name="teacher" value="wongsir">
<P><INPUT type=reset value="Clear Form">
<INPUT type=submit value="Submit Form"></P>
</FORM>
</BODY>
</HTML>