HTML Input Types
The numerous types of the HTML <input> element are explained in this chapter.
❮ PreviousHTML Input AttributesNext ❯HTML Input Form Attributes
HTML Input Types
- <input type=”button”>
- <input type=”checkbox”>
- <input type=”color”>
- <input type=”date”>
- <input type=”datetime-local”>
- <input type=”email”>
- <input type=”file”>
- <input type=”hidden”>
- <input type=”image”>
- <input type=”month”>
- <input type=”number”>
- <input type=”password”>
- <input type=”radio”>
- <input type=”range”>
- <input type=”reset”>
- <input type=”search”>
- <input type=”submit”>
- <input type=”tel”>
- <input type=”text”>
- <input type=”time”>
- <input type=”url”>
- <input type=”week”>
Input Type Text
<input type=”text”> defines a single-line text input field:
Example
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Input Type Password
<input type=”password”> defines a password field:
Example
This is how the HTML code above will be displayed in a browser:
Username:
Password:
Input Type Submit
The button for submitting form data to a form-handler is defined by <input type=”submit”>.
Usually, a server page with a script to process input data is the form-handler.
The action property of the form specifies the form-handler:
Example
This is how the HTML code above will be displayed in a browser:
If you omit the submit button’s value attribute, the button will get a default text:
Example
Input Type Reset
<input type=”reset”> defines a reset button that will reset all form values to their default values:
Example
This is how the HTML code above will be displayed in a browser:
Input Type Radio
An radio button is defined by <input type=”radio”>.
Radio buttons allow the user to choose just ONE option from a constrained list:
Example
This is how the HTML code above will be displayed in a browser:
Input Type Checkbox
A checkbox is defined as <input type=”checkbox”>.
A user can choose to select ZERO or MORE alternatives from a limited set of possibilities by using checkboxes.
Example
This is how the HTML code above will be displayed in a browser:
Input Type Button
<input type=”button”> defines a button:
Example
This is how the HTML code above will be displayed in a browser:
Input Type Color
For input fields where a color is required, use <input type=”color”>.
The input box may display a color picker, contingent on browser support.
Example
Input Type Date
For input fields when a date is required, use <input type=”date”>.
The input box may display a date picker, contingent on browser support.
Example
You can also use the min and max attributes to add restrictions to dates:
Example
Input Type Datetime-local
A date and time input field without a time zone is specified by the <input type=”datetime-local”>.
The input box may display a date picker, contingent on browser support.
Example
Input Type Email
For input fields that need to have an email address, use <input type=”email”>.
The email address may be automatically validated upon submission, contingent upon browser support.
Certain smartphones identify the email format and modify the keyboard to include “.com” to correspond with the input.
Example
Input Type Image
A submit button is defined as an image using the <input type=”image”>.
The src element contains the path to the image.
Example
Input Type File
The <input type=”file”> defines a file-select field and a “Browse” button for file uploads.
Example
Input Type Hidden
A hidden input field—one that is not accessible to users—is defined by the <input type=”hidden”>.
When a form is submitted, web developers can add data in a hidden field that users cannot see or change.
The database record that needs to be updated when the form is submitted is frequently stored in a hidden field.
Note: The value is viewable (and editable) through the developer tools of any browser or by utilizing the “View Source” feature, even though it is not shown to the user in the page’s content. Never employ concealed inputs as a security measure!
Example
Input Type Month
The <input type=”month”> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
Input Type Number
A numeric input field is defined by the <input type=”number”>.
Restrictions on the acceptable range of numbers can also be set.
You can enter a value between 1 and 5 in the numeric input area shown in the following example:
Example
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”) |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
Input Type Range
Similar to a slider control, the <input type=”range”> creates a control for entering a number whose exact value is not important. Range by default is 0 to 100. Nonetheless, you can use the min, max, and step characteristics to impose limitations on the range of integers that are allowed:
Example
Input Type Search
For search fields, use <input type=”search”> (a search field functions similarly to a standard text field).
Example
Input Type Tel
The <input type=”tel”> is used for input fields that should contain a telephone number.
Example
Input Type Time
The <input type=”time”> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
Input Type Url
For input fields where a URL address is required, use <input type=”url”>.
The url field can be automatically validated when it is submitted, depending on browser support.
Certain smartphones identify the kind of URL and append “.com” to the keyboard to correspond with the input.
Example
Input Type Week
The <input type=”week”> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
❮ PreviousHTML Input AttributesNext ❯HTML Input Form Attributes
