HTML5 introduced many specialised <input> types that trigger appropriate virtual keyboards on mobile and enable built-in validation.
<input type="text" name="username" placeholder="Username" />
<input type="email" name="email" placeholder="you@example.com" />
<input type="password" name="password" placeholder="Password" />
<input type="url" name="website" placeholder="https://example.com" />
<input type="search" name="q" placeholder="Search..." />
<input type="tel" name="phone" placeholder="+1 555 123 4567" />
<input type="number" name="qty" min="1" max="100" step="1" value="1" />
<!-- Slider -->
<input type="range" name="volume" min="0" max="10" step="1" />
<input type="date" name="birthday" />
<input type="time" name="appointment" />
<input type="datetime-local" name="event" />
<input type="month" name="billing-month" />
<input type="week" name="sprint" />
<!-- Colour picker -->
<input type="color" name="theme-color" value="#336699" />
<!-- File upload -->
<input type="file" name="avatar" accept="image/*" />
<!-- Hidden field (not visible, still submitted) -->
<input type="hidden" name="csrf_token" value="abc123" />
<!-- Buttons -->
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Click me" />
| Type | Validates | Mobile keyboard |
|---|---|---|
text | None | Standard |
email | Must contain @ | Email layout |
url | Must start with scheme | URL layout |
tel | None (format varies) | Numeric/phone |
number | Must be numeric | Numeric |
search | None | Search layout |
date | Must be valid date | Date picker |
color | Must be valid hex | Colour picker |
Build a form that uses at least 5 different input types:
text field for a username.email field.number field with min, max, and step attributes.date field.color field.type="number" accepts only numeric input and supports min, max, and step attributes.