HTML: Form Tag




To contact us



[
HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]



To contact us

© 2002 - 2013 All Rights Reserved Total Application Works

    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/forms.html">
    Form Tags Introduction</a>
    </table>
    </body>
    </html>




  • Introduction
  • HTML Form Tag and its Attributes
  • Creating a more advanced address Form
  • Text Fields and Attributes
  • The <INPUT> Tag
  • Type = CHECKBOX
  • Type = RADIO
  • Type = PASSWORD
  • Type = HIDDEN
  • Type = SUBMIT
  • Type = RESET
  • Type = BUTTON
  • Type = FILE
  • Type = IMAGE
  • Creating Pop-Up and Scrolling Menus
  • Using the <SELECT>; Tag
  • Allowing More than One Selection
  • Conclusions

    Introduction

    In this tutorial, we will explore how to create an HTML form. What is the purpose of a HTML Form? The HTML Form allows you to request information from users viewing your web page. They allow you via web pages to gather:

    • Information about users;
    • Process requests, and
    • Provide controls for nearly every use to an application you can think.
    By providing controls, or fields, forms can request a small amount of information, often a search query or username and password, or a large amount of information, perhaps shipping and billing information or a job application.

    Knowing how to build forms is necessary to acquire user input. Forms are the most popular way to make web pages interactive. The type of information that you can request from users, using the forms tags, are:

    • Choose from menus
    • Make choices from radio buttons
    • Click on checkboxes
    • Enter text information
    When you create a form on your HTML page, the content for the form is included between a <form> and a </form> tag. After which the entered information is submitted to a web server for processing.

    Requirements for a Basic Form Template

    What are the requirements for a Basic Form Template? In the following example, show:

    1. <Form> - the tag that starts the Form
    2. Method - the tag that indicates the method that will respond to this request
    3. Action - the tag that indicates the location where the above method is resides
    4. <Input...> - the tag that indicates the type of input field (see figure 3)
    5. <Select - is a container tag that allows the user to make a choice
    6. </Select - ends the select section
    7. <Textarea - allows the user to enter multiple lines of text
    8. </Textarea - ends the text area
    9. </Form> - the tag that ends the Form container
    For example, the basic form template might look like the example in the following table.

     
    <BODY>  
       ...
    
    <FORM METHOD="method that responds to the submitted request"
       ACTION="URL of the server where the above method resides">
    ...input data content... ...select data content... ...textarea data content... </FORM> ... ... </BODY>
    Figure 1: Basic Form


    When we consider using the <form> tag, we should note that we can place the <form> tag anywhere within the <body> and </body> tags of an HTML document, and all input tags, select tags, and textarea tags must be contained within FORM tags. In the following sections we will explore the FORM attributes with examples showing how to create a form.

    HTML Form Tag and its Attributes

    The following table shows the FORM tag and its attributes.

    Tag Attribute
         <FORM>     
    ACTION: URL of the server that will process the data/request found in this form.
    METHOD = GET | POST: this is the method that processes the data sent to the server for further processing.
    NAME: name of this form.
    ENCTYPE: Specifies the MIME (Internet mediatype). This indicates the format of the data submitted to the server.
    This is most often used with forms where there is a file-upload option.
    TARGET: determines where the results will be displayed - "_blank" | "_parent" | "_self" | "_top" | frame name
    onSubmit: method to run before the form is submitted
    onReset: method to run before the form is reset.
    Figure 2: Form tag and its attributes


    We will use the information from Figure 2 in building the forms in this tutorial. In the next section, will explore the INPUT tag.

    HTML Input Tag and its Attributes

    The following table shows the INPUT tag and its attributes. When we construct a HTML form, you will note that we often use an input field. The INPUT tag and its attributes are a very powerful tool in gathering information. We will illustrate the INPUT tag and its attributes in the following table.

    TAG Description
         INPUT     
    The type of control for this input tag field are: TYPE =
    • TEXT
    • CHECKBOX
    • RADIO
    • PASSWORD
    • HIDDEN
    • SUBMIT
    • RESET
    • BUTTON
    • FILE
    • IMAGE
    Other Attributes
    NAME: name of this form field/control (required except for submit or reset).
    VALUE: initial or only value of this field. The name and value are an associated field. For example, For a text or hidden widget, the default value; for a check box or radio button, the value to be submitted with the form; for Reset or Submit buttons, the label for the button itself.
    SIZE: the size, in characters, the text field should be
    MAXLENGTH: maximum number of characters that can be entered in the field.
    CHECKED: indicates this checkbox or radio button is checked.
    BORDER: border around image
    SRC: URL of image or source file.
    ALT: text to show if you don't show the picture
    LOWSRC a version of the picture that isn't such a big file
    WIDTH: width of image
    HEIGHT: height of image
    ALIGN: = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | CENTER | BOTTOM | ABSBOTTOM | BASELINE
    how text should flow around the picture
    VSPACE: vertical distance between the picture and the text
    HSPACE: horizontal distance between the picture and the text
    READONLY the value of this field cannot be changed
    DISABLED: don't let the user do anything with this field
    ACCESSKEY:
    TABINDEX: tab order
    LANGUAGE: = "JavaScript" | "JavaScript11" | "JSCRIPT" | "VBScript" | "VBS" | class="valuedesc">other language
    scripting language to use
    onClick: when the user clicks here
    onChange: when this field is changed
    onFocus: when this field gets the focus
    onBlur: when this field loses the focus
    onKeyPress: script to run when a key is pressed
    onKeyUp: script for when a key goes up while the field has the focus
    onKeyDown: script for when a key goes down while the field has the focus
    AUTOCOMPLETE = ON | OFF
    If the browser should use autocompletion for the field
    Figure 3: Input tag and Attributes


    When we look at the attributes associated with the FORM and INPUT tags, they illustrate the versatility and power of the FORM tag. The FORM is one of the most powerful tags in the HTML arsenal. In the following sections, we will explore the FORM tag in more detail.

    How to create a HTML Form

    In the next example, we will create a form that requests first and last name and the phone number. You may be asking, "How do we request information using a form?" In languages like Java or MS MFC, we use a text input field. In HTML, we will use an <INPUT> tag enclosed within a <FORM> tag.

    Requirements for Requesting Name Information

    Create a web page requesting name and phone number.

    <HTML>
    <BODY>
    <p>...
    ...
       
    <pre> <b> <font color=blue> 
    <FORM>
    <B>Enter your name and phone number below</B>
    First Name: <INPUT TYPE="TEXT" NAME="first" SIZE="30">
    Last Name: <INPUT TYPE="TEXT" NAME="last" SIZE="40">
    Your Phone: <INPUT TYPE="TEXT" NAME="phone" SIZE="12">
    </FORM>
    </font> </b> </pre>

    </BODY>
    </HTML>
    Figure 4: Form requesting name and phone number


    • <pre> - this tag starts the formatting of the following text
    • <b> - indicates that the font will printed in bold type
    • <font> - in this case it indicates that the type will be blue
    • <FORM> -
    • <INPUT TYPE> - indicates the type of field that will be displayed on the screen e.g., text
    • NAME - this is the variable name the user input will be stored in
    • SIZE= - this is the size of the input field
    • </FORM> - closes the form content
    • </font> - ends the font type specification
    • </pre> - ends the formatting text
    When displayed by a browser, Figure 4 it looks like:

       
    Enter your name and phone number below
    First Name: 
    Last Name:  
    Your Phone: 
    
      
    Figure 5: How Figure 4 looks in your browser


    Figures 4 and 5 show how to request information using the <FORM> and <INPUT> tags. In the next section, we explore creating a more advanced address form.

    Creating a more advanced address Form

       
    <pre> <b> <font color=blue>
    <FORM>
    <B>Enter your name and phone number below</B> 
    First Name: <INPUT TYPE="TEXT" NAME="first" SIZE="30"> 
    Last  Name: <INPUT TYPE="TEXT" NAME="last" SIZE="40"> 
    Your Phone: <INPUT TYPE="TEXT" NAME="phone" SIZE="12"> 
    <B>Enter your mailing address</B> 
    
    <hr>
    Address:    <INPUT TYPE="TEXT" NAME="address" SIZE="50"> 
    City:       <INPUT TYPE="TEXT" NAME="city" SIZE="25">
    State:      <INPUT TYPE="TEXT" NAME="state" SIZE="2">
    <hr>
    Zip code:   <INPUT TYPE="TEXT" NAME="zip" SIZE="10"> 
    <B>Enter your email address and fax number</B> 
    Email:      <INPUT TYPE="TEXT" NAME="email" SIZE="50"> 
    Fax:        <INPUT TYPE="TEXT" NAME="fax" SIZE="50"> 
    <hr> <BR><BR>
    <B>Enter your comments below</B>
    <TEXTAREA NAME="comments" ROWS="6" COLS="50">
    Dear TAW CEO,
    </TEXTAREA>
    
    </FORM>
    </font> </b> </pre>
      
    Figure 6: A more advanced address form


      
    
    Enter your name and phone number below First Name: Last Name: Your Phone: Enter your mailing address
    Address: City: State:
    Zip code:
    Enter your email address and fax number Email: Fax:


    Enter your comments below
    Figure 7: When Figure 6 is Displayed by a Browser


    In Figures 6 and 7, we show the <TEXTAREA> tag. It is used for multiple-line text input areas. We will describe it in more detail in the next section.

    Text Fields and Attributes

    There are occasions when we need to allow the user to enter multiple lines of text. In those cases, we use the <TEXTAREA> tag. It takes the following form:

      
    <TEXTAREA NAME="variable_name" ROWS="number" COLS="number">
    
    
    default text ...
    </TEXTAREA>
    Figure 8: The textarea template

    The <TEXTAREA> is considered a container tag, since it creates a rectangle to contain the multiple lines of text on the web page. What's contained in the tag is the default text-so you can guide your users by letting them know what you'd like entered there. For instance:

    <b>Please enter comments about this site below.</b> <br> <br> <FORM>
    <TEXTAREA NAME="comments" ROWS="6" COLS="60">
    </TEXTAREA>
    </FORM>
    Figure 9: The textarea tag


    When displayed by your browser, Figure 9 looks like:

    Please enter comments about this site below.

    Figure 10: Textarea used for feedback


    In the Figure 9 example, the NAME attribute is a variable name for the string of text the user enters in the text area. This text string will be passed on to your processing method on the Web server. In the next section, we will take a closer look at the INPUT tag.

    The <INPUT> Tag

    In the section, HTML Input Tag and its Attributes, we introduced the <INPUT> tag. We showed that the <INPUT> tag has the following types:

    • TEXT
    • CHECKBOX
    • RADIO
    • PASSWORD
    • HIDDEN
    • SUBMIT
    • RESET
    • BUTTON
    • FILE
    • IMAGE
    We have previously described the TEXT type in previous sections. In the following table, we will briefly describe the other types.

    Type = CHECKBOX
      
    
    <form>
    <b>Type of computer(s) you own:</b>
    <INPUT TYPE="CHECKBOX" NAME="idc" CHECKED> Intel Dual Core
    <INPUT TYPE="CHECKBOX" NAME="amd"> AMD-Series PC
    <INPUT TYPE="CHECKBOX" NAME="mac"> Macintosh
    </form>
      
    Type of computer(s) you own:
    Intel Dual Core
    AMD-Series PC
    Macintosh
    Type = RADIO
      
    
    <form>
    <b>Type of computer(s) you own:</b>
    <INPUT TYPE="RADIO" NAME="idc" CHECKED> Intel Dual Core
    <INPUT TYPE="RADIO" NAME="amd"> AMD-Series PC
    <INPUT TYPE="RADIO" NAME="mac"> Macintosh
    </form>
      
    Type of computer(s) you own:
    Intel Dual Core
    AMD-Series PC
    Macintosh
    Type = PASSWORD
    <form>
    Enter Password:
    <INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25">
    </form>
    Enter Password:
    Type = HIDDEN
    is designed to pass some sort of value along to the Web server and script/method.
      
    <form>
    <b>Type of computer(s) you own:</b>
    
    <INPUT TYPE="HIDDEN" NAME="idc" HIDDEN> Intel Dual Core
    </form>
      
    Type of computer(s) you own:
    Intel Dual Core
    Type = SUBMIT
    automatically submits the data that's been entered into the HTML form
      
    <form  ACTION="MyServer">
    <b>Type of computer(s) you want:</b>
    <INPUT TYPE="RADIO" NAME="idc" CHECKED> Intel Dual Core
    <INPUT TYPE="RADIO" NAME="amd"> AMD-Series PC
    <INPUT TYPE="RADIO" NAME="mac"> Macintosh
    <br><br>
    
    <INPUT TYPE="SUBMIT" NAME="send"> 
    </form>
      
      
    
    Type of computer(s) you want: Intel Dual Core AMD-Series PC Macintosh

    Type = RESET

    1. creates a push button (named with the VALUE string) that resets all of the elements in that particular FORM to their default values
    2. erases anything that the user has entered on the form
      
    <form>
    <b>Type of computer(s) you own:</b>
    <INPUT TYPE="RESET" NAME="idc" CHECKED> Intel Dual Core
    </form>
      
    Type of computer(s) you own:
    Intel Dual Core
    Type = BUTTON

    BUTTON defines a button which causes a script to run. Use the onClick attribute to give the script command(s). BUTTON is used only with scripting and is not intended to send information to a server/method.
      
    <form  ACTION="MyServer">
    <b>Type of computer(s) you want:</b>
    <INPUT TYPE="BUTTON" NAME="idc" CHECKED> Intel Dual Core
    <INPUT TYPE="BUTTON" NAME="amd"> AMD-Series PC
    <INPUT TYPE="BUTTON" NAME="mac"> Macintosh
    <br><br>
    <INPUT TYPE="BUTTON"  TYPE=bCalc 
                    OnClick="Circle_calc(this.form);" 
                    VALUE="calculate"> 
    </form>
      
    Type of computer(s) you own:
    Intel Dual Core
    AMD-Series PC
    Macintosh

    Calculate
    Figure 11: Other Types


    Creating Pop-Up and Scrolling Menus

    The last type of input that we will describe is the <SELECT> tag, which can be used to create different types of pop-up and scrolling menus. This tag is designed specifically for allowing users to make a choice from a list of options. The <SELECT> tag requires a NAME attribute and allows you to decide how many options to display at once with the SIZE attribute. In the next section, we will describe how to use the <SELECT> tag.

    Using the <SELECT> Tag

    The <SELECT> is a container tag. Options are placed between the <SELECT> and </SELECT> tags, each with a particular VALUE that gets associated with <SELECT>'s NAME attribute when chosen. The following is the basic format:

      
    <SELECT NAME="variable">
    
    
    <OPTION SELECTED VALUE="value"> Menu text <OPTION VALUE="value"> Menu text ... </SELECT>
    Figure 12: Basic Select Tag


    The value that will be the default in the menu-listing window is determined by using the attribute SELECTED. The value is what will be passed to the Web server and its associated script/method for processing. An example might look like:

    Form Tags using Select Browser: Form Tags using Select
      
    Choose your favorite credit card: 
    <SELECT NAME="credit"> 
    
    <OPTION SELECTED VALUE="mast"> MasterCard 
    
    <OPTION VALUE="visa"> Visa 
    <OPTION VALUE="disc"> Discover
    <OPTION VALUE="amex"> American Express 
    
    </SELECT>
    <br><br>
    <INPUT TYPE="SUBMIT" NAME="send"> 
    
       
      
    Choose your favorite credit card: 
    
    

    Figure 13: Showing/Displaying Select Tag


    To control the number of entries that are displayed, use the SIZE attribute. This way you can display from one to the entire menu.

    Form Tags using Select Browser: Form Tags using Select
      
    Choose your favorite credit card: 
    <SELECT NAME="credit" size=4> 
    
    <OPTION SELECTED VALUE="mast"> MasterCard 
    <OPTION VALUE="visa"> Visa 
    
    <OPTION VALUE="disc"> Discover
    <OPTION VALUE="amex"> American Express 
    
    </SELECT>
    <br><br>
    <INPUT TYPE="SUBMIT" NAME="send"> 
       
      
    Choose your favorite credit card: 
    
    

    Figure 14: Showing/Displaying Select Tag with Size attribute


    by simply changing the first line of the example to the following:

      
    
    <SELECT NAME="credit" SIZE="4">
      

    In the Figure 13 example, selecting the menu item with the mouse causes the menu to pop-up on the page. The user can then select from the choices. In the Figure 14 example, it's necessary to click the desired item. If you need to allow the user make multiple choices, you will see a multiple-choice example in the following section.

    Allowing More than One Selection

    If you want to allow the user to select more than one option from the menu, then One more attribute for the <SELECT> by using the MULTIPLE attribute forces the entire menu to be displayed, regardless of the SIZE attribute. An example

    Form Tags using Select and Multiple Browser: Form Tags using Select
     
    What model car does your family own  
    (select as many as apply)? 
    <SELECT NAME="cars" MULTIPLE>;  
    
    <OPTION VALUE="cad"> Cadillac  
    
    <OPTION VALUE="ford"> Ford 
    <OPTION VALUE="hond"> Honda 
    <OPTION VALUE="linc"> Lincoln 
    <OPTION VALUE="mazda">   Mazda
    <OPTION VALUE="nissan"> Nissan 
    <OPTION VALUE="toyota"> Toyota  
    
    <OPTION VALUE="volvo"> Volvo 
    </SELECT>
    <br><br>
    <INPUT TYPE="SUBMIT" NAME="send"> 
     
      
    What model car does your family own  
    (select as many as apply)? 
    
    

    Figure 15: Showing/Displaying Select Tag with MULTIPLE attribute

    Conclusions

    In this tutorial, we have described the following items:

    1. <Form> - the tag that starts the Form
    2. Method - the tag that indicates the method that will respond to this request
    3. Action - the tag that indicates the location where the above method is resides
    4. <Input...> - the tag that indicates the type of input field (see figure 3)
    5. <Select - is a container tag that allows the user to make a choice
    6. </Select - ends the select section
    7. <Textarea - allows the user to enter multiple lines of text
    8. </Textarea - ends the text area
    9. </Form> - the tag that ends the Form container
    Hopefully, the discussion has been useful.






  • HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


    To contact us

    © 2002 - 2013 All Rights Reserved Total Application Works