HTML inputs are the controls people use to enter data on a webpage—names, emails, passwords, numbers, dates, files, and choices. One element, <input>, becomes many widgets through its type attribute.
Place inputs inside a <form> when values should submit together. Pair every visible control with a <label>. Give each field a name so the browser can send the value.
type matter?type changes the UI and validation: email checks format, password hides characters, number offers a spinner, date opens a calendar, file opens a picker. The default type is text.
This tutorial is a tour of common types for HTML authors building forms. The input tag reference covers attributes and type specifics in depth.
Use <label for="id"> matching the input’s id. Do not rely on placeholder alone.
Without name, many browsers omit the field when the form is submitted.
Matching types improve mobile keyboards and built-in validation—use email, tel, url, and number when they fit.
Labeled fields inside a form:
<form action="/register" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="pwd">Password</label>
<input type="password" id="pwd" name="password" required>
<input type="checkbox" id="news" name="subscribe" value="yes">
<label for="news">Subscribe</label>
<input type="submit" value="Register">
</form>Common type values you will use most often:
| type | Purpose |
|---|---|
text | Single-line text (default) |
email / password / tel / url / search | Specialized text fields |
number / range | Numeric value or slider |
checkbox | On/off (or many) choices |
radio | One choice in a named group |
date / time / datetime-local | Calendar / time pickers |
file | Upload files |
color | Color picker |
hidden | Value sent, not shown |
submit / button / reset / image | Form buttons |
| Attribute | Role |
|---|---|
name | Key sent with the form data |
id | Hook for label for="…" |
value | Current or submitted value |
placeholder | Hint text (not a label) |
required | Must be filled before submit |
disabled / readonly | Block editing (disabled is not submitted) |
min / max / step | Limits for number/date/range |
accept | File type hint for file |
| radio | checkbox | |
|---|---|---|
| Selection | One in the group | Any combination |
| Grouping | Same name | Usually unique names |
| Typical use | Gender, shipping method | Agree to terms, add-ons |
A practical workflow:
<form> with action and method when submitting.type that matches the data (email, number, date…).id + <label for> for every visible control.name (and value for radios/checkboxes).required, min/max, or pattern for basic validation.type="submit" (or a <button type="submit">).| Goal | Pattern |
|---|---|
| Text field | <input type="text" name="username"> |
| One of many | Radios with the same name |
| Optional add-on | <input type="checkbox" name="…"> |
| Upload | type="file" (+ accept) |
| Send the form | <input type="submit" value="Send"> |
Switch input types and see how the control changes.
Six patterns: text, email/password, number, radio/checkbox, date/file, and a full form.
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username">id.<input type="email" name="email" placeholder="[email protected]" required>
<input type="password" name="password" placeholder="Enter password" required><input type="number" name="age" min="1" max="100" value="25"><input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe</label>name form one group.<input type="date" name="birthdate">
<input type="file" name="resume" accept=".pdf,.doc,.docx"><form>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="0" max="120">
<label for="birthdate">Birthdate</label>
<input type="date" id="birthdate" name="birthdate">
<p>Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</p>
<p><input type="checkbox" name="subscribe"> Subscribe</p>
<input type="file" name="resume">
<input type="submit" value="Register">
</form>required / email.Most input bugs are missing labels, missing names, or the wrong type.
Placeholders vanish while typing and are weaker for screen readers. Keep a real label.
Unnamed controls often never reach the server.
They will not act as one group. Share the same name.
You lose mobile keyboards and built-in checks. Prefer email, tel, number, date when appropriate.
accept is a hint. Always validate files server-side.
Reset buttons often frustrate users. Prefer clear, intentional UI instead.
Core input types (text, email, password, number, checkbox, radio, file, submit) are Baseline. Some newer types (week, month) vary—always provide a usable fallback experience.
Interactive form controls via input work across modern browsers; type support can vary for niche pickers.
Bottom line: Pick the right type, label every field, and put name on anything you want submitted.
One line: Choose the right type, label the control, give it a name, and place it in a form when you need to submit.
Open a Try It demo and build a full registration form with many input types.
8 people found this page helpful