The right type

Every job its own tool. The right type gives phones the right keyboard and the browser free checks.Every job its own tool. The right type gives phones the right keyboard and the browser free checks.

An <input> without a type is a plain text field. That works, but it wastes what the browser can do for you. On a phone, type="email" brings up a keyboard with @ on it, type="tel" a number pad, and type="date" a calendar picker.

Some types also come with free checks: an email field complains when the @ is missing, a url field when the address is not a valid URL. Beyond email, password, number and checkbox, there are many more:

Result in the browser

tel: phone number (number pad, no checking: formats differ per country).
url: web address. search: search box with a clear button.
date, time, datetime-local, month, week: pickers.
range: a slider. color: a colour picker. file: upload.