Forms and inputs

The form element

The <form> element wraps all the fields that belong together. Its action attribute is the address that receives the data, and method says how to send it: GET puts the answers in the URL (good for search), POST sends them in the body of the request (right for sign-ups, payments and anything private).

Labels and inputs

An <input> is a box the user types in or a control they pick. A <label> is the visible question. Connect them: give the input an id and the label a for attribute with the same value. Now tapping the label puts the cursor in the box, and screen readers read the label aloud.

<form action="/register" method="post">
  <label for="full-name">Full name</label>
  <input id="full-name" name="fullName" type="text" autocomplete="name">

  <label for="mobile">Mobile number</label>
  <input id="mobile" name="mobile" type="tel" autocomplete="tel">

  <button type="submit">Register</button>
</form>

The name attribute is the key sent to the server with the value, like fullName=Asha. An input without a name is not sent at all.

Input types

Choices: select, radio and checkbox

Use <select> with <option> for a long list (state, course). Use radio buttons when only one answer is allowed (gender, category): all radios in a group share the same name. Use checkboxes when many answers are allowed (languages known). Group related controls in a <fieldset> with a <legend> that asks the question.

<fieldset>
  <legend>Preferred exam centre</legend>
  <label><input type="radio" name="centre" value="delhi"> Delhi</label>
  <label><input type="radio" name="centre" value="pune"> Pune</label>
</fieldset>

<label for="state">State</label>
<select id="state" name="state">
  <option value="">Choose a state</option>
  <option value="KA">Karnataka</option>
  <option value="TN">Tamil Nadu</option>
</select>

<label for="about">About you</label>
<textarea id="about" name="about" rows="4"></textarea>

Buttons

A <button type="submit"> sends the form. A <button type="button"> does nothing on its own; JavaScript gives it a job. Always write the type: a button inside a form is a submit button by default, which surprises many beginners.