Forms in HTML

Why Forms Are Needed

So far every element only displays information to the visitor. A form is what lets a visitor send information back — for example, a login form, a feedback form, a registration form, or a search box. A form collects the visitor's input and submits it for processing.

The Form Container and Common Controls

A form is wrapped in the <form> tag, inside which sit form controls (also called input fields). The most common controls are:

• <input> — a versatile empty tag whose type attribute decides what kind of control it is: type="text" (a single-line text box), type="password" (a text box that hides what is typed), type="radio" (a round button for choosing one option from a group), type="checkbox" (a square box for choosing any number of options), type="email", type="number", and type="submit" (the button that sends the form).
• <label> — a caption that names a control, improving clarity and accessibility.
• <textarea> — a multi-line text box for longer input such as comments.
• <select> with <option> items — a drop-down list from which one option is chosen.

The example below is a small registration form:

<form>
  <label>Name:</label>
  <input type="text" name="username">


  <label>Password:</label>
  <input type="password" name="pwd">


  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female


  <label>City:</label>
  <select name="city">
    <option>Mumbai</option>
    <option>Pune</option>
    <option>Nagpur</option>
  </select>


  <label>Comments:</label>
  <textarea name="comments"></textarea>


  <input type="submit" value="Register">
</form>

Points to Notice

• Each control usually carries a name attribute so that the submitted data can be identified.
• Radio buttons that share the same name form one group, so only one of them can be chosen at a time; check boxes allow several to be ticked together. …