Chapter W7. Forms
 
Goals for this chapter: rpm packages covered in this chapter: 
  • netscape (netscape)
So far and yet so near
 -  a Chinese proverb

What is an HTML Form?

The World Wide Web opens different doors in business and communications.

An HTML page may present information, in a read-only mode, like we present in the previous chapters or also allow to interact with the user. These pages are called "forms" or HTML forms, like for example:

Inside these forms we can insert any "classical" input widget
 
<form method="post" action="" enctype="multipart/form-data">
<p><input type="submit" name="Submit" value="Submit">
<p><input type="text" name="textfield">
<p><input type="checkbox" name="checkbox" value="checkbox">
<p><input type="radio" name="radiobutton" value="radiobutton">
<p><select name="select"><option selected>One</option><option>Two</option></select>
<p><input type="file" name="file"><br></form>
<p><textarea name="textfield"></textarea><br></form>

Form elements

From the Appendix N: Netscape HTML Tag Reference in the FORM section we can find:
 

"INPUT

(input element in a form)

The INPUT tag defines a form element that can receive user input. The TYPE attribute determines the specific sort of form element to
be created. TYPE can be one of the following:
 
 

       BUTTON places a button on an HTML form. Use JavaScript code to make the button perform an action you define. See INPUT
       TYPE="BUTTON".
 

       CHECKBOX places a toggle switch on an HTML form, letting the user set a value on or off. See INPUT
       TYPE="CHECKBOX".
 

       FILE places an element on an HTML form letting the user supply a file as input. When the form is submitted, the content of the
       specified file is sent to the server along with the other form data. See INPUT TYPE="FILE". Navigator 2.0
 

       HIDDEN specifies an invisible text element. A hidden element is used for passing information to the server when a form is
       submitted. See INPUT TYPE="HIDDEN".
 

       IMAGE places an image, serving as a custom button, on an HTML form. When a user clicks an image element, the form is
       submitted to the server. See INPUT TYPE="IMAGE".
 

       PASSWORD places a text input field on an HTML form. Each character typed in the field is displayed as a character such as *
       or a black dot to conceal the actual value. See INPUT TYPE="PASSWORD".
 

       RADIO places a radio button on an HTML form. Radio buttons can be grouped into sets, and only one button per set can be
       selected at a time. See INPUT TYPE="RADIO".
 

       RESET places a reset button on an HTML form. When a user clicks a reset button, all elements in the form are reset to their
       default values. See INPUT TYPE="RESET".
 

       SUBMIT places a submit button on an HTML form. When a user presses a submit button, the form is submitted. See INPUT
       TYPE="SUBMIT".
 

       TEXT places a single line text input field on an HTML form. A text field lets the user enter text. See INPUT TYPE="TEXT".
 

In other words the same tag: INPUT, is used to radio button, for tex, for password input, for check buttons, to submit, to reset ... and any other input field.

All the tags that may be used for FORMS are the following: (This information was obtained from the Netscape Tag Guide - See Below).

            INPUT

This tag is used for input. You can use this tag and the combination: INPUT TYPE="INPUT_FORM_TYPE", where INPUT_FORM_TYPE may be:
            SELECT
This tag present a list, and is used in with OPTION. We includes here some examples:

MULTIPLE

       specifies that multiple items can be selected. If this attribute is omitted, only one item can be selected from the list. If
       multiple selection is enabled, the user usually needs to hold down the Shift key to select additional items.

NAME="selectName"

       specifies the name of the select element. This value is the name portion of the name/value pair sent to the invoked CGI
       program when the form is submitted. The name is not displayed on the form.

ONBLUR="blurJScode"

      specifies JavaScript code to execute when the select element loses focus. For information about JavaScript, see the
       JavaScript Guide or the JavaScript Reference..
             ONCHANGE="changeJScode"
      specifies JavaScript code to execute when the select element loses focus and its value has been modified.
            ONCLICK="JScode"
      specifies JavaScript code to execute when a user clicks an item in the list.
            ONFOCUS="focusJScode"
       specifies JavaScript code to execute when the element gets focus.
      SIZE="ListLength"
       specifies the number of options visible when the form is displayed. If the list contains more options than specified by size,
       the list is displayed with scrollbars.
            OPTION
