Forms are used in HTML to let the user enter data and to specify the form of data to be input . User can provide different types of information such as his name , contact number , email Id through the contact form .
<form>-They are used to obtain information from the visitors.
action attribute - It specifies the URL where the script that processes the form data can be found.
e.g.
<form action="/location/of/script">
<fieldset> - It defines a set of related form fields .
<legend> - This gives <fieldset> element a name that is visible to web page visitors .
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Ohh You</legend>
</fieldset>
</form>
<input> - specifies the input type desired from the user .<input> elements can be text fields, check boxes, radio buttons etc.
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<input type="text" name="Phone No." />
</fieldset>
</form>
<label> - Text uniquely associated with an input field .
<input type="text" name="Phone" id="phone_field" />
We use id to uniquely identify this input field .
e.g.
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
Checkbox - It receives a “yes or no” input from the user .
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
<input type="checkbox" name="permanent" id="permanent_field" value="1" />
<label for="permanent_field">This is my permenent number.</label>
</fieldset>
</form>
If we want the checkbox to be already checked then :
<input type="checkbox" name="permanent"id="permanent_field"value="1"checked="checked" />
Lists are used to show a number of such inputs from the user in a single form .
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
</li>
<li>
<input type="checkbox" name="permanent" id="permanent_field" value="1" />
<label for="permanent_field">This is my permenent number.</label>
</li>
</ol>
</fieldset>
</form>
Radio button - User can select only one out of multiple options .
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
</li>
<li>
<input type="checkbox" name="permanent" id="permanent_field" value="1" checked="checked"/>
<label for="permanent_field">This is my permenent number.</label>
</li>
<li>Which is your favorite movie?
<ul>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_memento" value="Memento" />
<label for="favorite_movie_memento">Memento</label>
</li>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_the_dark_knight" value="The Dark Knight" />
<label for="favorite_movie_the_dark_knight">The Dark Knight</label>
</li>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_the_fountain" value="The Fountain" />
<label for="favorite_movie_the_fountain">The Fountain</label>
</li>
</ul>
</li>
</ol>
</fieldset>
</form>
Drop-down list - In case the user has large number of options to choose from a drop-down list is used .
e.g.
<label for="movie_type_field">Movie Type</label>
<select name="movie_type" id="movie_type_field">
<option>Classic</option>
<option>History</option>
<option>War</option>
<option>Adventure</option>
</select>
<optgroup> - Used to group the options .
<label for="movie_type_field">Movie Type</label>
<select name="movie_type" id="movie_type_field">
<optgroup label="Hollywood">
<option>Classic</option>
<option>History</option>
<option>War</option>
<option>Adventure</option>
<optgroup label="Bollywood">
<option>Comedy</option>
<option>Crap</option>
</optgroup>
</select>
<textarea> - Helps user to enter any size of text in prescribed area .
e.g. If we want user to enter comments .
<label for="omments_field">Comments</label>
<textarea name="comments" id="comments_field" rows="20"cols="100"></textarea>
submit - This is used to submit user details to the processing script .
e.g.
<input type="submit" value="Submit this Form" />
<form>-They are used to obtain information from the visitors.
action attribute - It specifies the URL where the script that processes the form data can be found.
e.g.
<form action="/location/of/script">
<fieldset> - It defines a set of related form fields .
<legend> - This gives <fieldset> element a name that is visible to web page visitors .
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Ohh You</legend>
</fieldset>
</form>
<input> - specifies the input type desired from the user .<input> elements can be text fields, check boxes, radio buttons etc.
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<input type="text" name="Phone No." />
</fieldset>
</form>
<label> - Text uniquely associated with an input field .
<input type="text" name="Phone" id="phone_field" />
We use id to uniquely identify this input field .
e.g.
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
Checkbox - It receives a “yes or no” input from the user .
e.g.
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
<input type="checkbox" name="permanent" id="permanent_field" value="1" />
<label for="permanent_field">This is my permenent number.</label>
</fieldset>
</form>
If we want the checkbox to be already checked then :
<input type="checkbox" name="permanent"id="permanent_field"value="1"checked="checked" />
Lists are used to show a number of such inputs from the user in a single form .
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
</li>
<li>
<input type="checkbox" name="permanent" id="permanent_field" value="1" />
<label for="permanent_field">This is my permenent number.</label>
</li>
</ol>
</fieldset>
</form>
Radio button - User can select only one out of multiple options .
<form action="/location/of/script">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="phone_field">Phone Number</label>
<input type="text" name="Phone" id="phone_field" />
</li>
<li>
<input type="checkbox" name="permanent" id="permanent_field" value="1" checked="checked"/>
<label for="permanent_field">This is my permenent number.</label>
</li>
<li>Which is your favorite movie?
<ul>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_memento" value="Memento" />
<label for="favorite_movie_memento">Memento</label>
</li>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_the_dark_knight" value="The Dark Knight" />
<label for="favorite_movie_the_dark_knight">The Dark Knight</label>
</li>
<li>
<input type="radio" name="favorite_movie" id="favorite_movie_the_fountain" value="The Fountain" />
<label for="favorite_movie_the_fountain">The Fountain</label>
</li>
</ul>
</li>
</ol>
</fieldset>
</form>
Drop-down list - In case the user has large number of options to choose from a drop-down list is used .
e.g.
<label for="movie_type_field">Movie Type</label>
<select name="movie_type" id="movie_type_field">
<option>Classic</option>
<option>History</option>
<option>War</option>
<option>Adventure</option>
</select>
<optgroup> - Used to group the options .
<label for="movie_type_field">Movie Type</label>
<select name="movie_type" id="movie_type_field">
<optgroup label="Hollywood">
<option>Classic</option>
<option>History</option>
<option>War</option>
<option>Adventure</option>
<optgroup label="Bollywood">
<option>Comedy</option>
<option>Crap</option>
</optgroup>
</select>
<textarea> - Helps user to enter any size of text in prescribed area .
e.g. If we want user to enter comments .
<label for="omments_field">Comments</label>
<textarea name="comments" id="comments_field" rows="20"cols="100"></textarea>
submit - This is used to submit user details to the processing script .
e.g.
<input type="submit" value="Submit this Form" />
