How to create Form using html

Form

Forms allow the user to enter information. For example, you can use forms to collect user's names and email addresses. Forms begin with the tag <FORM> and end with </FORM>.

     <FORM ACTION="path/script.pl" METHOD="">
     ......
     </FORM>

Two attributes you should type for your form are the Form Action and Method.:

     <FORM ACTION="http://www.abc.com/login.asp"
                METHOD="post">

Input

You can use "input" for single line information:

     <INPUT TYPE="text" NAME=name SIZE=##>

For example:

     E-mail:
            <INPUT TYPE="text" NAME="email" SIZE=26> 
     Your Name:
            <INPUT TYPE="text" NAME="name" SIZE=26>
     Subject:
            <INPUT TYPE="text" NAME="subject" SIZE=26>

Here is what the result shows:

          E-mail:    
          Your Name: 
          Subject:   

The value of size is in characters, so "SIZE=26" means the width of the input box is 26 characters.

Text Area

Text Area can be as big as you'd like. Text Area begins with <TEXTAREA NAME=name ROWS=## COLS=##>and end with </TEXTAREA>. For example:

     <TEXTAREA Rows=2 Cols=25 NAME="comments">
                                  </TEXTAREA>

The result is:

Radio Button

You can use radio buttons to ask a question with one answer. For example, if you wanted to ask "Which picture do you like?" and you wanted to have the choices "monky", "flower", "girl", "building", you would type:

     <INPUT TYPE="radio" NAME="picture" 
            VALUE="monky" checked>Monky<P>
     <INPUT TYPE="radio" NAME="picture" 
            VALUE="flower">Flower<P>
     <INPUT TYPE="radio" NAME="picture" 
            VALUE="girl">Girl<P>
     <INPUT TYPE="radio" NAME="picture" 
            VALUE="building">Building<P>

The Result is:

      Monky
      Flower
      Girl
      Building

Check Box

Checkboxes let the user check things from a list. The form is:

     <INPUT TYPE="checkbox" NAME="name" VALUE="text">

Notice that the difference between check boxes and radio buttons is that any number of check boxes can be checked at one time while only one radio button can be checked at a time. For example, if you wanted to ask "Which picture do you like?" and you allow any number of check boxes can be checked at one time, you would type:

     <INPUT TYPE="checkbox" NAME="picture" 
                         VALUE="monky">Monky<P>
     <INPUT TYPE="checkbox" NAME="picture" 
                         VALUE="flower">Flower<P>
     <INPUT TYPE="checkbox" NAME="picture" 
                         VALUE="girl">Girl<P>
     <INPUT TYPE="checkbox" NAME="picture" 
                         VALUE="building">Building<P>

The result is:

     Which picture do you like?
      Monky
      Flower
      Girl
      Building

Submit and Reset

Other button types include submit and reset. "submit" is the button the user presses to send in the form. "reset" clears the entire form so the user can start over. For example:

     <INPUT TYPE="submit" NAME="submit" VALUE="Send">
     <INPUT TYPE="reset" NAME="reset" VALUE="Clear">

The result is:

Password

This type allows users to type in text but instead of displaying the text that they type astericks are displayed instead:

     <INPUT TYPE="password" NAME="pass" SIZE="20">

Pull-Down Menu

You can ask a question with only one answer is by using a pull-down menu. For example:

     How old are you? 
     <SELECT NAME="age">
     <OPTION>1-15</OPTION>
     <OPTION SELECTED >16-21</OPTION>
     <OPTION>22-30</OPTION>
     <OPTION>31-45</OPTION>
     <OPTION>46-65</OPTION>
     <OPTION>66-80</OPTION>
     <OPTION>81-up</OPTION>
     </SELECT>

The result is:

     How old are you? 
            

Scroll-Down Menu

Ther are two kinds of scroll-down menus. One is that you can only select one item:

     How old are you?
     <SELECT NAME="age" SIZE=5>
     <OPTION VALUE="1-15">1-15</OPTION>
     <OPTION VALUE="16-21">16-21</OPTION>
     <OPTION VALUE="22-30">22-30</OPTION>
     <OPTION VALUE="31-45">31-45</OPTION>
     <OPTION VALUE="46-65">46-65</OPTION>
     <OPTION VALUE="66-80">66-80</OPTION>
     <OPTION VALUE="81-up">81-up</OPTION>
     </SELECT>

The other menu is that you can select one or more items by holding down shift. For example:

     What is your favorite thing?
     (Hold <i>shift</i> to select more than one)
     <SELECT NAME="favorite" MULTIPLE size="5">
     <OPTION VALUE="reading">reading</OPTION>
     <OPTION VALUE="sports">sports</OPTION>
     <OPTION VALUE="travelling">travelling</OPTION>
     <OPTION VALUE="music">music</OPTION>
     <OPTION VALUE="cooking">cooking</OPTION>
     <OPTION VALUE="shopping">shopping</OPTION>
     <OPTION VALUE="talking">talking</OPTION>
     </SELECT>

Topics:

Basic Tags
Character paragraph and positions tags
Styles Tags
Lists Tags
Links Tags
Images Tags
Color
Table
Form
Frames