FunctionX Tutorials Logo

HTML Forms

Overview of Forms

 

Introduction

 

A form is a particular type of HTML file that allows a visitor to provide values before submitting them to a server. Although most forms on the web are created in HTML, this language doesn't have an inherent mechanism to treat a form. It relies on other languages, mainly called scripts, to process its values. Nevertheless, most forms are created using HTML objects. Therefore, you use a combination of HTML and a script to effectively use a form.

A form is a group of controls that the user interacts with and sends the result to a specific file as designed by an application developer. To create an effective form, HTML provides various text-based and selection-based controls that can handle almost any scenario. Besides these, there are action controls that actually send signals to a script.

A form is the central control that manages the other controls. Although the controls can send their data to a script, a form can be used to collect the values typed or selected on the controls, gather them as if they constituted one control and make these values available to a validating file (the file is usually located on a (web) server). 

Form Creation

To create a form, you use the <form> tag. Because a form is a collection of controls and their values, the form must have an end tag that lets the browser know where the form closes. This is done with the </form> closing tag:

<FORM>

</FORM>

Everything between the <FORM> and the </FORM> tags belong to the form and is called the body of the form. Almost anything can go in the body of the form. You can design it using any HTML tag and make it as attractive as you wish.

Forms Properties

Although the <form> and the </form> tags are enough to create a form, such a form can hardly communicate with a script. One of the most important properties you should set for a form is its name. The name allows a script to refer to the form and it can be used by files on the server level. To set the name of a form, assign an appropriate string the Name attribute of the <form> tag.

To refer to a form in a script, type the document keyword, followed by a period (the period is an operator), followed by the name of the form. Suppose you create a form called CreditApplication. If you want to call it from a script, you would use:

document.CreditApplication

 

Most of the controls (which excludes just a few of them) are created using a special tag called input. To use the <input> tag, you must let the browser know what type of input control or object you want to create. The <input> tag uses an attribute called Type that allows you to specify the kind of control you want. This is done by assigning the name of the control type to the Type flag. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be using here. Therefore, you can just assign the name of the control to the Type attribute. In some circumstances, and based on HTML standards, you should assign the control type as a string.

Like the <br>, some <p>, and some <li> tags, the <input> tag doesn’t need to be closed.

Labels

In the world of graphical user interface (GUI) programming, a label is a static text that displays information to the reader. In GUI environments, there are two main types of labels. The first category is made of stand-alone text that the user reads and performs an action based on such text. Although heavily used in programming of all kinds, a label is not a window control. It is a static piece of text that the user cannot modify.

When programming Windows controls, a label is small piece of text that is positioned on top of, or on the left side of, another control. The label is used to indicate to the user what the other control is used for; this is because most of the other controls do not obviously explain their presence.

In HTML, there is no explicit way to add a label. It is simply text you create with any tag of your choice or that you include in a cell of a table:
 

Loan Evaluation
Prepared By:      
Principal:      
Interest Earned:   Future Value:  

Practical Learning: Creating Labels

 
  1. If you want to follows, start your text editor such as Notepad.
  2. In the empty file, type the following:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    <h2>Loan Evaluation</h2>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="123">Prepared By:</td>
        <td width="85">&nbsp;</td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Principal:</td>
        <td width="85">&nbsp;</td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Interest Earned:</td>
        <td width="85">&nbsp;</td>
        <td width="108">Future Value:</td>
        <td width="103">&nbsp;</td>
      </tr>
    </table>
    
    </body>
    
    </html>
    
  3. Save the file as loaneval.htm in a folder you can recognize
  4. To transform this file into a form, change it as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="123">Prepared By:</td>
        <td width="85">&nbsp;</td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Principal:</td>
        <td width="85">&nbsp;</td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Interest Earned:</td>
        <td width="85">&nbsp;</td>
        <td width="108">Future Value:</td>
        <td width="103">&nbsp;</td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  5. Preview the file in the browser
     
  6. After previewing the file, return to your text editor
 

Form Controls

 

A text box is a rectangular object that receives or displays text. By default, a text box is intended for the user to type text in response to a request.

Text Boxes

 

To create a text box, use the <input> tag. For a text box, specify the Type attribute as Text.

The minimum syntax for creating a text box is:

