HTML <input> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <input> element in HTML is a versatile and fundamental component used to create interactive controls within web forms. It provides a way for users to input data, interact with the page, and submit information to a server or client-side script. Depending on its configuration, it can accept text, passwords, numbers, dates, files, checkboxes, radio buttons, and more, making it one of the most commonly used elements in web development.

When rendered, an <input> element typically appears as a field where users can type or select information. Its appearance can vary significantly depending on the type of input specified. For example, a text input appears as a standard single-line field, a checkbox appears as a small box that can be checked or unchecked, and a file input displays a button for selecting files from the user’s device.

The <input> element is an inline element, meaning it sits inline with other content by default. It is self-closing, which means it does not require a closing tag, and its behavior is defined largely through its type attribute. Beyond data collection, <input> elements can be styled with CSS to match the look and feel of the surrounding content, including borders, backgrounds, text formatting, and interactive states like focus or hover.

In forms, <input> elements are usually paired with <label> elements to provide accessible, user-friendly descriptions, ensuring that all users, including those using assistive technologies, can understand the purpose of the input. The value entered into an <input> element can be retrieved and manipulated with JavaScript, enabling dynamic interactions such as validation, live search, or updating other elements on the page in real-time.

In essence, the <input> element serves as the bridge between the user and the web application, allowing for a wide variety of user interactions, from simple text entry to complex data submissions. Its flexibility and adaptability make it a cornerstone of modern web interfaces.

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

HTML

<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>

Result

Editor

Attributes

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 is 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 information will show you the current browser support for the HTML <input> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.