iTech College - Internet Technology, Online Education, E-Learning, Technician Training, Tech Tutorials, Distance Education, Virtual Learning HTML Course: Form - www.itechcollege.com HTML Course: Form - www.itechcollege.com
Online Degrees Scholarships & Fellowships Internships Student Financial Aid Study Abroad Itech Bookstore
Free Courses
HTML
JavaScript
CSS
ASP
PHP
JSP
ASP.NET
SQL
AJAX
FTP
XML
Career Center
Job List
Web Jobs
Student Jobs
Computer Jobs
Engineer Jobs
Developer Jobs
Job Search
Resume Writing
Job Interview
Salary Info


itech > courses > HTML > Form

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="input" NAME=name SIZE=##>

For example:

     E-mail:
            <INPUT TYPE="input" NAME="email" SIZE=26> 
     Your Name:
            <INPUT TYPE="input" NAME="name" SIZE=26>
     Subject:
            <INPUT TYPE="input" 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 SELECTED >16-21
     <OPTION>22-30
     <OPTION>31-45
     <OPTION>46-65
     <OPTION>66-80
     <OPTION>81-up
     </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 VALUE="16-21">16-21
     <OPTION VALUE="22-30">22-30
     <OPTION VALUE="31-45">31-45
     <OPTION VALUE="46-65">46-65
     <OPTION VALUE="66-80">66-80
     <OPTION VALUE="81-up">81-up
     </SELECT>

The result is:

     How old are you? 
     

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 that one)
     <SELECT NAME="reading" MULTIPLE size="3">reading
     <OPTION VALUE="sports">sports
     <OPTION VALUE="travelling">travelling
     <OPTION VALUE="music">music
     <OPTION VALUE="cooking">cooking
     <OPTION VALUE="shopping">shopping
     <OPTION VALUE="talking">talking
     </SELECT><P>

The point is "multiple".

  Back to Index Page
Next Page >>   Basic Tags
Character Paragraph and Position
Character Style
Lists
Links
Image
Color
Table
Form
Frame
 

HTML Books
HTML Jobs



Bookmark:  del.icio.us digg facebook Reddit Mixx BlinkList Fark Furl NewsVine Simpy Spurl Segnalo Technorati blogmarks Google YahooMyWeb Windows Live



HTML Course: Form - www.itechcollege.com
Copyright ©2008, itechcollege.com. All rights reserved
iTechCollege | About iTech | Contact iTech