<input type=”text”>

Because HTML is not case sensitive, you can create the control in all uppercase, all lowercase, or a mix of both. Therefore, the control can also be created with:

<Input Type=”Text”>

or

<INPUT TYPE=”TEXT”>

 

Practical Learning: Creating Text Boxes

 
  1. To create some text boxes, change the file as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="123">Prepared By:</td>
        <td width="85"><input type="text" name="txtPreparedBy"></td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Principal:</td>
        <td width="85"><input type="text" name="txtPrincipal"></td>
        <td width="108">&nbsp;</td>
        <td width="103">&nbsp;</td>
      </tr>
      <tr>
        <td width="123">Interest Earned:</td>
        <td width="85"><input type="text" name="txtInterestEarned"></td>
        <td width="108">Future Value:</td>
        <td width="103"><input type="text" name="txtFutureValue"></td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save the file and preview it in the browser.
    After previewing the page, return to your text editor.

Password Text Boxes

 

HTML provides a specific text box designed for a form's password. This looks like a classic text box and is created the same way. The main difference is that the text that the user types doesn't display the characters that are being entered. As the user types in the password text box, text appears as a series of asterisks or periods.

Like the regular text box and many other controls, to create a password text box, use the <input> tag and specify the control type as Password assigned to the Type attribute.

Here is an example:

<input type="password">

The size of the password text box is controlled by the Size attribute of the <input> tag. To increase the width of the control, assign the desired numeric value to the Size attribute. Here is an example that creates a text box control:

<input type="password" size="25">

The text that is typed in the password text box is held by the Value attribute. You can use this attribute to find out what password the user typed.

If you plan to retrieve the password value in a script or code of any kind, give the control a name. This is done by assigning a name string to the Name attribute. Here is an example:

<input type="password" name="Guarded">

Combo Boxes

A combo box allows the user to select an item from a group, namely a list. A combo box has the same shape as a text box, except that it is equipped with an arrow on the right side of the control. This arrow control allows the user to display a list of items that are hidden by the text side of the combo box. When the list displays, the user selects one item from the list. Once the item has been selected, the list retracts back to its original text-like size.

To create a combo box, use a tag called select. This tag has to be closed. After typing the <select> tag, create each item that is part of the control using the <option> tag. Each item uses its own <option> tag. After listing the items, make sure you close the Select tag as </select>.

Here is an example:

<select>
  <option>Small
  <option>Medium
  <option>Large
  <option>X-Large
</select>

To select a default item from the combo box, use the selected attribute of the <options> tag. Here is an example:
 

<select>
  <option>Small
  <option selected="true">Medium
  <option>Large
  <option>X-Large
</select>

 

Practical Learning: Creating a Combo Box

 
  1. To create a combo box, change the code of the web page as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="176">Prepared By:</td>
        <td width="431"><input type="text" name="txtPreparedBy" size="20"></td>
      </tr>
      <tr>
        <td width="176">How did you hear about us?</td>
        <td width="431">
          <select size="1" name="Reference">
            <option selected>Don't remember</option>
            <option>Newspaper ad</option>
            <option>Somebody who used your service</option>
            <option>An employee of this company</option>
            <option>A banner on a web page</option>
            <option>Curiosity</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Principal:</td>
        <td width="431"><input type="text" name="txtPrincipal" size="20"></td>
      </tr>
      <tr>
        <td width="176">Interest Rate:</td>
        <td width="431"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
      </tr>
      <tr>
        <td width="176" valign="top">Periods:</td>
        <td width="431"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save and preview the page
     
  3. After viewing it, return to your text editor

List Boxes

Like a combo box, a list box displays a list of items that the user can select from. Unlike a combo box, a list box displays a taller list and can even display all of its items all the time.

Like a combo box, a list box is created using the <select> tag. Like the combo box, each item of a list box is created using the <option> tag. While the combo box control is more restrictive with its attributes, to make the control a list box, the <select> tag is equipped with an attribute called Size. This attribute accomplishes two purposes: its make the control become a list box and it sets the vertical size of the list box. In other words, it decides how many items the list box can display at a time.

Here is an example:

<select size="4">
  <option>Schwartz
  <option>Medou
  <option>Larson
  <option>Creans
  <option>Schultze
  <option>Greenberg
