Ultra fast cheap  linux and windows hosting
html tutorial HTML Tutorial:

  • Html - Introduction
  • Html - A basic html file
  • Html - Meta tags
  • Html - Text Control
  • Html - Color
  • Html - Lists
  • Html - Links
  • Html - Tables
  • Html - Forms
  • Html - frames
  • Html - Background music
  • HTML tag list
  • HTML Character Entities
  • Browse
    html tutorial
    Home >> Tutorials >> HTML Tutorials

    Html Forms:
     
    <FORM> & </FORM>tags Input types Select list
    Text area <Fieldset> &<Legend> Form Example

    <FORM> </FORM>
    A form is basically a structure of input elements, which is capable of delivering information using CGI scripts. Forms can be created using HTML Tags. <FORM></FORM> are the beginning and ending tags. It includes the following options:

    METHOD="POST/GET"
    ACTION="file/script"

    The METHOD Parameter determines how the data will be sent to the cgi program that will process the form. The possible methods are GET, or POST. The ACTION parameter is used to give the URL of the CGI program that
    will process the form. All forms actions must be processed by a CGI program.

    <form action= "mailto:name@hotmail.com" method=post>

    Top



    Input tags
    Using <INPUT> tag you can create text fields, hidden text fields, password fields, radio buttons,check boxes, Submit button and Reset button

     

    <INPUT TYPE="text/hidden/password/checkbox/radio/submit/reset"  SIZE="n" MAXLENGTH="x" NAME="name" VALUE="presettext">

    TYPE parameter identifies the type of input field. The various types are text,password,checkbox,radio,submit ,&   reset.
    name parameter provides a field name.

    size sets the width of the box in characters

    value sets the default text

    maxlength sets the maximum amount of characters allowed in the box

    (1) Text Field

    Text Entry Fields allow the User to enter text values. The complete tag is given below.

    <input type="text" name="recipient" size=30 value="" maxlength=50>

    name sets the name of the field in the form

    Eg: The following code has a field by name 'recipient'

    <form action="mailto:webgimmicks@yahoo.com" method="post">
    Enter your Name<input type="text" name="recipient" size=30 value="" maxlength=50>

    </form>

    (2) Password field

    If the TYPE is Password, then the text which is typed in appears as asterisks i.e.
    ***********. To use password text boxes set type to "password".

    Eg.
    <Form action="mailto:webgimmicks@yahoo.com" method="post">

    Enter the password <input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">

    </form>

    (3)Checkbox and radio box

    Checkbox appears as a square box in which we can the option of selecting more than one value whereas a radio button box is used when only one value can be selected from a list of values. The following is the full tag.

    <Input type="checkbox/radio" name="check" value="yes" checked>

    name sets the name that will appear in the e-mail
    value if the box is checked the value appears beside the name in the e-mail

    checked if this is set then the box will already be checked when it is loaded

    Eg.

    <Form action="mailto:webgimmicks@yahoo.com" method="post">
    Select your favorite place.<br>

     <input type="checkbox" name="place1" value="yes">Europe<Br>

     <input type="checkbox" name="place2" value="yes">Hawaii<Br>

     <input type="checkbox" name="place3" value="yes">Bahamas<Br>

    (This is a radio button.)<Br>

    Are u interested in a free round trip?<Br>

     Yes<input type="radio" name="petshow" value="yes" checked> or no<input type="radio" name="petshow" value="no"><Br>

    </form>

    (5) Submit button and Reset buttons

    Submit button:
    This also appears as a button. This button is associated with a form action. When pressed the information in the form is  processed by the form action which is specified in the <FORM> Tag.

    <Form action="mailto:webgimmicks@yahoo.com" method="post">

    If there is a URL of a CGI script set in the <FORM> tag then this button, when pressed tells the browser to load that URL.

    <Input type="submit" value="submit">
    value  parameter identifies the text that will appears on the button.

    Reset button:
    This appears as a button. When the button is pressed all of the entry fields in the form are cleared or returned to their default values.

    <Input type="reset" value="Clear ">

    value  parameter identifies the text that will appears on the button.

    Eg.

    <Form action="mailto:webgimmicks@yahoo.com" method="post">Enter your
    Name<input type="text" name="recipient" size=30 value="" maxlength=50>

    <Br>Enter the password<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">

    <Br>Select your favorite place.

    <Br><input type="checkbox" name="place1" value="yes">Europe

    <Br><input type="checkbox" name="place2" value="yes">Hawaii

    <Br><input type="checkbox" name="place3" value="yes">Bahamas

    <Br>(This is a radio button.)

    <Br>Are you interested in a free round trip?

    <Br>Yes<input type="radio" name="petshow" value="yes" checked> or no<input type="radio" name="petshow"

    value="no">

    <Br><input type="reset" value="Clear "><input type="submit" value="submit"></form>

    Top



    Scrolling list and drop down list

    Both types are created with the same code except for one difference. The drop down list does not specify the amount of choices there will be. If you want your select box to appear as a drop down box, don't include the "size=" attribute.The following are the tags and attributes.

    Scrolling list:

    <select name= "choose1" size=4 multiple>

    name assigns a name to the box
    size if set, the select box will be a scrolling box and it sets the number of options in the scrolling box

    multiple if set, the viewer will be able to choose more than one option by holding down "ctrl" key. While

    choosing, the box will always appear as a scrolling list.

    <option selected value="option1">NY

    value sets the name of the select box
    selected if set, this option will already be selected when the form is opened

    Eg.

    <Form action="mailto:webgimmicks@yahoo.com" method="post">
      <select name="select" size="3">

     <option selected value="option1">NY

     <option value="option2">NJ

     <option value="option3">NC

     </select>

    </form>

    Drop down list:
    Please note that there is no size attribute in a Drop down list in the <select name= >  tag.

    Eg:

    <form action="mailto:webgimmicks@yahoo.com" method="post">
    <select name="select">

     <option selected value="option1">Cat

     <option value="option2">Dog

     <option value="option3">Pig

     </select>

    </form>

    Top



    <textarea>

    <textarea> and </textarea> tags provide a larger space to enter comments or feedback etc. The following are the attributes of the <textarea> tag.
    Eg:

    <textarea name= areaname rows=r cols=c>

    name assigns a name to your text area
    rows sets the height of your area by the amount of rows of text will be visible at a time

    cols sets the width of your area in characters

    Eg:
    <textarea name= "comments" rows=4 cols=40>

    Top



    FIELDSET - Form Control Group

    You can group logically related form elements by <FIELDSET> . For example, If you have a long form in your web page and it contains a few fields about personal information, some fields asking about business information, and some fields about your qualifications. <FIELDSET> could be used to group those fields .The browser draws a box around the set of fields to indicate that they are related.

    Personal information

    Name:
    Address:

    Business

    Title:
    VAT NO:

    Qualification

    Qualification:
    Statement:



    LEGEND - Fieldset Caption- You can use the LEGEND element at the start of a FIELDSET. The LEGEND element defines a caption for the group.

    Try the following code:

    <table cellspacing="5">
    <tr>
    <td>
    <FIELDSET>
    <LEGEND>Personal information</LEGEND> Name:
    <INPUT TYPE=text NAME=name >
    <BR> Address:
    <INPUT TYPE=text NAME=address1 >
    </FIELDSET>
    </td>
    <td>
    <FIELDSET>
    <LEGEND >Business</LEGEND> Title:
    <INPUT TYPE=text NAME=title >
    <BR> VAT NO:
    <INPUT TYPE=text NAME=vat >
    </FIELDSET>
    </td>
    <td>
    <FIELDSET>
    <LEGEND >Qualification</LEGEND> Qualification:
    <INPUT TYPE=text NAME=quali >
    <BR> Statement:
    <INPUT TYPE=text NAME=statement >
    </FIELDSET>
    </td>
    </tr>
    </table>

    Complete Example

    <html>
    <body>

    <form action="mailto:webgimmicks@yahoo.com" method="post">

    (The following is a drop down list)<Br>What is your pet?

     <select name="select">

     <option selected value="option1">Cat

     <option value="option2">Dog

     <option value="option3">Pig

     </select><Br>

    (The following is a scrolling list)<Br>select your state name.

     <select name="select" size="3">

     <option selected value="option1">NY

     <option value="option2">NJ

     <option value="option3">NC

     </select><Br>

     What is your pet's name?<input type="text" size=20 maxlenght=50 name="inputtext"><Br>

      (The following is a check box.).<Br>Select your favorite place.<Br>

     <input type="checkbox" name="pizza" value="yes">Europe<Br>

     <input type="checkbox" name="potato" value="yes">Hawaii<Br>

     <input type="checkbox" name="pasta" value="yes">Bahamas<Br>

     (This is a radio button.)<Br>Are u interested in pet show?<Br>
     Yes<input type="radio" name="petshow" value="yes" checked> or no<input type="radio" name="petshow" value="no"><Br>

    The following is  textarea.<Br>Enter your pet's details.

     <textarea cols=40 rows=4 name="textarea">

     </textarea><Br>

     Enter the password?<input type="password" name="password" size=10><Br>

     <input type="reset" value="Clear "><input type="submit" value="submit">
     </form>

     </body>

     </html>

     

    Page contents: itechies.net - A complete description of every form related HTML tag.
    htmltutorials
    tutorial home