Home | HTML | Asp.Net | HTML Probe | .Net Probe
   
 www.solvingera.com 
  Contact Us |Sitemap
  
   

Forms in HTML

  
Skip Navigation LinksHome>Html Home>HTML Forms
There are two types of forms.
  • Search forms that let users search a site or the entire Web.

  • Data collection forms provide information for users as online shopping, technical support, site preferences, and personalization.
Structure of <form> tag:

<form> tag is Processed by the same form handler.
A form handler is a program on the Web server that manages the data that was send by the user through html forms.
Attributes uses with <form> tag:
  • action: The URL of the form handler.

  • method: How you want the form data to be sent to the form handler.
    • get sends the form data to the form handler on the URL.

    • post sends the form data in the Hypertext Transfer Protocol(HTTP) header.

Example:

<form action="abc/abcform.in" method="post">

<!-- form input use here -->

</form>

Use of <input /> element :

it is used to define a text field and the type attribute with a value of text.

Syntax:

<input type="text" />

Values of "Type"
  • button

  • image

  • checkbox

  • radio

  • file

  • reset

  • submit

  • text

  • password

  • hidden

Name: attribute is used to give the input field a name.

Example:

<p>Enter Your First Name: <input type="text" name="fstname" /> </p>

<p>Enter Your Last Name: <input type="text" name="lstname" /> </p>

OUTPUT:

Enter Your First Name:

Enter Your Last Name:

Size: The length (in characters) of the text field.

Maxlength: The number of characters the user can type into the field.

Example:

<p>Enter Your First Name: <input type="text" name="fstname" size="42" maxlength="31" /></p>

<p>Enter Your Last Name: <input type="text" name="lstname" size="32" maxlength="50" /></p>
OUTPUT:

Enter Your First Name:

Enter Your Last Name:

type="password"

A password field is a text field that doesn't display what the user types.

type="checkbox"

Checkbox is used to choose multiple option.

type="radio"

A radio button is used to choose only one option.

type="image"

It is used to display image.

Example:

<p>Enter Your Password: <input type="password" name="pswrd" size="32" maxlength="28" /></p>

<p>Language known by you?</p>

<p>

<input type="checkbox" value="hind" name="language" checked="checked" />Hindi

<input type="checkbox" value="english" name="language" />English(US)

<input type="checkbox" value="punjabi" name="language" />Punjabi

</p>

<p>Gender ?</p>

<p>

<input type="radio" value="male" name="gender" checked="checked" />Male

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

</p>

<input type="image" value="submit" src="../image1.jpg" alt="Image" />

OUTPUT:

Enter Your Password:

Language known by you?

Hindi
English(US)
Punjabi

Gender ?

Male
Female



type="hidden"

A hidden field is used to collect the information that are invisible for a user on a web page. Hidden fields are useful if you want to store the information of a vsitor.

Example:

<input type="hidden" name="e-mail" value="xyz@abc.com" />

type="file"

It is used to collect documents and other files such as images, from users.

type="submit"

It is used to submit image,file etc which user want to submit.

type="reset"

It is used to clear all fields value.

Example:

<p>Upload your current snap here: <input type="file" name="pic" /> </p>

<p>input type="submit"value="Send" />

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

</p>

OUTPUT:

       Upload your current snap here:


                    


Drop-down lists

There are two tags to create a drop-down list:
  • <select> holds the list.

  • Name attribute is used to give a name the entire list.

  • <option> element is used to identifies the list options.

  • Value attribute assigns a unique value for each <option> element.

  • multiple attribute is used to show list in multilines.
Example:

<p>What is your Country name?</p>

<select name="Country">

<option value="India"> India </option>

<option value="Pakistan"> Pakistan </option>

<option value="England"> England </option>

<option value="Australia"> Australia< /option>

<option value="Canada"> Canada </option>

</select>

Example for multiline:

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

<option value=" India " selected="selected" > India< /option>

<option value=" Pakistan "> Pakistan /<option>

<option value=" England " > England </option>

<option value=" Australia "> Australia< /option>

<option value=" Canada "> Canada </option>

</select>

OUTPUT:

What is your Country name?


OUTPUT for multiline:

Multi-line text boxes

 *It Provides large space to users.
 *<textarea> element specifies the box and its parameters.
 *The rows attribute specifies the height of the box as a rows.
 *The cols attribute specifies the width of the box as a columns.

Example:

<textarea rows="6" cols="22" name="comments">

This is Multi-line text box.

</textarea>
OUTPUT

  
     
  
   
  
DMCA.com Protection Status
Design & Maintain By solvingera group| solvingera.com © 2013-2014 | all right reserved |Privacy Policy | Back to top