</select>

 

Practical Learning: Creating a List Box

 
  1. To create a list box, make changes on the source code of the page as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="176">Prepared By:</td>
        <td width="431"><input type="text" name="txtPreparedBy" size="20"></td>
      </tr>
      <tr>
        <td width="176">How did you hear about us?</td>
        <td width="431">
          <select size="1" name="Reference">
            <option selected>Don't remember</option>
            <option>Newspaper ad</option>
            <option>Somebody who used your service</option>
            <option>An employee of this company</option>
            <option>A banner on a web page</option>
            <option>Curiosity</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Type of Loan:</td>
        <td width="431">
          <select size="4" name="lstTypeOfLoan">
            <option selected>Personal</option>
            <option>Furniture</option>
            <option>Musical Instrument</option>
            <option>Boat</option>
            <option>Car</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Principal:</td>
        <td width="431"><input type="text" name="txtPrincipal" size="20"></td>
      </tr>
      <tr>
        <td width="176">Interest Rate:</td>
        <td width="431"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
      </tr>
      <tr>
        <td width="176" valign="top">Periods:</td>
        <td width="431"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save and preview the page in the browser
     
  3. After previewing, return to your text editor

Check Boxes

A check box is a small square box that allows the user to select an item or to deselect it. The user makes this decision by clicking in the small square box. By default, or depending on how the control is configured, the square box is white and empty. This indicates that it is false or off. When the user clicks it, a small check mark appears in the square box, indicating that is true or on. 

To create a check box, you can use the <input> tag and specify the control type as checkbox, CheckBox, or CHECKBOX. Here is an example:

<input type="checkbox">

A check box doesn't indicate what it is used for. Therefore, you should (always) add a label close to it to help the user figure it out.

Practical Learning: Creating a Check Box

 
  1. To create a check box, change the code as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="176">Prepared By:</td>
        <td width="431"><input type="text" name="txtPreparedBy" size="20"></td>
      </tr>
      <tr>
        <td width="176">How did you hear about us?</td>
        <td width="431">
          <select size="1" name="Reference">
            <option selected>Don't remember</option>
            <option>Newspaper ad</option>
            <option>Somebody who used your service</option>
            <option>An employee of this company</option>
            <option>A banner on a web page</option>
            <option>Curiosity</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Type of Loan:</td>
        <td width="431">
          <select size="4" name="lstTypeOfLoan">
            <option selected>Personal</option>
            <option>Furniture</option>
            <option>Musical Instrument</option>
            <option>Boat</option>
            <option>Car</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Principal:</td>
        <td width="431"><input type="text" name="txtPrincipal" size="20"></td>
      </tr>
      <tr>
        <td width="176">Interest Rate:</td>
        <td width="431"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
      </tr>
      <tr>
        <td width="176" valign="top">Periods:</td>
        <td width="431"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
      </tr>
      <tr>
        <td width="176" valign="top">Approved?</td>
        <td width="431">
          <input type="checkbox" name="chkApproved" value="ON">
        </td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save and preview it in the browser, then return to your text editor

Radio Buttons

A radio button is a small round and white circle that allows the user to select an item from a group; this is because a radio button is generally accompanied by others. From a group of items, represented each by a circle, when the user clicks one of the items, none of the others is selected. To change the selection, the user must click another choice in the group.

 
To create a radio button, use the <input> tag and specify the Type attribute as Radio. Here is an example:

<input type="radio">

To make your radio buttons effective, you should always provide at least two radio buttons in a group.

