HTML form

HTML form is used to collect the data from the user. It consists of normal content, other input controls (text, number, buttons, checkbox etc.) and context menus (select, option, optgroup etc).

Users enter the required data in these input fields. Then, the data of the user is processed by web resources (external files).

Firstly you will see simple form. Gradually you will learn each and every element related to the form.

Name: <input type="text" name="name"><br>
Father's name: <input type="text" name="fname"><br>

Try </>

input tag defines an input field to enter the data in a form.

type="text" represents that the type of data is text.

form element

form element defines HTML form.

<form method="post" action="files/formaction.php">
 Data related to the form
</form>

Try </>

In the above example, value attribute specifies the initial value of the input control.

name attribute of the input field gives a special name to the input field. You can't see the effect of name attribute but it is used by the external file formaction.php that processes the data.

action attribute specifies the address where form is submitted.

fieldset element

fieldset tag gives a boundary or border to the form. In other words it encloses the form elements.

<form method="post" action="files/fieldset.php">
 <fieldset>
   Form Data
 </fieldset>
 </form>

Try </>

legend element

legend element specifies caption or title for the form. It is used immediately after the fieldset element.

<form method="post" action="files/legend.php">
 <fieldset>
 <legend>FORM</legend> 
  Email: <input type="email" name="uemail">
  Password: <input type="password" name="upass">
  <input type="submit" name="submit">
 </fieldset>
</form>

Try </>

select element

select tag defines a list of options in the form of dropdown list.

<p>You have to choose only one option.</p>
 Gender:
 <select>
  <option>Male
  <option>Female
  <option>Other
 </select>

Try </>

option element

option element defines an option. It is always used as the child of other elements such as select or optgroup.

<p>Here we select one option from the given options.</p>
 which is the richest country:
 <select>
  <option>China
  <option>USA
  <option>Istanbul
  <option>Japan
  <option>Uganda
 </select>

Try </>

datalist element

datalist element suggests a list of pre-defined options to facilitate the user. datalist is always used with input field in a form.

<p>It is used to make datalist in an input field.</p>
 Which is your favourite subject?
 <input list="subjects" >
 <datalist id="subjects">
  <option>Physics
  <option>Chemistry
  <option>Mathematics
  <option>Computer
  <option>Biology
 </datalist>

Try </>

In the above example, id is specified for the datalist tag. Then the value of id attribute is used in the list attribute of input element.

textarea element

We can make a text area using textarea tag. cols and rows attributes define the structure of textarea.

<p>You can change the size of text area.</p>
<p>Comment: <textarea cols="30" rows="10"></textarea></p>

Try </>

cols means columns. Actually ,it specifies the number of character in a line. rows attribute indicates the number of lines to show.

optgroup element

optgroup element defines a group of options. In the select element, optgroup element groups the options.

<p>It is used to make a list of group options.</p>
 Which article you want to read?
<select name="Article">
 <optgroup label="Article 1">
  <option> Article 1.1 
  .
  .
  .
 </optgroup>
  <optgroup label="Article 2">
  .
  .
  .
  </optgroup>
</select>

Try </>

option elements are used as the children of optgroup element. label attribute defines the common name or title of optgroup tag.

The closing tag (</option>) of option element may be used.

There are different attributes of input tag that provide more control over the input field. See the input attributes in the next tutorial.