Input Types
Overview
The `<input>` tag is incredibly versatile. By simply changing the `type` attribute, you can transform a plain text box into a password field, a date picker, a slider, a checkbox, or a color picker!
Using the correct input type is essential because it gives browsers 'native validation' (e.g., checking if an email has an '@' symbol automatically) and on mobile phones, it opens the correct keyboard (e.g., a number pad for phone numbers).
Syntax
The default type is `text`. When you want to hide what the user is typing (like a password), use `type="password"` and the browser will replace the characters with dots or asterisks.
<!-- Standard text input -->
<input type="text" placeholder="Full Name" />
<!-- Characters are masked for security -->
<input type="password" placeholder="Enter Password" />Using `type="email"` ensures the user types a validly formatted email address before submitting, and on mobile, it adds the '@' symbol to the keyboard.
Using `type="number"` provides up/down arrows in the box and restricts typing to numbers only.
<!-- Must contain an @ symbol -->
<input type="email" placeholder="you@example.com" />
<!-- Only accepts numbers. You can set min and max! -->
<input type="number" min="1" max="10" placeholder="Age" />Use `type="checkbox"` when the user can select MULTIPLE options (like choosing toppings on a pizza). Use `type="radio"` when the user can only select ONE option (like choosing a size: Small, Medium, or Large).
For radio buttons to work as a group, they MUST all have the exact same `name` attribute.
<!-- Checkboxes: User can check both -->
<label><input type="checkbox" name="skills" value="html" /> HTML</label>
<label><input type="checkbox" name="skills" value="css" /> CSS</label>
<!-- Radio Buttons: User can only pick one! -->
<label><input type="radio" name="gender" value="male" /> Male</label>
<label><input type="radio" name="gender" value="female" /> Female</label>HTML5 introduced awesome native pickers that require zero JavaScript. You can ask the user to pick a date, a color, or slide a range value.
<!-- Opens a native calendar popup -->
<input type="date" />
<!-- Opens a native color wheel -->
<input type="color" />
<!-- Creates a draggable slider -->
<input type="range" min="0" max="100" />Common Pitfalls
- type='number' only accepts numeric characters—don't use it for phone numbers or credit cards, because they often have spaces or dashes. Use type='tel' or type='text' instead.
- Interview tip: The 'accept' attribute on file inputs (like accept='.pdf') is just a hint to the browser. A malicious user can bypass it, so you MUST always validate uploaded files on the server too!
Real-World Example
A job application form utilizing appropriate input types:
<form>
<input type="text" name="name" placeholder="Full Name" required />
<input type="email" name="email" placeholder="Work Email" required />
<input type="tel" name="phone" placeholder="Phone Number" />
<label for="start-date">Available from:</label>
<input type="date" id="start-date" name="available-from" />
<label for="salary">Salary Expectation (LPA):</label>
<input type="range" id="salary" name="salary" min="5" max="50" step="1" />
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc" />
</form>