This lesson describes the different types for the HTML <input> element.
Here are the different input types you can use in HTML:
<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">The default value of the type attribute is "text".
<input type="text"> defines a single-line text input field:
This is how the HTML code above will be displayed in a browser:
<input type="password"> defines a password field:
This is how the HTML code above will be displayed in a browser:
The characters in a password field are masked (shown as asterisks or circles).
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
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 label (usually "Submit Query").
<input type="reset"> defines a reset button. When clicked, this button will reset all form values to thier defualt.
This is how the HTML code above will be displayed in a browser:
<input type="radio"> defines a radio button.
Radio buttons let users select only one of a limited number of choices.
This is how the HTML code above will be displayed in a browser:
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select zero or more options of a limited number of choices.
This is how the HTML code above will be displayed in a browser:
<input type="button"> defines a button.
This is how the HTML code above will be displayed in a browser:
<input type="color"> is used for inputs that should contain a color.
Depending on browser support, a color picker can show up in the input field.
<input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
You can also use the min and max attributes to add restrictions to dates.
<input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
<input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
<input type="file"> defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
A hidden field often stores what database record that to be updated when the form is submitted.
Note: While the value is not displayed to the user in the pages content, it can still be viewed (And edited) using the browsers developer tools. Never use hidden inputs as a form of security.
<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.
<input type="number"> defines a numeric input field.
You can set restrictions on what values are accepted using the min and max attributes.
The example below displays a numeric input field, where you can enter a value from 1 to 5.
<input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.
<input type="search"> is used for search fields (a search field behaves like a regular text field).
<input type="tel"> is used for input fields that should contain a telephone number.
<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.
<input type="url"> is used for input fields that should contain a URL.
Depending on the browser, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and add ".com" to the keyboard for url input.
<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.