Input types

One element, many controls

Most form fields are the same element: <input>. What changes is its type attribute. Choosing the right type matters more than it looks. It decides:

• the control the visitor sees (a text box, a calendar, a slider, a colour picker);
• the keyboard shown on a phone (letters, numbers, email-friendly with @);
• the built-in checking the browser does before submitting;
• how well assistive technology can describe it.

If a browser does not understand a type, it quietly shows a text box, so using a newer type is always safe.

Text-like types

<form>
  <p><label>Name <input type="text" name="name"></label></p>
  <p><label>Email <input type="email" name="email"></label></p>
  <p><label>Phone <input type="tel" name="phone"></label></p>
  <p><label>Website <input type="url" name="site"></label></p>
  <p><label>Password <input type="password" name="pw"></label></p>
  <p><label>Search <input type="search" name="q"></label></p>
</form>

• text: any single line. The default if you give no type.
• email: checks for a plausible address and shows an email keyboard on phones.
• tel: shows a phone keypad. It does not enforce a format, because phone numbers differ around the world.
• url: expects a full address with a scheme such as https://.
• password: shows dots instead of characters. It does not encrypt anything.
• search: a text box styled as search; some browsers add a clear button.

Here label wraps the input, which also connects them. You can wrap or use for and id; both work.

Numbers, dates and ranges

<form>
  <p><label>Quantity <input type="number" name="qty" min="1" max="10" value="1"></label></p>
  <p><label>Birth date <input type="date" name="dob"></label></p>
  <p><label>Meeting time <input type="time" name="time"></label></p>
  <p><label>Volume <input type="range" name="vol" min="0" max="100" value="40"></label></p>
  <p><label>Favourite colour <input type="color" name="colour" value="#7c3aed"></label></p>
</form>

• number gives a numeric field with small up and down arrows. min, max and step limit it. Use it for quantities, not for phone numbers, card numbers or postal codes, which are identifiers, not amounts.
• date, time, datetime-local, month and week give a native picker. The value is always sent in a fixed format such as 2026-03-08, whatever the visitor sees on screen.
• range is a slider for values where the exact number matters less than the position.
• color opens the system colour picker and sends a value like #7c3aed.

Checkboxes and radio buttons

<form>
  <fieldset>
    <legend>Which breads do you like? (choose any)</legend>
    <label><input type="checkbox" name="bread" value="sourdough"> Sourdough</label><br>
    <label><input type="checkbox" name="bread" value="multigrain"> Multigrain</label>
  </fieldset>
  <fieldset>
    <legend>Delivery (choose one)</legend>
    <label><input type="radio" name="delivery" value="pickup" checked> Pick up</label><br>
    <label><input type="radio" name="delivery" value="home"> Home delivery</label>
  </fieldset>
</form>

• Checkboxes are independent: each can be on or off. Only checked ones are submitted.
• Radio buttons with the same name form a group where choosing one deselects the others. Give each a different value, since the name is shared.
• checked pre-selects an option.
• A fieldset with a legend groups related controls and gives screen readers the group's question.

File and hidden inputs

• type="file" lets visitors choose files. The form needs method="post" and enctype="multipart/form-data" for the file to be sent. Add accept="image/*" to suggest the kind of file.
• type="hidden" carries a value the visitor does not see, such as an id. It is not secret: anyone can read it in the page source.

Choosing the right type

Common mistakes

• type="number" for phone numbers, PIN codes or card numbers. They are not quantities; leading zeros would be lost.
• Radio buttons with different names, so every one can be selected.
• Checkboxes or radios without labels.
• Thinking password is secure by itself. HTTPS provides protection, not the input type.
• Using only a colour to show a field is required. Add text or an indicator.

Exercise

Create a booking form with: name (text), email, number of guests (number from 1 to 8), a date, and a radio group for "Veg" or "Non-veg" meal.

<form action="/book" method="post">
  <p><label>Name <input type="text" name="name" required></label></p>
  <p><label>Email <input type="email" name="email" required></label></p>
  <p><label>Guests <input type="number" name="guests" min="1" max="8" value="2"></label></p>
  <p><label>Date <input type="date" name="date" required></label></p>
  <fieldset>
    <legend>Meal</legend>
    <label><input type="radio" name="meal" value="veg" checked> Veg</label>
    <label><input type="radio" name="meal" value="nonveg"> Non-veg</label>
  </fieldset>
  <button type="submit">Book</button>
</form>