HTML input types

Definition

The type attribute selects an input state. Common text-like values include text, email, url, tel, search, password, and number. Other states include checkbox, radio, file, date, time, range, color, hidden, submit, and button.

Choosing a type

Match the semantic value, not the characters that happen to appear. A postal code may contain digits but is not a quantity, so text with an appropriate inputmode is often better than number. A phone number is tel; browsers should not apply numeric stepping to it.

Fallback and browser variation

Unknown input types fall back to text. Supported date, color, and range interfaces differ by browser and operating system. Always provide a visible label, acceptable format guidance, and server validation that does not depend on one native picker.

Validation consequences

email and url add syntax checks, while number, date, and time states can apply ranges and steps. These checks improve feedback but do not establish identity, ownership, business validity, or authorization. The server remains the authority.

Accessibility decisions

Checkboxes represent independent choices; radios represent one choice in a named group. Group related controls with fieldset and legend. File inputs need accepted-format and size guidance before selection plus clear upload progress and failure recovery after selection.

Common failures

• Using number for credit cards, postal codes, or identifiers.
• Depending on placeholder examples instead of persistent instructions.
• Assuming every browser displays the same picker or error.
• Replacing a native file or date input without implementing its full contract.
• Hiding radio or checkbox focus while styling a custom visual control.

Verification checklist

Test required types in every supported browser and mobile profile. Inspect the keyboard, picker, accessible role, name, checked or selected state, constraints, and submitted value. Try boundary, empty, pasted, autofilled, malformed, and server-rejected data. Confirm custom styling survives keyboard focus, forced colors, 200% zoom, and 320-pixel reflow.