This chapter describes the different types for the HTML element.
HTML Input TypesHere are the different input types you can use in HTML:
Tip: The default value of the type attribute is "text".
Input Type Textdefines a single-line text input field:
Example First name: Last name: Try it Yourself »This is how the HTML code above will be displayed in a browser:
First name: Last name: Input Type Passworddefines a password field:
Example Username: Password: Try it Yourself »This is how the HTML code above will be displayed in a browser:
Username: Password:The characters in a password field are masked (shown as asterisks or circles).
Input Type Submitdefines 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:
Example First name: Last name: Try it Yourself »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 First name: Last name: Try it Yourself » Input Type Resetdefines a reset button that will reset all form values to their default values:
Example First name: Last name: Try it Yourself »This is how the HTML code above will be displayed in a browser:
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
Input Type Radiodefines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
ExampleChoose your forite Web language:
HTML CSS JaScript
Try it Yourself »This is how the HTML code above will be displayed in a browser:
Input Type Checkboxdefines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example I he a bike I he a car I he a boat Try it Yourself »This is how the HTML code above will be displayed in a browser:
Input Type Buttondefines a button:
Example Try it Yourself »This is how the HTML code above will be displayed in a browser:
Input Type ColorThe is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example Select your forite color: Try it Yourself » Input Type DateThe is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example Birthday: Try it Yourself »You can also use the min and max attributes to add restrictions to dates:
Example Enter a date before 1980-01-01: Enter a date after 2000-01-01: Try it Yourself » Input Type Datetime-localThe 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.
Example Birthday (date and time): Try it Yourself » Input Type EmailThe 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.
Example Enter your email: Try it Yourself » Input Type ImageThe defines an image as a submit button.
The path to the image is specified in the src attribute.
Example Try it Yourself » Input Type FileThe defines a file-select field and a "Browse" button for file uploads.
Example Select a file: Try it Yourself » Input Type HiddenThe 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 needs to be updated when the form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!
Example First name: Try it Yourself » Input Type MonthThe allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example Birthday (month and year): Try it Yourself » Input Type NumberThe defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example Quantity (between 1 and 5): Try it Yourself » Input RestrictionsHere 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 fieldYou 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 Quantity: Try it Yourself » Input Type RangeThe 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:
Example Volume (between 0 and 50): Try it Yourself » Input Type SearchThe is used for search fields (a search field behes like a regular text field).
Example Search Google: Try it Yourself » Input Type TelThe is used for input fields that should contain a telephone number.
Example Enter your phone number: Try it Yourself » Input Type TimeThe 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 Select a time: Try it Yourself » Input Type UrlThe is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example Add your homepage: Try it Yourself » Input Type WeekThe allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example Select a week: Try it Yourself » HTML Input Type Attribute Tag Description Specifies the input type to display ❮ Previous Next ❯ ★ +1 Track your progress - it's free! Log in Sign Up