HTML <input> Tag
Description
The <input>
HTML element is one of the versatile elements of the form and allows you to create different parts of the interface and provide user interaction. Mainly <input>
is intended for creating text fields, various buttons, radio buttons and check boxes.
The main <input>
attribute that defines the type of element is type. It allows you to specify the following form elements: text field ( text ), password field ( password ), radio button, checkbox , hidden field, button, button for submitting a form, submit button to clear the form ( reset ), a field for sending a file ( file ), a button with an image ( image ), etc. For each element there is a list of attributes that determine its type and characteristics. In addition, more than a dozen new elements have been added to HTML5.
Properties
- Permitted Parents
- Any element that accepts phrasing content
- Content
- None. It is an empty element.
- Start/End Tags
- Start tag: required, End tag: forbidden
Example
<form action="" method="post">
First name: <input type="text" name="first_name">
Last name: <input type="text" name="last_name">
<input type="submit" value="Submit">
<input type="reset" name="Reset">
</form>
Attributes
Attribute | Definition |
---|---|
type |
Specifies the type of control. Possible values:
|
name | Assigns a name to the input control. |
value | Specifies the value of an input element |
size | Specifies the width of an input field |
maxlength | Specifies the maximum length (in characters) of an input field (for type="text" or type="password") |
checked | If type="radio" or type="checkbox" it will already be selected when the page loads. |
src | If type="image", this attribute specifies the location of the image. |
alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the input control. |
accept | Specifies a comma-separated list of content types that the server accepts. |
readonly | 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. |
disabled | Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
placeholder | Specifies a short hint that describes the expected value of a text area |
Global Attributes
The <input>
tag also supports the Global Attributes in HTML5
Event Attributes
The <input>
tag also supports the Event Attributes in HTML5
Browser Support
The following table will show you the current browser support for the HTML <input>
tag.
Desktop | |||||
12 | 1 | 1 | 12.1 | 1 |
Tablets / Mobile | |||||
18 | 4 | 12.1 | 1 | 1 | 1 |
Last updated by CSSPortal on: 30th March 2024