HTML Tutorial / Choose Input Types for Email, Numbers, Dates, and Choices

The type of an input tells the browser what kind of value or selection the field represents. Email, numeric quantities, dates, checkboxes, and radio buttons have different behaviors. Choose the type according to the data and decision users must make, not merely its visual appearance.

Match the type to the value

<form action="" method="get">
  <p><label for="email">Email</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">Quantity</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">Visit date</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">Check</button>
</form>

Save the example in an HTML file and try each field. email can provide basic address-format validation and a suitable input interface on some devices. number can enforce a numerical minimum; the visible control for date depends on the browser and operating system. The server must still check that a submitted date is valid for the application's purpose.

A quantity is a number you can calculate with, but a postal code may have leading zeros and a telephone number may include a country code or punctuation. Use text or tel for such values rather than number. Ask whether the value is a numerical quantity, not simply whether it contains digits.

Checkboxes or radio buttons?

Choose a checkbox for an independent yes/no decision or multiple independent selections. Choose radio buttons with the same name when exactly one option from a group may be selected.

<fieldset>
  <legend>Updates</legend>
  <label><input type="checkbox" name="news" value="yes"> Receive news</label>
</fieldset>
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

The radio inputs share name="contact", so selecting one clears the other. value is the submitted value, which need not match the visible label. Put these groups inside a form with a submit button to test them: an unchecked news checkbox contributes no entry, while selecting Email sends contact=email. If your application must distinguish an explicit “No” from no response, design that choice and its server handling deliberately.

Check more than the type

Each field still needs an understandable label and, when its value must be submitted, a name. A field of type="email" can be left empty unless you also require a value; format and requiredness are separate rules. You can add required to a radio group when choosing one answer is truly mandatory. Test what the browser submits and validate important values on the server. The MDN input reference lists supported types and constraints.