What is the <input> element in HTML?
The <input> element is used to collect data from the user. Several kinds of data can be taken as input from the user, depending on the type attribute in this tag. The options for the type attribute are shown in the table below:
The type attributes for <input> tag
Type | Description |
button | A empty, clickable button. Its on-click behaviour and display value can be specified. |
checkbox | A checkbox for taking boolean (0 or 1) input from the user. |
color | A color picker which enables the user to choose a color as input. |
date | An input field to enter the date in a standard format. Most browsers also support a date picker with this element. |
An input field for email. This input field checks the validity of the email address with minor boundary checks e.g. presence of the '@' character. | |
file | A button to let the user browse and upload a file from the local machine. |
hidden | An input field which is not displayed to the user but its value is submitted when the form is submitted to the server. |
image | This is an alternative of the 'submit' button. It allows the user to select an image to be displayed as a pictorial submit button. |
month | An input field for entering valid values of months and years. |
number | An input field for entering a number. Digits can not be written in this field. Most browsers also support a spinner to increment or decrement the value. |
password | A field used to take passwords as input. The value entered in this field is hidden and not displayed explicitly. |
radio | A button to select one of the many available choices. The options are created by using the same 'name' attribute. |
range | An input field to select a value between a specified range. The range is defined by the `min` and `max` attributes. Most browsers also support a slider with this option. |
reset | A reset button which sets the value of the entire form to default. |
submit | A button to submit the form. |
tel | An input field for telephone numbers. |
text | This is the default value for the <input> tag. It is simple text field on a single line. |
time | An input field for time with relevant format and boundary checks. |
url | An input field with validation checks for URLs |
week | An input field to enter the week of a year |
The
<input>tag accepts a variety of other attributes.
Example
In the following example, four different type attributes are shown. It is evident that all the <input> tags behave differently, as explained above:
