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
* You will receive the latest news and updates on your favorite celebrities!
Business Blog Write For Us | Submit Your Guest Post
Digital Treed is offering an opportunity to submit a guest post. We are looking for passionate content writers and guest bloggers to write for us following niche Finance, Business, Tech News, Social media Marketing, Online Marketing, Digital Marketing, Hardware, Apps / Reviews, SEO, Marketing, Business Blogging, Startup and Entrepreneurship