input types element is used to create interactive controls for web-based forms to
accept data from the user. Data can be entered by the user in various forms, like in alphabets, in digits or a combination of both like an email. These different kind of HTML form input type elements in HTML defines the type of data a user would enter in the input field. It makes easier for the browser to understand what data is valid to be entered in a particular field and what is not.
The different types of HTML input type are specified by its ‘type’ attribute, each input type has a different ‘type’ attribute value associated with it. Let’s see the common values of ‘type’ attribute:
Here is a list of some common HTML Form input types.
|text||It defines a one-line text input field.|
|password||Defines a one-line password input field.|
|submit||It specifies a submit button to submit the form to server.|
|reset||The reset button reset all values in the form.|
|radio||A Radio button allows select one option.|
|checkbox||Checkboxes allow selecting multiple options form.|
|button||Defines a clickable button, which can perform a task on an event.|
|file||It defines to select the file from device storage.|
|image||It Defines a graphical submit button.|
<input type="text"> defines a single line text input field. By default a field text can take 20 Characters.
<input type="password"> defines a password field. It will show bullets in place of actual characters during input.
<input type="submit"> defines a
Submit button that submit
form data to a form-handler. The
form-handler is a type of server page with a script for processing form input data and It is specified in the form's action attribute
<input type="reset"> defines a
If you want to change the input values then click the "Reset" button, the form data will be reset to the default values.
<input type="radio"> defines a Radio button.
It is used where only one option out of many has to be selected. The
name attribute in all the buttons should have the same value, then only a distinct value will get selected.
The Radio buttons let a user select ONLY ONE of a limited number of choices.
<input type="checkbox"> defines a checkbox.
It can be used to select multiple options at a time.
<input type="button"> defines a button.
<input type="number"> defines a numeric input field.
The number attribute set restrictions on what numbers are accepted. You can set the
Here is a list of some common input restrictions (some are new in HTML5).
|disabled||It specifies to disabled the input field.|
|max||It specifies maximum value for an input field.|
|maxlength||It specifies the maximum number of character for an input field.|
|min||It specifies the minimum value for an input field.|
|pattern||It specifies a regular expression to check the input value against.|
|readonly||It specifies that an input field is read only that cannot be changed.|
|required||It specifies that an input field is require.|
|size||It specifies the width (in characters) of an input field.|
|step||It specifies the legal number intervals for an input field.|
|value||It specifies the default value for an input field.|
The HTML5 introduced 13 diferent
"types" attributes. Let’s see the different values of ‘type’ attribute:
"email" is used for creating an input field for email address. This HTML input type is specifically used to validate the email address entered by the user. It uses the standard email address format and the user violates it then it shows error. Syntax:
"number" will create an input field to enter only numbers, if you enter alphabets or symbols or anything other than numbers, it will show an error, however decimal points numbers are allowed. Syntax:
It is used to create a search box. You can even add placeholder in the search box by using the ‘placeholder’ attribute. Syntax:
Specifically used to enter a URL. Syntax:
This HTML input type provides controls to enter numbers. It has small buttons on the right side to increase or decrease the value of the number. In your smartphones this input type automatically opens the numeric keyboard during entering the data. Syntax:
It is a special HTML input type field to enter phone numbers only. Syntax:
It creates a slider to select a value in within a range of two values. Syntax:
<input type="range" min="0" max="10">
This type is used to create an input area to enter date. You can manually enter the date or can select value from a graphical calendar. Syntax:
It only provide options of Month and year. Syntax:
Allows you to pick the week and year. Syntax:
Allows you to enter time of the day. It can be entered manually or by the help of a digital clock format. Syntax:
Enter Date and time together in a single input field. Syntax:
If you want to enter any RGB color information on the database then use this input type. Syntax: