When you ask someone a question, the type of answer you expect determines what kind of input box you give them. HTML has a surprising number of built-in input types — way more than just a plain text box.
The Input Tag
<input> is the workhorse of forms. By changing its type attribute, you get completely different controls. Here are the most common ones:
<input type="text" name="fullname">
<input type="password" name="secret">
<input type="email" name="email">
<input type="number" name="age">
<input type="date" name="birthday">
Text, Password, Email, Number
text is your standard one-line text box. password hides the characters as the user types. email looks like text but validates that the value looks like an email address on some browsers. number gives you a spinbox with up/down arrows and only accepts numeric input.
Date, Color, File, Range
date opens a date picker. color opens a color swatch picker. file opens a file browser and lets the user upload a file. range renders a slider — you give it min, max, and step attributes.
<input type="date" name="appointment">
<input type="color" name="favourite">
<input type="file" name="photo">
<input type="range" name="volume" min="0" max="100">
Checkbox and Radio
Checkboxes let the user pick zero or more options. Radio buttons let them pick exactly one from a group. For radio buttons, all options must share the same name attribute to work as a group.
<input type="checkbox" name="toppings" value="cheese"> Cheese
<input type="checkbox" name="toppings" value="pepperoni"> Pepperoni
<input type="radio" name="size" value="small"> Small
<input type="radio" name="size" value="large"> Large
Hidden Input
type="hidden" does not show anything on the page, but its value gets submitted with the form. It is handy for passing along IDs or tokens that the user does not need to see.
<input type="hidden" name="user_id" value="42">