All About <INPUT/> Element

The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

Example :

works varies considerably depending on the value of its type attribute.

Lets see all the types of input types :-

1. Button :-

A push button with no default behavior displaying the value of the value attribute, empty by default.

It have 2 types of attribute :-
type :- here, the type is "button"
value :- An <input type="button"> elements' value attribute contains a string that is used as the button's label.

There is one more interesting thing that we can do in input "button" that is we can add shortcut keyboard key on "button" by passing accesskey which is a global attribute.

what is global attribute ? Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

There are many global attributes are :-

1. accesskey
2. autocapitalize
3. autofocus
4. class
5. contenteditable
6. contextmenu
7. data-*
8. dir
9. draggable
10. enterkeyhint
11. exportparts
12. hidden
13. id
14. inert
15. inputmode
16. is
17. itemid
18. itemprop
19. itemref
20. itemscope
21. itemtype
22. lang
23. nonce
24. part
25. role
26. slot
27. spellcheck
28. style
29. tabindex
30. title
31. translate

2. Checkbox :-

A check box allowing single values to be selected/deselected.

It have 3 types of attribute :-

1. checked
2. indeterminate
3. value

3. Color :-

elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

It have 2 types of attribute :-

1. autocomplete
2. list

4. Date :-

A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

It have 4 types of attribute :-

1. autocomplete
2. list
3. readonly
4. step

5. datetime-local :-

A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.

It have 4 types of attribute :-

1. autocomplete
2. list
3. readonly
4. step

6. Email :-

A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

It have 12 types of attribute :-

1. autocomplete
2. list
3. maxlength
4. minlength
5. multiple
6. name
7. pattern
8. placeholder
9. readonly
10. required
11. size
12. type

7. File :-

elements with type="file" let the user choose one or more files from their device storage.

It have 3 types of attribute :-

1. accept
2. capture
3. multiple

8. Hidden :-

A control that is not displayed but whose value is submitted to the server.

The server would set the value of the hidden input with the ID "postID" to the ID of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified information. No scripting is needed in the content to handle this.

It have 1 attribute only : -

1. autocomplete

9. Image :-

elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

It have 9 types of attribute :-

1. alt
2. src
3. width
4. height
5. formaction
6. formenctype
7. formmethod
8. formnovalidate
9. formtarget

10. Month :-

elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number.

It have 4 types of attribute :-

1. autocomplete
2. list
3. readonly
4. step

11. Number :-

elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

It have 4 types of attribute :-

1. autocomplete
2. list
3. placeholder
4. readonly

12. Password :-

elements of type password provide a way for the user to securely enter a password.

It have 9 types of attribute :-

1. autocomplete
2. inputmode
3. maxlength
4. minlength
5. pattern
6. placeholder
7. readonly
8. required
9. size

13. Radio :-

elements of type radio are generally used in radio groups-collections of radio buttons describing a set of related options.

It have 3 types of attribute :-

1. checked
2. value
3. required

14. Range :-

elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.

It have 5 types of attribute :-

1. autocomplete
2. list
3. max
4. min
5. step

15. Reset :-

elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.

It have 2 types of attribute :-

1. type
2. value

16. Search :-

elements of type search are text fields designed for the user to enter search queries into.

It have 8 types of attribute :-

1. autocomplete
2. list
3. maxlength
4. minlength
5. pattern
6. placeholder
7. required
8. size

17. Submit :-

This element is used to submit the form.

It have 2 types of attribute :-

1. type
2. value

18. Tel :-

elements of type tel are used to let the user enter and edit a telephone number.

It have 8 types of attribute :-

1. autocomplete
2. list
3. maxlength
4. minlength
5. pattern
6. placeholder
7. required
8. size

19. Text :-

elements of type text create basic single-line text fields.

It have 9 types of attribute :-

1. autocomplete
2. list
3. maxlength
4. minlength
5. pattern
6. placeholder
7. readonly
8. required
9. size

20. Time :-

elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).

It have 4 types of attribute :-

1. autocomplete
2. list
3. readonly
4. step

21. URL :-

elements of type url are used to let the user enter and edit a URL.

It have 9 types of attribute :-

1. autocomplete
2. list
3. maxlength
4. minlength
5. pattern
6. placeholder
7. readonly
8. required
9. size

22. Week :-

elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).

It have 4 types of attribute :-

1. autocomplete
2. list
3. readonly
4. step

In these all input elements we can use global attribute, event handler and aria role attributes.