HTML <input> Tag
In this tutorial, we will learn about input tag in HTML with the help of examples.
<input> Tag
Input tag <input> is used to specify an input field (area where user can input data).
Note : The <input> tag is mainly used as the children of the <form> tag.
Syntax
<input>
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Tag</title>
</head>
<body>
Name : <input type = "text">
</body>
</html>Output
Name :
Specific Attribute
| Attribute | Value | Description |
|---|---|---|
| accept | Content types | It specifies a comma-seperated list of content types that a server accepts |
| align | Left right top middle bottom |
It defines the alignment of content |
| alt | text | It specifies the alterate text in case the browser/user agent can't render the input control |
| autocomplete | on off |
It enable or disable the autocomplete function of <input> tag |
| autofocus | autofocus | It specifies that <input> element should automatically get focus when the page loads |
| checked | checked | If type = "radio" or type = "checkbox" it will already be selected when the page loads |
| disable | disable | It disable the input control. The button won't accept changes from the user. It also cannot recieve focus and will skipped when tabbing |
| form | form_id | It specifies the URL of the file that will process the input control when the form is submitted |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | It specifies how the form-data should be encoded when submitting it to the serve |
| formmethod | post get |
It defines the HTTP method for sending data to the action URL |
| formvalidate | formvalidate | It defines that the form elements should not be validated when submitted |
| formtarget | _blank _self _parent _top |
It specifies the target where the response will be display that is received after submitting the form |
| height | pixels percentage |
It specifies the height of input field |
| list | datalist_id | It specifies the <datalist> element that contains pre-defined option for an <input> tag |
| max | number | It specifies the maximum number of characters allowed in a text field |
| min | number | It defines the minimum value |
| multiple | multiple | It specifies that a user can enter multiple values |
| name | text | It assign a name to the input control |
| pattern | regexp | It specifies a regular expression that an <input> tag value is checked against |
| placeholder | text | It specifies a short hint that describes the expected value |
| readonly | readonly | It sets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls |
| required | required | It specifies that an input field must be filled out before submitting the form |
| size | number | It specifies the width of the control. If type = "text" or type = "password" this refers to the width in characters. Otherwise it's value is in pixels |
| src | URL | It specifies the URL of the image to display. It is used only when type = "image" |
| step | number | It specifies the legal number intervals for an input field |
| type | button checkboxcolor date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
It specifies the type of control |
| value | text | It specifies the initial value for the control. If type = "checkbox" or type = "radio" one of these attributes is required |
| width | pixels | It specifies the width of the input field |
Global Attribute
Input Tag support all the global attributes of HTML.
Event Attribute
Input Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of <input> tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML <ins> Tag.