Home | HTML | Asp.Net | HTML Probe | .Net Probe
  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.


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

<!-- form input use here -->


Use of <input /> element :

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


<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.


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

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


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.


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

Enter Your First Name:

Enter Your Last Name:


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


Checkbox is used to choose multiple option.


A radio button is used to choose only one option.


It is used to display image.


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

<p>Language known by you?</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>Gender ?</p>


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

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


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


Enter Your Password:

Language known by you?


Gender ?



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.


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


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


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


It is used to clear all fields value.


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

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

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



       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.

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


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>



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.


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

This is Multi-line text box.


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