HTML Input Types
The various forms of HTML input
elements are described in this chapter.
The various HTML input types are listed below :
type="button"
type="checkbox"
type="color"
type="date"
type="datetime-local"
type="email"
type="file"
type="hidden"
type="image"
type="month"
type="number"
type="password"
type="radio"
type="range"
type="reset"
type="search"
type="submit"
type="tel"
type="text"
type="time"
type="url"
type="week"
Tip :- The type
attribute has the value "text" as its default value.
Input Type Text and Input Type Password
The type="text"
defines a single line text input field.
Its used to get an input (general or non-sensitive information) from users like name, city, and so on.
The type="password"
defines a password field.
Its used to get an input (sensitive information) from users like password, credit card number, and so on.
Tip: The characters in a password field are masked (shown as asterisks or circles).
Example :-
Output :-
Password fields have their characters masked (shown as asterisks or circles).
Input Type Radio and Input Type Checkbox
The type="radio"
defines a single radio button. The Radio Buttons allow a user to choose ONLY ONE option
from a group of options.
The type="checkbox"
defines a single checkbox. A user can select multiple items from a
list of items using checkboxes.
Example :-
Output :-
Input Type Submit, Reset, and Button
There are 3 types of buttons in html, which is:
- Submit button
- Reset button
- Javascript/Normal button
The type="submit"
defines a button for submitting form data to a form-handler. A server page with a script for processing input data
is commonly used as the form-handler.
The action
property of the form specifies the form-handler.
The type="reset"
specifies a button that resets all form values to their default settings.
The type="button"
defines a button that is used to execute javascript code on a html page.
It is the most used button on html page to validate user inputs, perform any client side action, and so on.
Example:-
Output :-
If you click "Submit", the form-data will be sent to a page called "submit.aspx".
Tip: When you change the input values and then click the "Reset" button, the form-data is reset to its default values.
Input Restrictions
A list of some common input limitations is provided below :
Attribute | Description |
---|---|
checked | When the page loads, this property specifies that an input field should be pre-selected. |
disabled | Allows you to disable a certain input field. |
max | Sets the maximum value for input field. |
min | Sets the minimum value for input field. |
maxlength | Sets the maximum amount of characters that can be entered into an input field. |
pattern | Sets a regular expression to compare the supplied value to. |
readonly | Declares a field to be read-only (cannot be changed). |
required | Indicates whether or not an input field is necessary (must be filled out). |
size | The width of an input field (in characters) is specified. |
step | For an input field, this property specifies the allowed number intervals. |
value | Sets the value of an input field's default value. |
Related Links
Input Type Number and Input Type Range
The type="number"
defines a numeric input field (look like a text field).
The type="range"
defines a numeric input field (look like a slider control).
Both fields are used to set limitations on the accepted numbers and display a range of values from 1 to 5, or from 10 to 100, and etc.
You can use the min
, max
and step
attributes to add numeric restrictions in the input field.
Exmaple :-
Output :-
Note: Enter or type some out of range number and then click the "submit" button.
Note: Depending on browser support: The input type "range" can be displayed as a slider control.
Input Type Email, Input Type URL, and Input Type Tel
The type="email"
defines a input text fields that need to contain an e-mail address.
The type="url"
defines a input text fields that need to contain a URL address.
The type="tel"
defines a input text fields that need to contain a telephone number.
These input fields (e-mail, url and telephone numbers) are automatically validated when submitted, depending on browser support.
Note: To match email input and url input, some smartphones recognise the input type and add ".com" to the keyboard.
Example :-
Output :-
Input Type Color
The type="color"
defines an input fields that should contain a color.
A color picker dialog might appear in the input area depending on browser support.
Example :-
Output :-
Related Links
Input Type Date, Input Type Time, and Input Type Datetime Local
The type="date"
is used to defines a input date field. A date picker dialog may appear to
select a date from the input field. It display only date without time.
The type="time"
is used to defines a input time field. A time picker dialog may appear
and it allows the user to select a time (without time zone). It show only time not date.
The type="datetime-local"
defines a input field to set date and time (no time zone).
All dialog picker may appear in the input box if your browser supports it.
Example:-
Output :-
Input Type Month and Input Type Week
The type="month"
permits a month and a year to be selected.
The type="week"
enables the user to select a week and a year.
Example :-
Output :-