HTML Input Types.

Beyond basic text, HTML5 provides specialized input types for email, passwords, numbers, dates, and more to ensure better data quality and mobile UX.

The Essentials

type='password' masks the characters for security.

type='email' triggers email-specific keyboards and validation.

type='number' only allows digits and shows a number pad on mobile.

type='checkbox' allows selecting multiple options.

type='radio' allows selecting only one option from a group (using the same 'name').

type='date' provides a native calendar picker.

Professional Insights

Mobile Keyboard Optimization

Using the correct type (like 'tel' for phone numbers) is a major UX win. It forces the mobile device to show the number pad instead of the full QWERTY keyboard.

Grouping Radio Buttons

For radio buttons to work as a 'choice of one', they MUST share the same 'name' attribute. This tells the browser they belong to the same group.

Checkboxes vs. Radio Buttons

Rule of thumb: Use checkboxes for 'choose all that apply' and radio buttons for 'choose exactly one'.

File Uploads

type='file' allows users to pick a file from their device. You can restrict file types using the 'accept' attribute (e.g., accept='image/*').

Critical Pitfalls

Forgetting to give radio buttons the same 'name', allowing multiple to be selected at once.

Using type='text' for emails, which loses the native browser validation.

Forgetting a <label> for each input, making them inaccessible.

Using type='password' for non-sensitive data, which is confusing for users.

Interactive Lab

Sprint Tasks

Create a password input

Create two radio buttons with the name 'gender' (Options: Male, Female)

Loading editor...

Production Preview