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 type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Attributes
The <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 height attribute for <img>; vertical dimension |
| list | almost all | Value of the id attribute of the <datalist> of autocomplete options |
| max | numeric types | Maximum value |
| maxlength | password, search, tel, text, url | Maximum length (number of characters) of value |
| min | numeric types | Minimum value |
| minlength | password, search, tel, text, url | Minimum length (number of characters) of value |
Read also:How to Include CSS in HTML Pages
