HTML & CSS
/Intermediate
Input Types
Definition
The `<input>` element can be displayed in many ways, depending on the `type` attribute. HTML5 introduced a variety of native input types that provide built-in validation and mobile-friendly keyboards.
Explain Like I'm New
Instead of just using `type="text"` for everything, you can use `type="email"` or `type="date"`. The browser handles the magic. If you use `type="email"` on a mobile phone, the keyboard automatically opens with the '@' symbol ready. If you use `type="date"`, a calendar popup automatically appears when clicked.
Real World Example
Using `type="password"` obscures the text into dots. Using `type="number"` prevents the user from typing letters.
Common Use Cases
- •Collecting specific formatted data
- •Enhancing mobile UX
Interactive Example
Interview Questions
basic
- What input type creates a tiny dot that hides text?
intermediate
- What is the difference between radio buttons and checkboxes?