HTML forms simply place a handful of GUI controls on the user agent screen to allow the user to enter data. The controls can allow text input and
selection of pre-defined options from a list, radio buttons or check boxes, or other standard GUI controls.
Every <form> element should carry at least two attributes:
- action
- method
A <form> element may also carry all of the universal attributes, the UI event attributes, and the following attributes:
- enctype
- accept
- accept-charset
- onsubmit
- onreset
The different types of form controls that live inside the <form> element to collect data from a visitor to your site.
- Text input controls
- Buttons
- Check boxes and radio buttons
- Select boxes
- File select boxes
- Hidden controls
<!DOCTYPE HTML—–
<form action=”index.html” method=”post”>
<tr>
<td><b>Name</b>:
<input type=”text” name=”text”/>
</td>
</tr><tr>
<td>
<b>Age</b>:
<input type=”radio” name=”age” /> 20
<input type=”radio” name=”age”/> 40
<input type=”radio” name=”age” />60
</td>
</tr><tr>
<td>
<b>Category</b>:
<select name=”category”>
<option name=”mbc”> MBC</option>
<option name=”obc”> OBC</option>
<option name=”bc”> BC</option>
</select>
</td>
</tr><tr>
<td>
<b>Gender</b>:
<input type=”checkbox” name=”male” />Male
<input type=”checkbox” name=”female” />Female
</td>
</tr><tr>
<td>
<textarea cols=”15fi rows=”5fi name=”textarea”> </textarea>
</td>
</tr><td><input type=”submit” value=”submit” name=”submit” />
<input type=”reset” name=”reset” /></td><tr>
<td><input type=”file” name=”upload” accept=”image/jpeg”/></td>
<td><input type=”hidden” name=”hidden” value=”This is hidden text”/></td>
</tr>
</form></html>
The <label> element carries an attribute called for , which indicates the form control associated with the label. The value of the for attribute should be the same as the value of the id attribute on the corresponding form control.
<tr>
<td><label for=”name”>Name</label></td>
<td><input type=”text” name=”name2fi id=”name” /></td>
</tr>
<tr>
<td> <label>Name:<input type=”text” name=”name” /></label></td>
</tr>
The <fieldset> and <legend> elements do exactly this — help you group controls.The < fieldset > element creates a border around the group of form controls to show that they are related. The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.
<fieldset>
<legend> This General Information</legend>
Name:<input type=”text” name=”name” tabindex=”3fi readonly=”readonly” disabled=”disabled”/>
</fieldset>
<fieldset>
<legend> This Personal Information</legend>
Mobile :<input type=”text” name=”mobile” tabindex=”4fi/>
</fieldset>
<fieldset>
<legend>This Secret Field</legend>
Password: <input type=”password” name=”pwd” />
</fieldset>Official Website : http://www.genwhizztech.com
Genwhizz Technologies 