VALUE="OptionValue"

       specifies a value that is returned to the server when the option is selected and the form is submitted. When no VALUE
       attribute is present, the value returned is the same as the text following the <OPTION> tag.

SELECTED

       specifies that the option is selected by default.

            TEXTAREA
COLS="columns"

       defines the width (number of characters per line) the text area can accommodate without scrolling.
 

NAME="name"

       specifies the name of the text area element. This value is the name portion of the name/value pair sent to the invoked CGI
       program when the form is submitted. The name is not displayed on the form.
 

ONBLUR="JScode"

       specifies JavaScript code to execute when the text area element loses focus. For information about JavaScript, see the
       JavaScript Guide or the JavaScript Reference..

            ONCHANGE="JScode"
       specifies JavaScript code to execute when the text area element loses focus and its value has been modified..

ONFOCUS="JScode

       specifies JavaScript code to execute when a text area element receives focus.

ONSELECT="JScode"

       specifies JavaScript code to execute when a user selects some of the text in the text area element.

             ROWS="rows"
       defines the number of lines (number of rows) the text area can accommodate without scrolling.

WRAP

 
       specifies whether lines longer than the text area's column width wrap to the next line. Navigator 2.0.

       The value of WRAP can be one of the following:

              OFF disables word wrap. Text the user types is displayed with the exact line breaks that the user types. If the
              user explicitly inserts a line break, however, the break is included as part of the text area's value. The user has to
              scroll horizontally to see the ends of lines that do not fit in the text area element.
              HARD causes word wrap, and the line breaks are included when the form is submitted. The text wraps inside the
              text area element, and that the user does not need to scroll horizontally.
              SOFT causes word wrap, but the line breaks are not included when the form is submitted.

            KEYGEN
The KEYGEN tag facilitates the generation of key material and submission of the public key as part of an HTML form.
            ISINDEX
The ISINDEX tag causes the web page to display a text entry field in which the user can type a string.


You can check the Appendix N: Netscape HTML Tag Reference for more details.

Developing some simple forms

In this section we will present some usefull examples.
 

Example 1: "Login and Password"

This first example presents a "classical"
 
 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.76 [en] (X11; U; Linux 2.4.3 i686) [Netscape]">
</head>
<body>
&nbsp;
<form method="post" action="" enctype="multipart/form-data">
Enter your login and password:
<br>  </br>
<br> <b>Login   : </b> <input type="text" name="textfield"> </br>
<br> <b>Password: </b> <INPUT TYPE="PASSWORD" MAXLENGTH="20" SIZE=20 ></br>
 

</form>
<br>
</body>
</html>
Enter your login and password:

Login : 
Password: 
Check the source on your browser: passwd.html

Some customers prefer the login window, instead of the login inside a window.

For example you may have:
 

... a simple window login to connect to login inside the remote server (FTP) ...         ... or you may have login access 

 

Example 2: "Order your pizza"

Now, we will create a Web page to "order a Pizza". Of course we suppose that the reader is a potential Webmaster that can develop Websites for Pizza
 
 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.76 [en] (X11; U; Linux 2.4.3 i686) [Netscape]">
</head>
<body text="#FFFFFF">
&nbsp;
<table BORDER COLS=1 WIDTH="100%" BGCOLOR="#CC0000" NOSAVE >
<tr NOSAVE>
<td NOSAVE>
<center><b><font size=+4>Choose your Pizza:&nbsp;</font></b></center>

