Input types

The <input> tag can take many forms. Its kind is set by the type attribute: it decides how the field looks, which keyboard a phone shows and what the browser allows you to enter. Without type you get a regular text field, type="text".

Text fields

<p><input type="text" placeholder="Name"></p>
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>

On the outside email looks like text, but on a phone it shows a keyboard with the @ sign, and on submit the browser checks that the address looks like an email.

Special text

<p><input type="tel" placeholder="Phone"></p>
<p><input type="url" placeholder="https://"></p>
<p><input type="search" value="cappuccino"></p>

Numbers and sliders

number accepts only numbers and shows arrows, range is a slider for an approximate value. The min, max and step attributes set the limits and the step:

<p><input type="number" min="1" max="10" value="2"></p>
<p><input type="range" min="0" max="100" step="10" value="30"></p>

Date and time

<p><input type="date"></p>
<p><input type="time"></p>
<p><input type="datetime-local"></p>

Click a field — the browser opens a calendar. Its look depends on the browser and the operating system.

Checkboxes and radio buttons

A checkbox is ticked and unticked independently of the others. A radio button belongs to a group with the same name, and only one option in the group can be chosen. The checked attribute selects an option in advance:

<p><input type="checkbox" checked> Subscribe to the newsletter</p>
<p>
  <input type="radio" name="size" value="s"> S
  <input type="radio" name="size" value="m" checked> M
  <input type="radio" name="size" value="l"> L
</p>

The value attribute is required here: it is what gets sent to the server, for example size=m. Captions for checkboxes should be made with the <label> tag — it is the topic of the next lesson.

Colour, file and hidden field

<p><input type="color" value="#7c3aed"></p>
<p><input type="file"></p>
<input type="hidden" name="order_id" value="42">

file opens a file picker. A hidden field is not visible on the page: it carries service data, such as an order number. For a form to send files to the server, it needs method="post" and enctype="multipart/form-data".

Common mistake

A phone number, a card number or a postcode is not a number, even though it consists of digits. A number field drops a leading zero, shows useless arrows, and the mouse wheel may change the value by accident. Use tel or text for such data:

<p><input type="number" value="0123"> — the zero may be lost</p>
<p><input type="text" inputmode="numeric" value="0123"> — this is right</p>

The inputmode="numeric" attribute still shows a number pad on a phone.