Pages

Wednesday, 18 July 2012

HTML - FORMS

                      Forms provides different kinds of user inputs.Forms are used to pass

 a data from user to server.The input elements which a form can contain are.....

  1. Text fields :

             Text fields provides a single line input field for the user.

     

    Syntax :

    <html>

    <body>

    <form>

    USER NAME :  <input type="text" name="username"/>

    </form>

    </body>

    </html>

     

  2. Text area :

             Text area provides multiline input field for the user.

     

    Syntax :

    <html>

    <body>

    <form>

    COMMENTS :  <text area rows="10" cols="30"/>

    </text area>

    </form>

    </body>

    </html>

     

  3. Password:

               Password is the form element provides the password fields for the user and it displays Black circle or * symbol for the each  input.

     

    Syntax :

    <html>

    <body>

    <form>

    PASSWORD :  <input type="password" name="passwrd"/>

    </form>

    </body>

    </html>

     

  4. Check box :

            Check box is the easiest input form element for selecting multiple input 

    by the user.

     

    Syntax :

    <html>

    <body>

    <form>

    Fav.Actress : 

    <input type="checkbox" name="actress" value="kathrina kaif"/>I Like Kathrina<br/>

    <input type="checkbox" name="actress" value="Bhavana"/>I Like Bhavana

    </form>

    </body>

    </html>

     

  5. Radio button :

            Radio button provides the user to select only one input at a time.

     

    Syntax :

    <html>

    <body>

    <form>

      <input type="radio" name="sex" value="male/>Male<br/>

      <input type="radio" name="sex" value="female/>Female<br/>

    </form>

    </body>

    </html>

     

  6. Drop down list :

               Drop down list provides the collection of pages or links that the user

    can select one of them.This is the simplest tool to show the many number of

    inputs in a simple way.

     

    Syntax :

    <select>

    <option> A </option>

    <option> B </option>

    <option> C </option>

     </select>

     

     Example :

    <html>

    <body>

    <form>

    <select name="actress">

    <option> Bhavana </option>

    <option> Kathrina Kaif </option>

    <option> Kareena Kapoor </option>

    <option> Tapsi </option>

    <option> Anjali </option>

    <option> Hanshika Mothwani </option>

    </select>

    </form>

    </body>

    </html>

     

     

    7.Multi list Drop down list :

                       Multi list provides a drop down menu that has sub groups inside the list.

    Syntax :

    <select>
                       <optgroup>Actors</optgroup>
                           <option>Rajni</option>
                           <option>Kamal</option>

                       <optgroup>Actress</optgroup>
                        <option>Asin</option>
                           <option>Trisha</option>
                   </select>

    8.Buttons :

                      There are 3 types in buttons.Normal button,Submit button,Reset button.

    i)Normal button provides some actions through javascript codes.

    ii)Submit button is used to submit a form.

    iii)Reset button resets the complete form.

    Synatx:

                   <input type="button" name="button" />
                   <input type="submit" name="submit" />
                   <input type="reset" name="reset" />

     

    9.Hidden texts :

                     Hidden texts are mostly used for transferring datas to databases that are not having any need to display in front end side.

                     Hidden element is nothing but a text box which is not in visible mode.

     

    Syntax:

           <input type="hidden" name="hiddentext" />

    10.File upload

                    File upload allows users to upload any type of files that can be stored in online databases as a path.....

    Syntax:

                 <input type="file" name="uploadimage" />