html/constraint-attr-type

Why

Each constraint attribute applies only to some input types; on any other type it is ignored without a warning. pattern and maxlength on type="number", or min and max on a text field, look like validation in review but never run, so bad values reach the server.

Fix

Use the attributes the type supports: for numbers and dates min, max and step; for text, email, URL, phone, search and password pattern, minlength and maxlength. For a code of digits, switch to type="text" inputmode="numeric" with pattern. Always validate on the server as well.

Examples

<!-- bad -->
<input id="qty" type="number" maxlength="2">
<!-- good -->
<input id="qty" type="number" min="1" max="99">

Sources

• HTML Standard, input type attribute summary (which attributes apply to which type)
• MDN, Client-side form validation

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/constraint-attr-type