HTML Input Types
The type attribute of an input element sets what kind of field the browser shows. Each type collects a different kind of answer.
Text and password fields
A text field shows the typed letters. A password field hides them behind dots.
<label for="user">User name</label>
<input type="text" id="user">
<label for="pass">Password</label>
<input type="password" id="pass">Email and number fields
An email field expects an email address. A number field expects digits.
<label for="mail">Email</label>
<input type="email" id="mail">
<label for="age">Age</label>
<input type="number" id="age">A date field
A date field offers a small calendar. The visitor picks a day from it.
<label for="day">Visit day</label>
<input type="date" id="day">Checkboxes
Each checkbox works on its own. A visitor can tick none, one, or both boxes.
<input type="checkbox" id="news">
<label for="news">Send me news</label>
<input type="checkbox" id="offers">
<label for="offers">Send me offers</label>Radio buttons
A shared name groups radio buttons into one set. The name attribute gives the group its shared name.
<input type="radio" id="small" name="size">
<label for="small">Small</label>
<input type="radio" id="large" name="size">
<label for="large">Large</label>Submit, reset, and button inputs
Submit sends the form, and reset clears its fields. A plain button waits for a script to give it a job.
<input type="submit" value="Send">
<input type="reset" value="Clear">
<input type="button" value="Hint">Example
<!DOCTYPE html>
<html>
<head>
<title>Input Types</title>
</head>
<body>
<h1>Order a Shirt</h1>
<p>Fill in the form to order.</p>
<form>
<label for="mail">Your email</label>
<input type="email" id="mail">
<label for="count">How many</label>
<input type="number" id="count">
<p>Pick a size</p>
<input type="radio" id="small" name="size">
<label for="small">Small</label>
<input type="radio" id="large" name="size">
<label for="large">Large</label>
<input type="checkbox" id="gift">
<label for="gift">Add a gift note</label>
<input type="submit">
</form>
</body>
</html>Key points
- Type attribute: the input setting that chooses the field kind
- Password type: a field that hides the letters a visitor types
- Checkbox: a box that a visitor can tick or leave empty
- Radio button: one choice in a group where only one pick is allowed
- Changing the type changes the field the browser shows.
- Reset control: a control that clears the fields of its form
In this example, the form mixes four input types. The email field collects an address. The number field collects a count. Two radio buttons share the name size, so only one can be picked. The checkbox stands alone, and the submit input ends the form.
Note
Email and date fields can check the shape of an answer. A later lesson covers checking in full.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which input type hides the letters while a visitor types?