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:
  • text
  • password
  • checkbox
  • radio
  • submit
  • reset
  • file
  • hidden
  • image
  • button
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
Edge Chrome Firefox Opera Safari
121112.11
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18412.1111

Last updated by CSSPortal on: 30th March 2024