What input types and validation attributes did HTML5 add?

Summary

Types such as email, url, tel, number, range, date, time, color and search, which bring suitable mobile keyboards and pickers and check formats. Validation attributes: required, min, max, step, minlength, maxlength and pattern. The browser blocks submission and shows messages until the constraints pass.

Longer Answer

Styling hooks include :invalid, :valid and :user-invalid. The Constraint Validation API (checkValidity, reportValidity, setCustomValidity) lets JavaScript customise the behaviour. Client-side validation is a convenience only; the server must validate everything again.

Key Points

• New input types.
• required, min/max, minlength/maxlength, pattern.
• Constraint Validation API.
• Server validation still required.

Deep dive: HTML5 for Beginners: More Form Controls and Built-in Validation

What interviewers look for

Knows client validation isn't security.

Follow-up questions

• When would you use novalidate?
• Why not use type=number for a credit card?