HTML Input Types

One tag, many controls

<input> changes shape with type. The attribute does three things at once: it picks the widget (a date picker, a checkbox, a file button), it hints the keyboard on a phone, and it lets the browser refuse a value that cannot possibly be right — an email without an@, a number outside min and max.

If you omit type, you get text. Write the type anyway. The next person reading the file should not have to guess.

text, email, number, date

These four cover most “type a value” fields. Email and number look like text on a desktop, then grow a useful keyboard and built-in format check on a phone. Date usually opens a calendar widget.

<form action="#" method="get">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">

  <label for="email">Email</label>
  <input id="email" name="email" type="email">

  <label for="loaves">Loaves</label>
  <input id="loaves" name="loaves" type="number">

  <label for="pickup">Pickup date</label>
  <input id="pickup" name="pickup" type="date">

  <p><button type="submit">Send</button></p>
</form>

type="email" expects an @. type="number" is for actual quantities, not postal codes or phone numbers — those can start with zero and are better as text.type="date" submits as YYYY-MM-DD even if the widget shows a local format.

checkbox and radio

A checkbox is on or off. Each checkbox has its own name unless you want several boxes to submit as one group of values. A radio button is a single choice from a set. Radios that belong togethermust share the same name. Different names means they do not deselect each other.

<form action="#" method="get">
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="pale"> Pale</label>
    <label><input type="radio" name="crust" value="dark" checked> Dark</label>
  </fieldset>

  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="seeds" value="yes"> Seeds</label>
    <label><input type="checkbox" name="sliced" value="yes"> Sliced</label>
  </fieldset>

  <button type="submit">Add</button>
</form>

Unchecked boxes and radios send nothing. Checked ones send their value, or the wordon if you omitted value. Set value so the server receives a word you chose. checked marks the starting state.

password, file, color, range

Password masks the characters. File opens a picker — remember POST andenctype="multipart/form-data" on the form if you will actually upload. Color offers a swatch. Range is a slider; pair it with min, max, and a visible number so the value is not a secret.

<form action="#" method="post" enctype="multipart/form-data">
  <label for="pin">Password</label>
  <input id="pin" name="pin" type="password">

  <label for="photo">Label photo</label>
  <input id="photo" name="photo" type="file">

  <label for="wrap">Wrapper color</label>
  <input id="wrap" name="wrap" type="color" value="#9a3412">

  <label for="toast">Toast level</label>
  <input id="toast" name="toast" type="range" min="1" max="5" value="3">

  <p><button type="submit">Save</button></p>
</form>

A table of common types

Other types you will meet later include url, tel, search,time, hidden, and submit. Browsers that do not know a type fall back to a text field, so the form still works.

Pick the type the data deserves

• If the value is a quantity, use number or range, not text.
• If exactly one option must win, use radios with the same name, not a pile of checkboxes.
• If the user is attaching a file, use file and multipart POST. A text field named “file” will not open a picker.
• If you only need to hide characters, use password. That is display, not security by itself.

Try the examples in /html/try on a narrow preview. Email should offer an @-friendly keyboard on a phone. Date should not be a free-typed guess if the browser has a calendar.

What to remember

• type chooses the widget, the mobile keyboard, and some built-in checking.
• Radios in one question share one name. Checkboxes are independent unless you group them on purpose.
• file needs POST plus enctype="multipart/form-data". password still uses POST.
• Unknown types fall back to text. Known types still need a name to be submitted.

Next: input attributes — required, placeholder, min, max, pattern, and the rest of the constraints.