<table BORDER COLS=2 WIDTH="100%" HEIGHT="281" BGCOLOR="#3333FF" NOSAVE >
<tr>
<td WIDTH="53%" HEIGHT="89"><form method="post" action="">
<ul><b><i><font face="Arial, Helvetica, sans-serif"><font size=+4>Select
a Size</font></font></i></b>
<p><input type="radio" name="radiobutton" value="radiobutton"><b><font color="#FFFFFF"><font size=+3>Small
(12")</font></font></b>
<br><input type="radio" name="radiobutton" value="radiobutton" checked><b><font color="#FFFFFF"><font size=+3>Medium
(16")</font></font></b>
<br><input type="radio" name="radiobutton" value="radiobutton"><b><font color="#FFFFFF"><font size=+3>Large
(20")&nbsp;</font></font></b>
<br><input type="radio" name="radiobutton" value="radiobutton"><b><font color="#FFFFFF"><font size=+3>X-Large
(24")</font></font></b>
<br>&nbsp;</ul>
</form></td>

<td WIDTH="45%" HEIGHT="89">
<center><form method="post" action="">
<p><b><font size=+4>Toppings Menu</font></b></center>

<p><br>
<center><table BORDER WIDTH="100%" HEIGHT="67" >
<tr>
<td VALIGN=TOP WIDTH="63%"><input type="checkbox" name="checkbox" value="checkbox">Deluxe
Combo
<p><input type="checkbox" name="checkbox2" value="checkbox">Veggie Combo
<br>&nbsp;
<br>&nbsp;
<p><input type="checkbox" name="checkbox3" value="checkbox">Pepperoni
<p><input type="checkbox" name="checkbox5" value="checkbox">Sausage
<p><input type="checkbox" name="checkbox4" value="checkbox">Salami
<p><input type="checkbox" name="checkbox6" value="checkbox">Anchovies
<br>&nbsp;
<br>&nbsp;
<p>&nbsp;</td>

<td VALIGN=TOP WIDTH="37%"><input type="checkbox" name="checkbox7" value="checkbox">Mushrooms
<p><input type="checkbox" name="checkbox22" value="checkbox">Peppers
<p><input type="checkbox" name="checkbox32" value="checkbox">Olives
<p><input type="checkbox" name="checkbox52" value="checkbox">Garlic
<p><input type="checkbox" name="checkbox42" value="checkbox">Tomatoes
<p><input type="checkbox" name="checkbox62" value="checkbox">Ex Cheese</td>
</tr>
</table></center>

<center>
<p></form></center>
</td>
</tr>

<tr>
<td WIDTH="53%"><form method="post" action="">
<blockquote><b><i><font face="Arial, Helvetica, sans-serif"><font size=+4>Select
a Style</font></font></i></b>
<p><input type="radio" name="radiobutton" value="radiobutton"><b><font size=+3>Regular
Crust</font></b>
<br><input type="radio" name="radiobutton" value="radiobutton" checked><b><font size=+3>Thin
&amp; Crispy</font></b>
<br><input type="radio" name="radiobutton" value="radiobutton"><b><font size=+3>Deep
Dish</font></b>
<br>&nbsp;</blockquote>
</form></td>

<td WIDTH="45%">
<center><img SRC="pizza.jpg" height=73 width=128></center>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
Choose your Pizza: 
    Select a Size

    Small (12")
    Medium (16")
    Large (20") 
    X-Large (24")
     

Toppings Menu


Deluxe Combo

Veggie Combo
 
 

Pepperoni

Sausage

Salami

Anchovies
 
 

 

 Mushrooms

Peppers

Olives

Garlic

Tomatoes

Ex Cheese

Select a Style

Regular Crust
Thin & Crispy
Deep Dish
 
Check the source on your browser: orderpizza.html

 
 
 

Example 3: Customer Data

This example
 
 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.76 [en] (X11; U; Linux 2.4.3 i686) [Netscape]">
   <title>ISP Signup Form</title>
</head>
<body text="#FFFFFF" bgcolor="#3333FF" link="#0000EF" vlink="#52188C" alink="#FF0000">
<form ACTION="/fcgi/signup.cgi" METHOD=POST><input TYPE="hidden" NAME="action" VALUE="process"><font color="#FFFFFF">Contact
Information</font>
<table BORDER=0 CELLSPACING=0 WIDTH="100%" BGCOLOR="#000066" NOSAVE >
<tr NOSAVE>
<th ALIGN=RIGHT><font color="#FFFFFF">*Contact name</font>
<br><font color="#FFFFFF">(last, first)</font></th>

<td COLSPAN="3" NOSAVE><input TYPE="text" NAME="last" VALUE=""><font color="#FFFFFF">,&nbsp;</font><input TYPE="text" NAME="first" VALUE=""></td>

<td><!--
  <TD ALIGN="right">SS#</TD>
  <TD><INPUT TYPE="text" NAME="ss" SIZE=11 VALUE=""></TD>
  --></td>

<td COLSPAN="2"><font color="#FFFFFF">&nbsp;</font></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Company</font></td>

<td COLSPAN="5"><input TYPE="text" NAME="company" SIZE=70 VALUE=""></td>
</tr>

<tr>
<th ALIGN=RIGHT><font color="#FFFFFF">*Address</font></th>

<td COLSPAN="5"><input TYPE="text" NAME="address1" SIZE=70 VALUE=""></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">&nbsp;</font></td>

<td COLSPAN="5"><input TYPE="text" NAME="address2" SIZE=70 VALUE=""></td>
</tr>

<tr NOSAVE>
<th ALIGN=RIGHT><font color="#FFFFFF">*City</font></th>

<td><input TYPE="text" NAME="city" VALUE=""></td>

<th ALIGN=RIGHT><font color="#FFFFFF">*State</font></th>

<td NOWRAP NOSAVE><select name="state" ><option value="" SELECTED><option value="AK"><font color="#FFFFFF">Alaska<option value="AL">Alabama<option value="AR">Arkansas<option value="AZ">Arizona<option value="CA">California<option value="CO">Colorado<option value="CT">Connecticut<option value="DC">District
of Columbia<option value="DE">Delaware<option value="FL">Florida<option value="GA">Georgia<option value="HI">Hawaii<option value="IA">Iowa<option value="ID">Idaho<option value="IL">Illinois<option value="IN">Indiana<option value="KS">Kansas<option value="KY">Kentucky<option value="LA">Louisiana<option value="MA">Massachusetts<option value="MD">Maryland<option value="ME">Maine<option value="MI">Michigan<option value="MN">Minnesota<option value="MO">Missouri<option value="MS">Mississippi<option value="MT">Montana<option value="NC">North
Carolina<option value="ND">North Dakota<option value="NE">Nebraska<option value="NH">New
Hampshire<option value="NJ">New Jersey<option value="NM">New Mexico<option value="NV">Nevada<option value="NY">New
York<option value="OH">Ohio<option value="OK">Oklahoma<option value="OR">Oregon<option value="PA">Pennsylvania<option value="PR">Puerto
Rico<option value="RI">Rhode Island<option value="SC">South Carolina<option value="SD">South
Dakota<option value="TN">Tennessee<option value="TX">Texas<option value="UT">Utah<option value="VA">Virginia<option value="VT">Vermont<option value="WA">Washington<option value="WI">Wisconsin<option value="WV">West
Virginia<option value="WY">Wyoming&nbsp;</font></select></td>

<th><font color="#FFFFFF">*Zip</font></th>

<td ALIGN=LEFT><input TYPE="text" NAME="zip" SIZE=10 VALUE=""></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Day Phone</font></td>

<td COLSPAN="5"><input TYPE="text" NAME="phone1" VALUE="" SIZE=18></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Night Phone</font></td>

<td COLSPAN="5"><input TYPE="text" NAME="phone2" VALUE="" SIZE=18></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Fax</font></td>

<td COLSPAN="5"><input TYPE="text" NAME="fax" VALUE="" SIZE=12></td>
</tr>
</table>
<font color="#FFFFFF">*required fields</font><font color="#FFFFFF"></font>
<p><font color="#FFFFFF">Billing information</font>
<table BORDER=0 CELLSPACING=0 WIDTH="100%" BGCOLOR="#000066" NOSAVE >
<caption><!--
<TR><TD>
<INPUT TYPE="checkbox" NAME="invoicing_list_POST" VALUE="POST" CHECKED>Postal mail invoice</TD></TR><TR><TD>Email invoice <INPUT TYPE="text" NAME="invoicing_list" VALUE=""></TD></TR><TR><TD>Billing type</TD></TR></TABLE>
-->
<table BORDER=0 WIDTH="100%" BGCOLOR="#000066" NOSAVE >
<tr NOSAVE>
<td VALIGN=TOP NOSAVE><!--
<INPUT TYPE="radio" NAME="payby" VALUE="CARD"> Credit card<BR>
--><font color="#FFFFFF">*Credit
Card&nbsp;</font><input TYPE="text" NAME="cc_num" VALUE="" MAXLENGTH=19>
<br><font color="#FFFFFF">*Exp&nbsp;<select name="cc_month" ><option value="" SELECTED><option value="01">January<option value="02">February<option value="03">March<option value="04">April<option value="05">May<option value="06">June<option value="07">July<option value="08">August<option value="09">September<option value="10">October<option value="11">November<option value="12">December&nbsp;</select><select name="cc_year" ><option value="" SELECTED><option value="2001">2001<option value="2002">2002<option value="2003">2003<option value="2004">2004<option value="2005">2005<option value="2006">2006<option value="2007">2007<option value="2008">2008<option value="2009">2009<option value="2010">2010&nbsp;</font></select>
<br><font color="#FFFFFF">*Name on card</font>
<br><input TYPE="text" NAME="cc_name" VALUE=""></td>

<td><!--
<TD VALIGN=TOP><INPUT TYPE="radio" NAME="payby" VALUE="PREPAY"> Prepaid card<BR><font color="blue">*</font><INPUT TYPE="text" NAME="PREPAY_payinfo" VALUE="" MAXLENGTH=80></TD>
--></td>
</tr>
</table>
<font color="#FFFFFF"></font>
<p><font color="#FFFFFF">*required fields for each billing type</font><font color="#FFFFFF"></font>
<p><font color="#FFFFFF">First package</font>
<table BORDER=0 CELLSPACING=0 WIDTH="100%" BGCOLOR="#000066" NOSAVE >
<caption><!--
<TR>
  <TD ALIGN="right">POP</TD>
  <TD></TD>
</TR>
--></caption>

<tr NOSAVE>
<td COLSPAN="2" NOSAVE><select name="pkg" ><option value="" SELECTED><option value="1"><font color="#FFFFFF">Dialup
Account<option value="2">Annual Pre-Paid Dialup Account&nbsp;</font></select></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Username</font></td>

<td><input TYPE="text" NAME="username" VALUE=""></td>
</tr>

<tr>
<td ALIGN=RIGHT><font color="#FFFFFF">Password</font></td>

<td><input TYPE="text" NAME="_password" VALUE=""></td>
</tr>
</table>
<font color="#FFFFFF"></font>
<br><font color="#FFFFFF"></font>&nbsp;<font color="#FFFFFF"></font>
<p><input TYPE="submit" VALUE="Signup"><input TYPE="reset" VALUE="Reset"></form></caption>

<tr NOSAVE>
<td NOSAVE><font color="#FFFFFF"></font></td>
</tr>
</table>
<font color="#FFFFFF"></font>
</body>
 </html>

 t
Contact Information
*Contact name
(last, first)		 ,   
Company
*Address
 
*City *State *Zip
Day Phone
Night Phone
Fax
*required fields

Billing information
*Credit Card 
*Exp 
*Name on card

*required fields for each billing type

First package
Username
Password

 


 
 
 

 
Check the source on your browser: customer_data.html

 
 

Exercises

  1. Visit Amazon.com and check the Customer Data entries.
  2. Visit Oanda.com
  3. Create a form to enter credit card operations with five different credit cards
Tests
  1. What is an HTML form ?
  2. List three Form tags.
  3. What is the tag to create a form inside the HTML file ?
  4. What is the tag for INPUT Password ?
  5. Are there a tag for Text Area ?
  6. Is possible to open a form with some "CHECKED" buttons?
  7. Is possible to have forms with Multiple selection ?
  8. The "Submit" button is a Input button or its have its own tag ?
  9. Is possible to have a login window like "kdm" using forms ?
  10. Write a FORM to buy McDonald's hamburger

 

Read the answers to the exercises.
 

Check the Interactive Exam Cram WebMaster: Try the interactive cram ...

Internet Resources for this Chapter.