Practical Learning: Creating Radio Buttons

 
  1. Make the following changes to create a group of radio buttons
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="176">Prepared By:</td>
        <td width="431"><input type="text" name="txtPreparedBy" size="20"></td>
      </tr>
      <tr>
        <td width="176">How did you hear about us?</td>
        <td width="431">
          <select size="1" name="Reference">
            <option selected>Don't remember</option>
            <option>Newspaper ad</option>
            <option>Somebody who used your service</option>
            <option>An employee of this company</option>
            <option>A banner on a web page</option>
            <option>Curiosity</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Type of Loan:</td>
        <td width="431">
          <select size="4" name="lstTypeOfLoan">
            <option selected>Personal</option>
            <option>Furniture</option>
            <option>Musical Instrument</option>
            <option>Boat</option>
            <option>Car</option>
          </select></td>
      </tr>
      <tr>
        <td width="176">Principal:</td>
        <td width="431"><input type="text" name="txtPrincipal" size="20"></td>
      </tr>
      <tr>
        <td width="176">Interest Rate:</td>
        <td width="431"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
      </tr>
      <tr>
        <td width="176" valign="top">Periods:</td>
        <td width="431"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
      </tr>
      <tr>
        <td width="176" valign="top">Approved?</td>
        <td width="431">
          <input type="checkbox" name="chkApproved" value="ON">
        </td>
      </tr>
      <tr>
        <td width="200" valign="top">Compound Frequency:</td>
        <td width="421">
          <table border="0" width="120%">
            <tr>
              <td width="23%">Monthly</td>
              <td width="77%"><input type="radio" value="V1" checked name="R1"></td>
            </tr>
            <tr>
              <td width="23%">Quarterly</td>
              <td width="77%"><input type="radio" name="R1" value="V2"></td>
            </tr>
            <tr>
              <td width="23%">Semiannually</td>
              <td width="77%"><input type="radio" name="R1" value="V3"></td>
            </tr>
            <tr>
              <td width="23%">Annually</td>
              <td width="77%"><input type="radio" name="R1" value="V4"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save and preview the page
     
  3. Return to your text editor

The Text Area

 

A text area is a large control that is a substitute to handle a large paragraph where the text box cannot or should not be used. 

To create a text area, use the <TextArea> tag which must also be closed. Here is an example:

<textarea></textarea>

 

Practical Learning: Creating a Text Area Control

 
  1. To add a text area, change the file as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    
    <h2>Loan Evaluation</h2>
    
    <form>
    
    <table border="0" width="429" bordercolor="#808080">
      <tr>
        <td width="200">Prepared By:</td>
        <td width="431"><input type="text" name="txtPreparedBy" size="20"></td>
      </tr>
      <tr>
        <td width="200">How did you hear about us?</td>
        <td width="431">
          <select size="1" name="Reference">
            <option selected>Don't remember</option>
            <option>Newspaper ad</option>
            <option>Somebody who used your service</option>
            <option>An employee of this company</option>
            <option>A banner on a web page</option>
            <option>Curiosity</option>
          </select></td>
      </tr>
      <tr>
        <td width="200">Type of Loan:</td>
        <td width="431">
          <select size="4" name="lstTypeOfLoan">
            <option selected>Personal</option>
            <option>Furniture</option>
            <option>Musical Instrument</option>
            <option>Boat</option>
            <option>Car</option>
          </select></td>
      </tr>
      <tr>
        <td width="200">Principal:</td>
        <td width="431"><input type="text" name="txtPrincipal" size="20"></td>
      </tr>
      <tr>
        <td width="200">Interest Rate:</td>
        <td width="431"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
      </tr>
      <tr>
        <td width="200" valign="top">Periods:</td>
        <td width="431"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
      </tr>
      <tr>
        <td width="200" valign="top">Approved?</td>
        <td width="431">
          <input type="checkbox" name="chkApproved" value="ON">
        </td>
      </tr>
      <tr>
        <td width="200" valign="top">Compound Frequency:</td>
        <td width="421">
          <table border="0" width="120%">
            <tr>
              <td width="23%">Monthly</td>
              <td width="77%"><input type="radio" value="V1" checked name="R1"></td>
            </tr>
            <tr>
              <td width="23%">Quarterly</td>
              <td width="77%"><input type="radio" name="R1" value="V2"></td>
            </tr>
            <tr>
              <td width="23%">Semiannually</td>
              <td width="77%"><input type="radio" name="R1" value="V3"></td>
            </tr>
            <tr>
              <td width="23%">Annually</td>
              <td width="77%"><input type="radio" name="R1" value="V4"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td width="200">Interest Earned:</td>
        <td width="421"><input type="text" name="txtInterestEarned" size="20" value="$0.00"></td>
      </tr>
      <tr>
        <td width="200">Future Value:</td>
        <td width="421"><input type="text" name="txtFutureValue" size="20" value="$0.00"></td>
      </tr>
      <tr>
        <td width="200" valign="top">Comments:</td>
        <td width="421"><textarea rows="4" name="txtComments" cols="37"></textarea></td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
  2. Save and preview the file in your browser

