HTML | Form

html forms

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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s