All About <INPUT/> Element

All About <INPUT/> Element

·

9 min read

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

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.