Input Types

HTML5 introduced many input types that provide built-in validation and mobile-friendly keyboards.

Text Input Types

Each type provides:

• Appropriate virtual keyboard on mobile
• Built-in validation for some types

Number Inputs

Date and Time Inputs

Date inputs:

• Show native date pickers
• Format varies by locale
• min and max restrict dates

Color and File

File input attributes:

• multiple - Allow multiple files
• accept - Restrict file types

Checkboxes

Checkbox notes:

• Same name for related checkboxes
• checked attribute pre-selects
• Multiple can be selected

Radio Buttons

Radio button notes:

• Same name groups radio buttons
• Only one can be selected
• checked sets default

Hidden Inputs

Exercise: Create a Survey Form

Create a survey with different input types:

Different input types provide appropriate interfaces and validation for each data type!