HTML forms collect user input using different types of input fields. The type attribute tells the browser what kind of input to display, such as text, password, checkbox, or date picker.
By default, if you do not specify a type, the browser uses type="text".
Common Input Types Overview
| Type | Description |
|---|---|
text | Single-line text input |
password | Password field (characters are masked) |
submit | Button to submit form data |
reset | Button to reset form fields |
radio | Select ONE option from a group |
checkbox | Select ZERO or MORE options |
button | Clickable button (usually with JavaScript) |
color | Color picker |
date | Date picker |
email | Email address (validates format) |
file | File upload field |
number | Numeric input (with up/down arrows) |
range | Slider control |
search | Search field |
tel | Telephone number |
time | Time picker |
url | URL address |
hidden | Hidden field (not visible to user) |
Input Type Text
The type="text" creates a single-line text input field. Use it for names, addresses, or short answers.
Input Type Password
The type="password" creates a password field. The characters are masked with dots or asterisks so others cannot see what is being typed.
Input Type Submit
The type="submit" creates a button that sends the form data to the server. The action attribute specifies where to send the data.
Input Type Reset
The type="reset" creates a button that resets all form fields to their default values.
Input Type Radio (Select ONE)
The type="radio" creates radio buttons. All radio buttons with the same name belong to a group. Users can select only ONE option from the group.
Input Type Checkbox (Select ZERO or MORE)
The type="checkbox" creates checkboxes. Users can select zero, one, or multiple options from a list.
Input Type Button
The type="button" creates a clickable button. It does nothing by default. You need JavaScript to make it do something.
Input Type Color (Color Picker)
The type="color" creates a color picker. Click the field to choose a color.
Input Type Date
The type="date" creates a date picker. Click the field to choose a date from a calendar.
Date with min and max restrictions:
Input Type Email
The type="email" is for email addresses. Browsers automatically validate the format. On mobile, the keyboard shows “@” and “.com” for easier typing.
Input Type File
The type="file" creates a file upload field. Users can browse their computer and select a file to upload.
Input Type Number
The type="number" creates a numeric input field with up/down arrows. You can set restrictions like min, max, and step.
Input Type Range (Slider)
The type="range" creates a slider control. The exact value is not important, just the general range. You can set min, max, and step.
Input Type Search
The type="search" is designed for search fields. On some browsers, it adds a clear button to remove the text.
Input Type Tel (Telephone)
The type="tel" is for telephone numbers. On mobile, it shows a numeric keypad. You can use the pattern attribute to enforce a specific format.
Input Type Time
The type="time" creates a time picker. Users can select a time without a timezone.