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
Free Courses
HTML
JavaScript
CSS
ASP
PHP
JSP
C++
ASP.NET
SQL
AJAX
FTP
XML

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="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 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 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>

The result is:

     What is your favorite thing? 
     (Hold <i>shift</i> to select more than one)
     

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


Online Education, Online Training for Your Job, Distance Education, E-learning Programs for Your Career!Online Colleges, Online Universities, E-learning & Distance Education for Your Career! Easy Job Training & Online Courses.


   Email A Friend  
 
Earn Online Degree
for Your Job
I found a job after I earned an online degree!
Online classes for finding a Job. Online College, Online University, Degrees, E-learning school, online certificate Earn your
online degree now!
Online Training
for Good Job
Why I work so hard but earn so little? Why I cannot find a high paying job?
Online training for a Good Jobs. Online Degree, E-learning school, online certificate Go to
online school now!

Copyright ©2024, itechcollege.com. All rights reserved
iTechCollege | About iTech | Contact iTech