HTML input Tag
In HTML the <input> tag is used to create different types of input fields, which are used in HTML form, when we have to take a user input on a webpage.
The main purpose of form creation on a webpage is to get details entered from the user, and to assist the user, there are many different formats in which we can take user input, like, text box, radio buttons, checkboxes, drop down list and many more.
These different type of input fields in HTML form can be created using the <input> tag.
And for using different type of input fields, you need to set the type attribute of the <input> tag.
HTML Input Type:
The type attribute is used to create different types of input field in an HTML form. There are some types of input tags that are newly introduced in HTML5. We have covered most of them below:
-
hidden: A hidden field can be created using the input element and setting its type to "hidden". A hidden field can be used to pass information from one form to another without forcing the user to re-enter the information and it is not displayed by the browser.
-
tel: The tel type of input control is used to take input of telephone numbers in a form. This type of input field, by default only takes numbers as input and not alphabets.
-
URL: The URL type of input control is used to enter a valid path of a Webpage. Any valid URL should have: a protocol, domain name, and pathname. Whenever you will submit the form then the value of the URL gets automatically validated.
-
datetime-local: It is used to take input of date and time from user in a web form. User can select the date and time according to your appropriate time zone.
-
number and range: The number type of input control allows a user to enter numbers only. If any user tries to enter any alphabet then it does not accept and also gives the user a message to enter numbers only. The range type of input control is used when we want user to enter a value within a specified range.
-
file: The file type of input allows you to select a file stored in the local computer and send it to the server whenever the form is submitted. The size, maxlength, and accept are few attributes used with this input type.
-
checkbox: A checkbox is used to select or deselect one or more than one item that is displayed on the form. A checkbox can be created by setting input type to checkbox.
-
radio: A radio type is used to create radio buttons for multiple options which allow a user to select any one item at a time. A radio button is termed as a list of more than one item from which user have to select a single item.
-
submit: Whenever the user clicks on the Submit button then the entered information in all the fields of the form is sent to the URL specified in the action attribute of the <form> tag.
-
reset: Whenever any user clicks on the Reset button then the information of all fields is erased and set to the default values or blank values. It can be created by setting the type attribute as "reset".
-
datetime, date, month, week, time: To take input in form of datetime, date, month, week and time, separately is possible using these values with the type attribute.
-
email: This type is used to take input of valid e-mail address from the end user, which should contain an @ symbol and a (.) dot. The value of e-mail is automatically validated on submission of the form. More than one e-mail address can be entered in a field by using multiple attribute of e-mail.
-
password: This form control is used to protect the secret information that a user doesn't want to share with others. It is similar to a text box, but the text entered is not in readable form because asterisk symbol or dot is displayed in the form of characters.
-
text: This is the most simple form of input field, in which use can input plain text.
HTML <input> Tag - Syntax and Usage
The <input> element is an empty tag.
Also, this is an Inline Element. The basic syntax for the same is given below:
<input type=""/>
Here the type attribute can have any of the values specified in the list above. Apart from the type attribute, there are many other attributes accpeted which we have listed in the next section.
HTML <input> Tag Attributes
HTML <input> tag supports both Global attributes and Event attributes and some of the common attributes are given below:
| Attributes |
Description |
size |
This attribute is used to define the width of visible text in input field. In simpler words, this attribute will set the width of the input field based on the length of text expected in the input field. For example if we set size attribute as 4 then the width of the input field will be set as per to accomodate only 4 characters. |
readonly |
This attribute is used to indicate that the particular field is read-only. |
type |
This attribute is used to indicate the type of <input> field to be displayed, which we have already covered. |
value |
This attribute is used to indicate value of an <input> element. Using this, we can set a default value too. |
name |
This attribute is used to specify the name of an <input> element. |
maxlength |
This attribute specifies the maximum number of characters that can be entered in an <input> element. |
src |
This attribute is used to specify an image for the Submit button. The src attribute is only used for images. |
alt |
The alt attribute is used to provide alternate text for an image and is helpful in cases where the web browser is unable to render the image. |
autocomplete |
The autocomplete attribute is used to specify whether an input element should have to autocomplete enabled, in which, browser will show suggestions when user enters anything in the input field. |
placeholder |
The placeholder attribute is used to provide a placeholder text in the input type text field. |
HTML <input> Tag Basic Example
In this example, there are three input fields, namely username, password and a file input.
In the example above, we have used three different types in input fields, along with three attributes, namely, autocomplete, maxlength and size. We would recommend you using more types of input fields and attributes and see how they affect the input fields.
Using Checkbox Input Field:
Now we will create one simple form with multiple options for user to choose in form of checkbox.
In the above example, we have created multiple checkboxes along with a text field and a submit button.
Browser Support for HTML <input> Tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 2+
-
Apple Safari 1+
-
Opera 2.1+
