Choose an HTML <input> type that matches the value a form expects: use email for email addresses, tel for phone numbers, number for quantities, and checkboxes or radio buttons for choices. The type gives browsers useful semantics and may enable built-in validation, mobile keyboards, or picker controls—but it does not replace clear labels or server-side validation.
What does an HTML input type do?
The <input> element collects a value. Its type attribute tells the browser what kind of value is expected and what control behavior or semantics to provide. The same element can therefore represent text, a choice, a date, a file picker, or a form action. MDN calls <input> “one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.” MDN Web Docs: <input>
Native appearance and interaction vary by browser and device. In particular, date, time, and color controls may look different across platforms. Select types for their meaning and useful browser behavior, not because you expect every browser to display an identical widget.
Which input type should you use?
General text and contact information
| Type | Use it for | What to know |
|---|---|---|
text |
General single-line text. | Use for values that are text rather than quantities, including identifiers. |
password |
Credential entry. | Obscures the entered text on screen; it does not itself secure transmission or storage. |
email |
Email-address entry. | Enables email-oriented browser validation and may offer a suitable mobile keyboard. Add multiple if the field should accept a list of email addresses. |
url |
URL entry. | Provides URL-specific input semantics and browser validation. |
tel |
Telephone-number entry. | Can prompt a phone-friendly keyboard, but phone formatting and validation rules are application-specific. |
search |
Search terms. | Communicates search-field semantics and may receive browser-specific UI treatment. |
Do not use number for values such as ZIP codes or account numbers just because they contain digits. These are identifiers, not quantities: leading zeros and punctuation may matter, and arithmetic constraints usually do not. Prefer text with an appropriate inputmode or validation where useful.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Numeric values and sliders
| Type | Use it for | What to know |
|---|---|---|
number |
A numeric quantity. | Use min, max, and step when the acceptable range or increment is meaningful. |
range |
A numeric value selected along a slider. | Best when users choose within a bounded range rather than enter an exact value. Set appropriate range constraints and provide a visible way to understand the selected value. |
Date and time values
| Type | Value requested |
|---|---|
date |
A calendar date. |
month |
A year and month. |
week |
A calendar week. |
time |
A time of day. |
datetime-local |
A local date and time without a time-zone offset. |
These types express different temporal values; choose the one that matches the data your application needs. Browsers and devices decide how to present their controls, so do not assume a particular picker appearance. Apply constraints such as min, max, and step where they fit the field.
Color and file selection
| Type | Use it for | What to know |
|---|---|---|
color |
Choosing a color. | The selection interface varies by browser and device. |
file |
Selecting files from the user’s device. | accept can hint at suitable file types; multiple permits selecting more than one. Configure the form for file upload as described below. |
Checkboxes and radio buttons
| Type | Use it for | Submission behavior |
|---|---|---|
checkbox |
An independent choice that can be checked or unchecked. | An unchecked checkbox contributes no value. A checked checkbox submits its named value. |
radio |
One choice from a group. | Radio controls with the same name form a group. Only the selected control contributes a value. |
Give each option a clear, associated label so users can identify what they are selecting. Use checkboxes when choices are independently selectable; use a same-name radio group when the user should choose one option from that group.
Hidden fields and form actions
| Type | Purpose | What to know |
|---|---|---|
hidden |
Submit a value without displaying a control. | It is not a security mechanism: users can inspect or alter client-side form data. |
submit |
Submit the form. | Triggers form submission. |
reset |
Restore controls to their initial values. | Use cautiously: resetting can discard a user’s edits. |
button |
A button with no default form action. | Typically used with scripting or other deliberate behavior. |
image |
An image-based submit control. | Acts as a submit control with image presentation. |
How do input attributes affect the value?
Attributes refine a control’s behavior, constraints, and browser hints. They do not all apply to every input type.
nameidentifies the field in the submitted name/value data. A control without a name does not contribute its value.requiredmakes supported fields mandatory according to browser constraint validation.min,max, andstepconstrain supported numeric and date/time values.minlength,maxlength, andpatternconstrain supported text-like values.autocompletegives the browser a hint about the kind of value it may autofill.placeholderprovides an example or hint inside an empty field; it is not a substitute for a visible label.readonlyprevents editing while the control remains subject to the submission rules that apply to it.multipleallows more than one email address for an email field, or more than one selected file for a file field.
Native validation helps users correct common input problems, but it is not a trust boundary. The server must validate and authorize submitted data, normalize it as needed, and process it safely.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Why is an input value missing from the submission?
A form submits successful, named controls. These common conditions explain why a value may be absent:
- The control has no
name, so it has no submission key. - The control is
disabled; disabled controls are excluded. - A checkbox or radio button is unchecked or not selected; it contributes no value.
- The control is not part of the form being submitted.
For a file upload, set the form’s encoding to multipart/form-data. A submit control can also override form-level submission settings using attributes such as formaction, formmethod, and formenctype.
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
How to choose a type responsibly
- Match the type to the meaning of the value, not merely its appearance. A phone number or ZIP code is generally not a mathematical quantity.
- Use native constraints when they accurately describe acceptable input; avoid constraints that reject valid user data.
- Provide a persistent, clear label for every field. A placeholder disappears as users type and should remain only a hint.
- Check the control on the browsers and devices your users rely on, especially for date, time, and color inputs.
- Validate again on the server. Browser validation can be bypassed and does not establish that submitted data is authorized or safe.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
