HTML Forms

A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.

E.g.: <form>

  <input>

  <input></form>

i) Input: The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

ii) Text Fields: Text fields are used when you want the user to type letters, numbers, etc. in a form.

E.g.: <form>

First name: 

<input type="text" name="firstname">

<br>

Last name: 

<input type="text" name="lastname">

</form>

How it looks in a browser:

First name:

Last name:  

iii) Radio Buttons: Radio Buttons are used when you want the user to select one of a limited number of choices.

E.g.: <form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

How it looks in a browser:

Male
Female

iv) Checkboxes: Checkboxes are used when you want the user to select one or more options of a limited number of choices.

E.g.: <form>

I have a bike:

<input type="checkbox" name="vehicle" value="Bike">

<br>

I have a car: 

<input type="checkbox" name="vehicle" value="Car">

<br>

I have an airplane: 

<input type="checkbox" name="vehicle" value="Airplane">

</form>

How it looks in a browser:

I have a bike:
I have a car:
I have an airplane:

v) The Form's Action Attribute and the Submit Button: When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

E.g.: <form name="input" action="html_form_submit.asp"

method="get">

Username: 

<input type="text" name="user">

<input type="submit" value="Submit">

</form>

How it looks in a browser:

Username:

vi) TextArea: The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

E.g.: <textarea rows="2" cols="20">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>

vii) Drop Down Box: The <option> tag used in drop down box defines an option in a select list. The option element goes inside the select element.

E.g.: <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

viii) FieldSet: The <fieldset> tag is used to logically group together elements in a form. The <fieldset> tag draws a box around the related form elements. The <legend> tag defines a caption for the fieldset element.

E.g.: <form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

ix) Label: The <label> tag defines a label for an input element. The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

E.g.: <form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" /></form>