HTML Input 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 and user agent. The
<input> 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.
Definition and Usage
The <input type=”text”> defines a single-line text field.
The default width of the text field is 20 characters.
Tip: Always add the <label> tag for best accessibility practices!
HTML Input Types
Here are the different input types you can use in HTML:
<input> element is so powerful because of its attributes; the
type attribute, described with examples above, being the most important. Since every
<input> element, regardless of type, is based on the
HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.
|Attribute||Type or Types||Description|
|accept||file||Hint for expected file type in file upload controls|
|alt||image||alt attribute for the image type. Required for accessibility|
|autocomplete||all||Hint for form autofill feature|
|autofocus||all||Automatically focus the form control when the page is loaded|
|capture||file||Media capture input method in file upload controls|
|checked||radio, checkbox||Whether the command or control is checked|
|dirname||text, search||Name of form field to use for sending the element’s directionality in form submission|
|disabled||all||Whether the form control is disabled|
|form||all||Associates the control with a form element|
|formaction||image, submit||URL to use for form submission|
|formenctype||image, submit||Form data set encoding type to use for form submission|
|formmethod||image, submit||HTTP method to use for form submission|
|formnovalidate||image, submit||Bypass form control validation for form submission|
|formtarget||image, submit||Browsing context for form submission|
|height||image||Same as |
|list||almost all||Value of the id attribute of the |
|max||numeric types||Maximum value|
|maxlength||password, search, tel, text, url||Maximum length (number of characters) of |
|min||numeric types||Minimum value|
|minlength||password, search, tel, text, url||Minimum length (number of characters) of |
Read also:How to Include CSS in HTML Pages