Buttons

A button is a rectangular object that the user clicks, as indicated by an application developer. What happens when the user clicks a button depends on you.

To create a button, you can use the <input> tag and specify the type of control by assigning the Button value to the Type attribute. Here is an example:

<input type="button">

The most visual properties of a button are its location and the text it displays. There are various ways you can set the location of a button on the page. Although HTML provides paragraph tags that can position the button, one of the best options you have is to use a table when designing your form. This will also be valid for all controls we will learn on this site.

Practical Learning: Creating a Button

 
  1. To create a button, change the code as follows:
     
    <html>
    
    <head>
    <title>Loan Evaluation</title>
    </head>
    
    <body>
    <h2>Loan Evaluation</h2>
    
    <form method="POST" action="--WEBBOT-SELF--">
      <!--webbot bot="SaveResults" U-File="../../_private/form_results.txt"
      S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
    
    <table border="0" width="627">
              <tr>
                <td width="177">Prepared By:</td>
                <td width="444"><input type="text" name="txtPreparedBy" size="20"></td>
              </tr>
              <tr>
                <td width="177">How did you hear about us?</td>
                <td width="444"><select size="1" name="Reference">
                    <option selected>Don't remember</option>
                    <option>Newspaper ad</option>
                    <option>Somebody who used your service</option>
                    <option>An employee of this company</option>
                    <option>A banner on a web page</option>
                    <option>Curiosity</option>
                  </select></td>
              </tr>
              <tr>
                <td width="177">Type of Loan:</td>
                <td width="444"><select size="4" name="lstTypeOfLoan">
                    <option selected>Personal</option>
                    <option>Furniture</option>
                    <option>Musical Instrument</option>
                    <option>Boat</option>
                    <option>Car</option>
                  </select></td>
              </tr>
              <tr>
                <td width="177">Principal:</td>
                <td width="444"><input type="text" name="txtPrincipal" size="20"></td>
              </tr>
              <tr>
                <td width="177">Interest Rate:</td>
                <td width="444"><input type="text" name="txtInterestRate" size="12" value="7.55">&nbsp;%</td>
              </tr>
              <tr>
                <td width="177" valign="top">Periods:</td>
                <td width="444"><input type="text" name="txtPeriods" size="12">&nbsp;years</td>
              </tr>
              <tr>
                <td width="177" valign="top">Approved?</td>
                <td width="444">
                  <input type="checkbox" name="chkApproved" value="ON">
                </td>
              </tr>
              <tr>
                <td width="177" valign="top">Compound Frequency:</td>
                <td width="444">
                  <table border="0" width="120%">
                    <tr>
                      <td width="23%">Monthly</td>
                      <td width="77%"><input type="radio" value="V1" checked name="R1"></td>
                    </tr>
                    <tr>
                      <td width="23%">Quarterly</td>
                      <td width="77%"><input type="radio" name="R1" value="V2"></td>
                    </tr>
                    <tr>
                      <td width="23%">Semiannually</td>
                      <td width="77%"><input type="radio" name="R1" value="V3"></td>
                    </tr>
                    <tr>
                      <td width="23%">Annually</td>
                      <td width="77%"><input type="radio" name="R1" value="V4"></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td width="177">Interest Earned:</td>
                <td width="444"><input type="text" name="txtInterestEarned" size="20" value="$0.00"></td>
              </tr>
              <tr>
                <td width="177">Future Value:</td>
                <td width="444"><input type="text" name="txtFutureValue" size="20" value="$0.00"></td>
              </tr>
              <tr>
                <td width="177" valign="top">Comments:</td>
                <td width="444"><textarea rows="4" name="txtComments" cols="37"></textarea></td>
              </tr>
              <tr>
                <td width="177" valign="top" align="right"><input type="button" value="Calculate" name="btnCalculate"></td>
                <td width="444">&nbsp;<input type="reset" value="Reset" name="B2"></td>
              </tr>
            </table>
    </form>
    
    </body>
    
    </html>
  2. Save and preview the web page:



Home Copyright © 2004-2014 FunctionX, Inc.