HTML <input> Tag
In this post, we’ll talk about Tag input examples. With a dream that it would help them learn.
The HTML <input> tag is a fundamental form element that is used to collect user input on a web page. The <input> tag can be used to create a wide variety of input fields such as text input, checkbox, radio buttons, email input, date input, password input, and more.
There are four input fields, three text fields, and one submit button on this HTML form:
Example:
Here is an example of the <input> tag in form with some attributes:
Example:
Attributes List
The following are the attribute of the <input> tag:
| Attribute | Value | Overview |
|---|---|---|
| formaction | URL | This URL will be used to process the input control when the form is submitted (for types “submit” and “image“). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | When sending form-data to the server, this determines how the data should be encoded (for types=”submit” and “image”). |
| formmethod | get post | Specify how to use HTTP methods for submitting data to the action URL (for type=”submit” and type=”image”) |
| formnovalidate | formnovalidate | Indicates tag <input> won’t validate those form elements after submission. |
| formtarget | _blank _self _parent _top framename | Provides instructions on where to display the response obtained after submitting the form (only for types “submit” and “image”). |
| accept | file_extension audio/* video/* image/* media_type | Sets a filter for the types of files the user can select from the dialog box for file input (only for type=”file”) |
| alt | text | Provide alternative text for images (just for the “image” type). |
| autocomplete | on off | Indicates that an <input> element needs to have autocomplete activated. |
| autofocus | autofocus | Declares that an <input> element must immediately obtain focus when the page loads. |
| checked | checked | Indicates that the <input> element is to be checked when the page loads (for type=”checkbox” or type=”radio“) |
| name | text | The tag input sets the name of an <input> element. |
| pattern | regexp | Provides a pattern that an <input> element’s value is compared against. |
| placeholder | text | Create a quick tip that explains the possible value of an <input> element. |
| readonly | readonly | Declares that an input field is read-only. |
| min | number date | Provides a minimum value for an <input> element. |
| minlength | number | An element that identifies the minimum number of characters needed in an <input> Tag. |
| multiple | multiple | Allows the user to enter multiple values in an <input> tag. |
| required | required | Ensure every input field has been filled out before submitting the form. |
| size | number | This property defines the width of an <input> element in characters. |
| src | URL | Provide the URL of the image to be displayed as a submit button (for type=”image” only) |
| step | number any | Sets the distance between legal numbers in an input field. |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week | To display the <input> element, indicate the type. |
| value | text | A value is assigned to an input element. |
| width | pixels | Provides an <input> element’s width (for type=”image” only) |
| dirname | inputname.dir | It declares that the text should be sent in the desired direction. |
| height | pixels | Indicates the height of an <input> tag (only for type=”image”) |
| list | datalist_id | Access to an <datalist> element that consists of predefined values for an <input> element. |
| max | number date | Determine the max value for an <input> element. |
| maxlength | number | Limits the max number of characters you can put in an <input> element. |
| disabled | disabled | Declare that an <input> element must be disabled. |
| form | form_id | Indicates which form the <input> element refers to. |
Tag Input Usage
The Tag input <input> designates an input field allowing the user to enter information.
The Tag input <input> is one of the primary essential elements in a form.
The Tag input <input> element has several types of presentation based on the type attribute.
Following is a list of the different input types:
- <input type=”text”> (default value)
- <input type=”search”>
- <input type=”time”>
- <input type=”date”>
- <input type=”datetime-local”>
- <input type=”month”>
- <input type=”week”>
- <input type=”color”>
- <input type=”image”>
- <input type=”email”>
- <input type=”file”>
- <input type=”number”>
- <input type=”tel”>
- <input type=”url”>
- <input type=”password”>
- <input type=”submit”>
- <input type=”hidden”>
- <input type=”button”>
- <input type=”checkbox”>
- <input type=”radio”>
- <input type=”range”>
- <input type=”reset”>
- <input type=”text”>
- <input type=”checkbox”>
- <input type=”radio”>
- <input type=”file”>
and - <input type=”password”>
Attributes
Global
The Tag input <input> can also handle the Global Attributes in HTML.
Event
The Tag input <input> is also capable of accepting the Event Attributes in HTML.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <input> | Yes | Yes | Yes | Yes | Yes |
HTML <input> Tag Key features
Here are some key features of the <input> tag:
- The <input> tag can be used to create various types of input fields, such as text input, checkbox, radio buttons, email input, date input, password input, file upload, and more.
- The <input> tag provides accessibility features such as the ability to associate a label with an input field and the ability to indicate when an input field is required.
- The <input> tag allows for interactivity on a web page by allowing users to input data, select options, and submit forms.
- The <input> tag provides various attributes, such as required and pattern, that can be used to validate user input and ensure that the data entered is of the correct format.
- The <input> tag can be customized using various attributes, allowing you to create input fields that are optimized for different types of data and user interactions.
