HTML <input> Element

The HTML <input> element creates interactive form controls that allow users to enter or select information. The type of control is determined by the type attribute and can include text fields, email fields, numbers, dates, checkboxes, radio buttons, file selectors, and other specialized controls.

Syntax

<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name">

The <input> element is a void element, so it does not have a closing tag and cannot contain content. The type attribute determines the kind of control, while attributes such as name, value, and required control how the input behaves and how its data is submitted.

Attributes

The <input> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`accept`	Provides a hint about the types of files that can be selected by a file input.
`alt`	Provides alternative text for an image used with `type="image"`.
`autocomplete`	Indicates whether and how the browser may automatically complete the input value.
`checked`	Specifies that a checkbox or radio button is initially selected.
`dirname`	Specifies a field name used to submit the text direction of the input value.
`disabled`	Prevents the user from interacting with the control and prevents its value from being submitted with the form.
`form`	Associates the input with a `<form>` element by its `id`, even when the input is not nested inside that form.
`formaction`	Specifies the URL used to submit a form when the input acts as a submit control.
`formenctype`	Specifies how submitted form data is encoded when the input acts as a submit control.
`formmethod`	Specifies the HTTP method used when the input submits the form.
`formnovalidate`	Specifies that form validation should be skipped when the input submits the form.
`formtarget`	Specifies where the response should be displayed after the input submits the form.
`height`	Specifies the height of an image input.
`list`	Associates the input with a `<datalist>` that provides suggested values.
`max`	Specifies the maximum permitted value for applicable input types.
`maxlength`	Specifies the maximum number of characters the user can enter in applicable text-based inputs.
`min`	Specifies the minimum permitted value for applicable input types.
`minlength`	Specifies the minimum number of characters required for applicable text-based inputs.
`multiple`	Allows more than one value to be entered or selected for supported input types.
`name`	Provides the name used to identify the input's value when form data is submitted.
`pattern`	Specifies a pattern that the entered value must match for applicable input types.
`placeholder`	Provides a short hint showing the expected type or format of a value.
`popovertarget`	Associates an applicable button-type input with a popover element that it can control.
`popovertargetaction`	Specifies whether an associated popover should be shown, hidden, or toggled.
`readonly`	Prevents the user from changing the value of supported input types while allowing the value to be submitted.
`required`	Indicates that the user must provide a valid value before the form can be submitted.
`size`	Specifies the approximate visible width of applicable text-based inputs.
`src`	Specifies the image URL used with `type="image"`.
`step`	Specifies the permitted interval between values for applicable numeric and date-related input types.
`type`	Determines the type of form control created by the `<input>` element.
`value`	Specifies the initial value or submitted value of the input, depending on the input type.
`width`	Specifies the width of an image input.

Example

This example demonstrates several common <input> types. Enter or select values and submit the form to see the information returned by the example response page.

Play in Editor

Usage Notes

The type attribute determines which control the browser creates. Common values include text, email, tel, number, date, checkbox, radio, file, color, range, submit, and reset.

If the type attribute is omitted or contains an unsupported value, the browser generally treats the control as type="text".

Form controls that need to send a value when a form is submitted generally require a name attribute. The submitted data associates that name with the control's value.

Use a <label> with its for attribute matching the input's id to provide a clear description and a larger clickable area for many controls.

Attributes do not apply equally to every input type. For example, checked applies to checkbox and radio controls, while min, max, and step apply only to input types that support ranges or ordered values.

Browser validation features such as required, pattern, min, and max can help users correct input before submission, but server-side processing must still validate submitted data.

Accessibility

Provide a clear label for each input whenever a visible label is appropriate. A common method is to use a <label> element whose for attribute matches the input's id.

Do not use a placeholder as the only label for an input. Placeholder text disappears as users enter information and may not provide a reliable accessible name for the control.

Group related radio buttons and checkboxes with <fieldset> and <legend> when the controls share a common question or description.

Required fields, expected formats, validation errors, and other instructions should be communicated clearly and should not depend only on color or visual styling.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <input> Element .

Support for individual input types and their user interfaces can vary between browsers and operating systems, even though the <input> element itself is widely supported.

<form> - Represents a form used to collect and submit user input.

<label> - Provides a descriptive label for a form control.

<button> - Creates a clickable button for submitting, resetting, or performing other actions.

<datalist> - Provides predefined suggestions for compatible input controls.

<fieldset> - Groups related form controls and labels.

<textarea> - Creates a multi-line text entry control.

Specifications

HTML Living Standard: The <input> Element

HTML <input> Element