<input>: The HTML Input element - HTML | MDN

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];
When this code has run,
guestName
will be the
HTMLInputElement
for the
guest
field, and
hatSize
the object for the
hat-size
field.
Warning:
Avoid giving form elements a
name
that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.
pattern
Valid for
text
url
tel
email
, and
password
, the
pattern
attribute is used to compile a regular expression that the input's
value
must match in order for the value to pass
constraint validation
. It must be a valid JavaScript regular expression, as used by the
RegExp
type, and as documented in our
guide on regular expressions
. No forward slashes should be specified around the pattern text. When compiling the regular expression:
the pattern will be implicitly wrapped with
^(?:
and
)$
, such that the match is required against the
entire
input value, i.e.,
^(?:)$
the
'v'
flag is specified so that the pattern is treated as a sequence of Unicode code points, instead of as
ASCII
If the
pattern
attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission. If the
multiple
is present, the compiled regular expression is matched against each comma separated value.
Note:
If using the
pattern
attribute, inform the user about the expected format by including explanatory text nearby. You can also include a
title
attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement.
See
Client-side validation
for more information.
placeholder
Valid for
text
url
tel
email
password
, and
number
, the
placeholder
attribute provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text
must not
include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is "First Name", a suitable placeholder might be "e.g., Mustafa".
Note:
The
placeholder
attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See
Labels
for more information.
popovertarget
Turns an

element into a popover control button; takes the ID of the popover element to control as its value. See the
Popover API
landing page for more details. Establishing a relationship between a popover and its invoker button using the
popovertarget
attribute has two additional useful effects:
The browser creates an implicit
aria-details
and
aria-expanded
relationship between popover and invoker, and places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard and assistive technology (AT) users (see also
Popover accessibility features
).
The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using
CSS anchor positioning
. See
Popover anchor positioning
for more details.
popovertargetaction
Specifies the action to be performed on a popover element being controlled by a control

. Possible values are:
"hide"
The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.
"show"
The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.
"toggle"
The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If
popovertargetaction
is omitted,
"toggle"
is the default action that will be performed by the control button.
readonly
A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The
readonly
attribute is supported by the
text
url
tel
email
date
month
week
time
datetime-local
number
, and
password
input types.
See the
HTML attribute:
readonly
for more information.
required
required
is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The
required
attribute is supported by
text
url
tel
email
date
month
week
time
datetime-local
number
password
checkbox
radio
, and
file
inputs.
See
Client-side validation
and the
HTML attribute:
required
for more information.
size
Valid for
email
password
tel
url
, and
text
, the
size
attribute specifies how much of the input is shown. Basically creates same result as setting CSS
width
property with a few specialties. The actual unit of the value depends on the input type. For
password
and
text
, it is a number of characters (or
em
units) with a default value of
20
, and for others, it is pixels (or
px
units). CSS
width
takes precedence over the
size
attribute.
src
Valid for the
image
input button only, the
src
is string specifying the URL of the image file to display to represent the graphical submit button. See the
image
input type.
step
Valid for
date
month
week
time
datetime-local
number
, and
range
, the
step
attribute is a number that specifies the granularity that the value must adhere to. Only values which are a whole number of steps from the step base are valid. The step base is
min
if specified,
value
otherwise, or
if neither is provided (except for
week
, which has a default step base of −259,200,000, representing the start of week
1970-W01
).
If not explicitly included:
step
defaults to 1 for
number
and
range
Each date/time input type has a default
step
value appropriate for the type; see the individual input pages:
date
datetime-local
month
time
, and
week
The value must be a positive number—integer or float—or the special value
any
, which means no stepping is implied, and any value is allowed (barring other constraints, such as
min
and
max
).
For example, if you have

, then any even integer,
10
or greater, is valid. If omitted,

, any integer is valid, but floats (like
4.2
) are not valid, because
step
defaults to
. For
4.2
to be valid,
step
would have had to be set to
any
, 0.1, 0.2, or the
min
value would have had to be a number ending in
.2
, such as

Note:
When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the
:invalid
pseudoclass.
See
Client-side validation
for more information.
switch
Experimental
Non-standard
Valid for
checkbox
input only,
switch
is a Boolean attribute that indicates whether the checkbox input should be rendered as a switch.
Note:
This attribute is still experimental and has limited browser support. The attribute is ignored on unsupported browsers.
tabindex
Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.
title
Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the

element with a
for
attribute set to the form control's
id
attribute. See
Labels
below.
type
A string specifying the type of control to render. For example, to create a checkbox, a value of
checkbox
is used. If omitted (or an unknown value is specified), the input type
text
is used, creating a plaintext input field.
Permitted values are listed in
Input types
above.
value
The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective
HTMLInputElement
object's
value
property. The
value
attribute is always optional, though should be considered mandatory for
checkbox
radio
, and
hidden
width
Valid for the
image
input button only, the
width
is the width of the image file to display to represent the graphical submit button. See the
image
input type.
Non-standard attributes
The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.
Attribute
Description
incremental
Whether or not to send repeated
events to allow updating live search results while the user is still editing the value of the field.
WebKit and Blink only (Safari, Chrome, Opera, etc.).
mozactionhint
Deprecated
A string indicating the type of action that will be taken when the user
presses the
Enter
or
Return
key while editing the
field; this is used to determine an appropriate label for that key on a
virtual keyboard.
Since this attribute is deprecated, use
enterkeyhint
instead.
orient
Sets the orientation of the range slider.
Firefox only
results
The maximum number of items that should be displayed in the drop-down list of previous search queries.
Safari only.
webkitdirectory
A Boolean indicating whether to only allow the user to choose a directory (or directories, if
multiple
is also present)
incremental
Non-standard
The Boolean attribute
incremental
is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the
user agent
to process the input as a live search. As the user edits the value of the field, the user agent sends
events to the
HTMLInputElement
object representing the search box. This allows your code to update the search results in real time as the user edits the search.
If
incremental
is not specified, the
event is only sent when the user explicitly initiates a search (such as by pressing the
Enter
or
Return
key while editing the field).
The
event is rate-limited so that it is not sent more frequently than an implementation-defined interval.
orient
Non-standard
Similar to the -moz-orient non-standard CSS property impacting the

and

elements, the
orient
attribute defines the orientation of the range slider. Values include
horizontal
, meaning the range is rendered horizontally, and
vertical
, where the range is rendered vertically. See
Creating vertical form controls
for a modern approach to creating vertical form controls.
results
Non-standard
The
results
attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the

element's natively-provided drop-down menu of previous search queries.
The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.
webkitdirectory
Non-standard
The Boolean
webkitdirectory
attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See
HTMLInputElement.webkitdirectory
for additional details and examples.
Though originally implemented only for WebKit-based browsers,
webkitdirectory
is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.
Methods
The following methods are provided by the
HTMLInputElement
interface which represents

elements in the DOM. Also available are those methods specified by the parent interfaces,
HTMLElement
Element
Node
, and
EventTarget
checkValidity()
Returns
true
if the element's value passes validity checks; otherwise, returns
false
and fires an
invalid
event at the element.
reportValidity()
Returns
true
if the element's value passes validity checks; otherwise, returns
false
, fires an
invalid
event at the element, and (if the event isn't canceled) reports the problem to the user.
select()
Selects the entire content of the

element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.
setCustomValidity()
Sets a custom message to display if the input element's value isn't valid.
setRangeText()
Sets the contents of the specified range of characters in the input element to a given string. A
selectMode
parameter is available to allow controlling how the existing content is affected.
setSelectionRange()
Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.
showPicker()
Displays the browser picker for the input element that would normally be displayed when the element is selected, but triggered from a button press or other user interaction.
stepDown()
Decrements the value of a numeric input by one, by default, or by the specified number of units.
stepUp()
Increments the value of a numeric input by one or by the specified number of units.
CSS
Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specifically target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.
UI pseudo-classes
Pseudo-classes relevant to the

element:
Pseudo-class
Description
:enabled
Any currently enabled element that can be activated (selected, clicked
on, typed into, etc.) or accept focus and also has a disabled state, in
which it can't be activated or accept focus.
:disabled
Any currently disabled element that has an enabled state, meaning it
otherwise could be activated (selected, clicked on, typed into, etc.) or
accept focus were it not disabled.
:read-only
Element not editable by the user
:read-write
Element that is editable by the user.
:placeholder-shown
Element that is currently displaying
placeholder
text
including

and
<br>elements with the<br>placeholder<br>attribute present that has, as yet, no value.<br>:default<br>Form elements that are the default in a group of related elements.<br>Matches<br>checkbox<br>and<br>radio<br>input types that<br>were checked on page load or render.<br>:checked<br>Matches<br>checkbox<br>and<br>radio<br>input types that<br>are currently checked (and the<br><option><br>in a<br><select><br>that is currently selected).<br>:indeterminate<br>checkbox<br>elements<br>whose indeterminate property is set to true by JavaScript,<br>radio<br>elements, when all<br>radio buttons with the same name value in the form are unchecked, and<br><progress><br>elements in an indeterminate state<br>:valid<br>Form controls that can have constraint validation applied and are<br>currently valid.<br>:invalid<br>Form controls that have constraint validation applied and are currently<br>not valid. Matches a form control whose value doesn't match the<br>constraints set on it by its attributes, such as<br>required<br>pattern<br>step<br>and<br>max<br>:in-range<br>A non-empty input whose current value is within the range limits<br>specified by the<br>min<br>and<br>max<br>attributes and the<br>step<br>:out-of-range<br>A non-empty input whose current value is NOT within the range limits<br>specified by the<br>min<br>and<br>max<br>attributes or<br>does not adhere to the<br>step<br>constraint.<br>:required<br><input><br><select><br>, or<br><textarea><br>element that has the<br>required<br>attribute set on it.<br>Only matches elements that can be required.<br>The attribute included on a non-requirable element will not make for a match.<br>:optional<br><input><br><select><br>, or<br><textarea><br>element that does NOT have the<br>required<br>attribute set on it.<br>Does not match elements that can't be required.<br>:blank<br><input><br>and<br><textarea><br>elements that currently have no value.<br>:user-invalid<br>Similar to<br>:invalid<br>, but is activated on blur. Matches<br>invalid input but only after the user interaction, such as by focusing<br>on the control, leaving the control, or attempting to submit the form<br>containing the invalid control.<br>:open<br><input><br>elements that display a picker for the user to choose a value from (for example<br><input type="color"><br>) — but only when the element is in the open state, that is, when the picker is displayed.<br>Pseudo-classes example<br>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the<br>color<br>and<br>font-weight<br>of the<br><label><br>that comes immediately after a checked input. We haven't applied any styles if the<br>input<br>is not checked.<br><input id="checkboxInput" type="checkbox" /><br><label for="checkboxInput">Toggle the checkbox on and off</label><br>css<br>input:checked + label {<br>color: red;<br>font-weight: bold;<br>Attribute selectors<br>It is possible to target different types of form controls based on their<br>type<br>using<br>attribute selectors<br>. CSS attribute selectors match elements based on either just the presence of an attribute or the value of a given attribute.<br>css<br>/* matches a password input */<br>input[type="password"] {</p> <p>/* matches a form control whose valid values are limited to a range of values */<br>input[min][max] {</p> <p>/* matches a form control with a pattern attribute */<br>input[pattern] {<br>::placeholder<br>By default, the appearance of placeholder text is a translucent or light gray. The<br>::placeholder<br>pseudo-element is the input's<br>placeholder<br>text<br>. It can be styled with a limited subset of CSS properties.<br>css<br>::placeholder {<br>color: blue;<br>Only the subset of CSS properties that apply to the<br>::first-line<br>pseudo-element can be used in a rule using<br>::placeholder<br>in its selector.<br>caret-color<br>A property specific to text entry-related elements is the CSS<br>caret-color<br>property, which lets you set the color used to draw the text input caret:<br>HTML<br>html<br><label for="textInput">Note the red caret:</label><br><input id="textInput" class="custom" size="32" /><br>CSS<br>css<br>input.custom {<br>caret-color: red;<br>font:<br>16px "Helvetica",<br>"Arial",<br>sans-serif;<br>Result<br>field-sizing<br>The<br>field-sizing<br>property enables you to control the sizing behavior of form inputs (i.e., they are given a default preferred size by default.) This property enables you to override the default behavior, allowing form controls to adjust in size to fit their contents.<br>This property is typically used to create form fields that shrinkwrap their content and grow as more text is entered. This works with input types that accept direct text input (for example,<br>text<br>and<br>url<br>), input type<br>file<br>, and<br><textarea><br>elements.<br>object-position and object-fit<br>In certain cases (typically involving non-textual inputs and specialized interfaces), the<br><input><br>element is a<br>replaced element<br>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS<br>object-position<br>and<br>object-fit<br>properties.<br>Styling<br>For more information about adding color to elements in HTML, see:<br>Applying color to HTML elements using CSS<br>Also see:<br>Styling HTML forms<br>Advanced styling for HTML forms<br>and<br>Additional features<br>Labels<br>Labels are needed to associate assistive text with an<br><input><br>. The<br><label><br>element provides explanatory information about a form field that is<br>always<br>appropriate (aside from any layout concerns you have). It's never a bad idea to use a<br><label><br>to explain what should be entered into an<br><input><br>or<br><textarea><br>Associated labels<br>The semantic pairing of<br><input><br>and<br><label><br>elements is useful for assistive technologies such as screen readers. By pairing them using the<br><label><br>'s<br>for<br>attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.<br>It does not suffice to have plain text adjacent to the<br><input><br>element. Rather, usability and accessibility requires the inclusion of either implicit or explicit<br><label><br>html<br><!-- inaccessible --><br><p>Enter your name: <input id="name" type="text" size="30" /></p></p> <p><!-- implicit label --><br><p><br><label>Enter your name: <input id="name" type="text" size="30" /></label><br></p></p> <p><!-- explicit label --><br><p><br><label for="name">Enter your name: </label><br><input id="name" type="text" size="30" /><br></p><br>The first example is inaccessible: no relationship exists between the prompt and the<br><input><br>element.<br>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a<br><label><br>with an<br><input><br>, clicking on either one will focus the<br><input><br>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.<br>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your website—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.<br>Placeholders are not accessible<br>The<br>placeholder<br>attribute lets you specify text that appears within the<br><input><br>element's content area itself when it is empty. The placeholder should never be required to understand your forms. It is not a label, and should not be used as a substitute, because it isn't. The placeholder is used to provide a hint as to what an inputted value should look like, not an explanation or prompt.<br>Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, the placeholder disappears. Browsers with automatic page translation features may skip over attributes when translating, meaning the<br>placeholder<br>may not get translated.<br>Note:<br>Don't use the<br>placeholder<br>attribute if you can avoid it. If you need to label an<br><input><br>element, use the<br><label><br>element.<br>Client-side validation<br>Warning:<br>Client-side validation is useful, but it does<br>not<br>guarantee that the server will receive valid data. If the data must be in a specific format,<br>always<br>verify it also on the server-side, and return a<br>400<br>HTTP response<br>if the format is invalid.<br>In addition to using CSS to style inputs based on the<br>:valid<br>or<br>:invalid<br>UI states based on the current state of each input, as noted in the<br>UI pseudo-classes<br>section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.<br>Some input types and other attributes place limits on what values are valid for a given input. For example,<br><input type="number" min="2" max="10" step="2"><br>means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a<br>rangeUnderflow<br>error if the value is less than 2,<br>rangeOverflow<br>if greater than 10,<br>stepMismatch<br>if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the<br>step<br>attribute), or<br>typeMismatch<br>if the value is not a number.<br>For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the<br>max<br>and<br>min<br>properties to be reversed, which indicates that the range of permitted values starts at<br>min<br>, wraps around to the lowest possible value, then continues on until<br>max<br>is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:<br>html<br><input type="time" min="20:00" max="08:00" name="overnight" /><br>Specific attributes and their values can lead to a specific error<br>ValidityState<br>Validity object errors depend on the<br><input><br>attributes and their values:<br>Attribute<br>Relevant property<br>Description<br>max<br>validityState.rangeOverflow<br>Occurs when the value is greater than the maximum value as defined by<br>the<br>max<br>attribute<br>maxlength<br>validityState.tooLong<br>Occurs when the number of characters is greater than the number allowed by the<br>maxlength<br>property<br>min<br>validityState.rangeUnderflow<br>Occurs when the value is less than the minimum value as defined by the<br>min<br>attribute<br>minlength<br>validityState.tooShort<br>Occurs when the number of characters is less than the number required by the<br>minlength<br>property<br>pattern<br>validityState.patternMismatch<br>Occurs when a pattern attribute is included with a valid regular expression and the<br>value<br>does not match it.<br>required<br>validityState.valueMissing<br>Occurs when the<br>required<br>attribute is present but the value is<br>null<br>or radio or checkbox is not checked.<br>step<br>validityState.stepMismatch<br>The value doesn't match the step increment. Increment default is<br>, so only integers are valid on<br>type="number"<br>is step is not included.<br>step="any"<br>will never throw this error.<br>type<br>validityState.typeMismatch<br>Occurs when the value is not of the correct type, for example an email does not contain an<br>or a url doesn't contain a protocol.<br>If a form control doesn't have the<br>required<br>attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of<br>required<br>, an empty string will not lead to an error.<br>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.<br>In addition to the errors described in the table above, the<br>validityState<br>interface contains the<br>badInput<br>valid<br>, and<br>customError<br>boolean readonly properties. The validity object includes:<br>validityState.valueMissing<br>validityState.typeMismatch<br>validityState.patternMismatch<br>validityState.tooLong<br>validityState.tooShort<br>validityState.rangeUnderflow<br>validityState.rangeOverflow<br>validityState.stepMismatch<br>validityState.badInput<br>validityState.valid<br>validityState.customError<br>For each of these Boolean properties, a value of<br>true<br>indicates that the specified reason validation may have failed is true, with the exception of the<br>valid<br>property, which is<br>true<br>if the element's value obeys all constraints.<br>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or<br>null<br>), the form will be prevented from being submitted. If there is no custom error message, and none of the other properties return true,<br>valid<br>will be true, and the form can be submitted.<br>js<br>function validate(input) {<br>let validityState = input.validity;<br>if (validityState.valueMissing) {<br>input.setCustomValidity("A value is required");<br>} else if (validityState.rangeUnderflow) {<br>input.setCustomValidity("Your value is too low");<br>} else if (validityState.rangeOverflow) {<br>input.setCustomValidity("Your value is too high");<br>} else {<br>input.setCustomValidity("");<br>The last line, setting the custom validity message to the empty string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all the values are valid, until the message is<br>null<br>Custom validation error example<br>If you want to present a custom error message when a field fails to validate, you need to use the<br>Constraint Validation API<br>available on<br><input><br>(and related) elements. Take the following form:<br>html<br><form><br><label for="name">Enter username (upper and lowercase letters): </label><br><input type="text" name="name" id="name" required pattern="[A-Za-z]+" /><br><button>Submit</button><br></form><br>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the<br>pattern<br>If you wanted to instead display custom error messages, you could use JavaScript like the following:<br>js<br>const nameInput = document.querySelector("input");</p> <p>nameInput.addEventListener("input", () => {<br>nameInput.setCustomValidity("");<br>nameInput.checkValidity();<br>});</p> <p>nameInput.addEventListener("invalid", () => {<br>if (nameInput.value === "") {<br>nameInput.setCustomValidity("Enter your username!");<br>} else {<br>nameInput.setCustomValidity(<br>"Usernames can only contain upper and lowercase letters. Try again!",<br>);<br>});<br>The example renders like so:<br>In brief:<br>We check the valid state of the input element every time its value is changed by running the<br>checkValidity()<br>method via the<br>input<br>event handler.<br>If the value is invalid, an<br>invalid<br>event is raised, and the<br>invalid<br>event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an<br>if ()<br>block, and set a custom validity error message.<br>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.<br>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking<br>setCustomValidity()<br>with an empty string value. We therefore do this every time the<br>input<br>event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it currently contains a valid value on submission.<br>Note:<br>Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the<br>server side<br>. Invalid values can still be sent by older browsers or by bad actors.<br>Note:<br>Firefox supported a proprietary error attribute —<br>x-moz-errormessage<br>— for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see<br>Firefox bug 1513890<br>).<br>Localization<br>The allowed inputs for certain<br><input><br>types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.<br>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for<br>type="number"<br>):<br>Try the language specified by a<br>lang<br>xml:lang<br>attribute on the element or any of its parents.<br>Try the language specified by any<br>Content-Language<br>HTTP header. Or,<br>If none specified, use the browser's locale.<br>Labels<br>When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see<br>Labels<br>The following is an example of how to associate the<br><label><br>with an<br><input><br>element in the above style. You need to give the<br><input><br>an<br>id<br>attribute. The<br><label><br>then needs a<br>for<br>attribute whose value is the same as the input's<br>id<br>html<br><label for="peas">Do you like peas?</label><br><input type="checkbox" name="peas" id="peas" /><br>Size<br>Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44<br>CSS pixels<br>is recommended.<br>Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1<br>Target Size and 2.5.5 | Adrian Roselli<br>Quick test: Large touch targets - The A11Y Project<br>Technical summary<br>Content categories<br>Flow content<br>, listed, submittable, resettable, form-associated element,<br>phrasing content<br>. If the<br>type<br>is not<br>hidden<br>, then labelable element, palpable content.<br>Permitted content<br>None; it is a<br>void element<br>Tag omission<br>Must have a start tag and must not have an end tag.<br>Permitted parents<br>Any element that accepts<br>phrasing content<br>Implicit ARIA role<br>type=button<br>button<br>type=checkbox<br>checkbox<br>type=email<br>with no<br>list<br>attribute:<br>textbox<br>with<br>list<br>attribute:<br>combobox<br>type=image<br>button<br>type=number<br>spinbutton<br>type=radio<br>radio<br>type=range<br>slider<br>type=reset<br>button<br>type=search<br>with no<br>list<br>attribute:<br>searchbox<br>with<br>list<br>attribute:<br>combobox<br>type=submit<br>button<br>type=tel<br>with no<br>list<br>attribute:<br>textbox<br>with<br>list<br>attribute:<br>combobox<br>type=text<br>with no<br>list<br>attribute:<br>textbox<br>with<br>list<br>attribute:<br>combobox<br>type=url<br>with no<br>list<br>attribute:<br>textbox<br>with<br>list<br>attribute:<br>combobox<br>type=color|date|datetime-local|file|hidden|month|password|time|week<br>no corresponding role<br>Permitted ARIA roles<br>type=button<br>checkbox<br>combobox<br>link<br>menuitem<br>menuitemcheckbox<br>menuitemradio<br>option<br>radio<br>switch<br>tab<br>type=checkbox<br>button<br>when used<br>with<br>aria-pressed<br>menuitemcheckbox<br>option<br>switch<br>type=image<br>link<br>menuitem<br>menuitemcheckbox<br>menuitemradio<br>radio<br>switch<br>type=radio<br>menuitemradio<br>type=text<br>with no<br>list<br>attribute:<br>combobox<br>searchbox<br>spinbutton<br>type=color|date|datetime-local|email|file|hidden|<br>month|number|password|range|reset|search|submit|tel|url|week<br>or<br>text<br>with<br>list<br>attribute: no<br>role<br>permitted<br>DOM interface<br>HTMLInputElement<br>Specifications<br>Specification<br>HTML<br># the-input-element<br>Browser compatibility<br>See also<br>CSS<br>appearance<br>property<br>Your first HTML form<br>How to structure an HTML form<br>The native form widgets<br>Sending form data<br>Form constraint validation<br>Styling HTML forms<br>Help improve MDN<br>Learn how to contribute<br>This page was last modified on<br>Feb 13, 2026<br>by<br>MDN contributors<br>View this page on GitHub<br>Report a problem with this content</p></div> </div> <div class="detail-actions"> <a href="/search?q=developer.mozilla.org" class="btn">Same domain →</a> <a href="/search?q=%3Cinput%3E%3A%20The%20HTML%20Input%20elemen" class="btn btn-secondary">Similar titles →</a> </div> </article> </main> <footer class="site-footer"> <div class="container"> <p>C U Cyber History — Public Interest Web Archive</p> <p class="footer-small">Preserving fading web memories. Discover history that once existed.</p> </div> </footer> <script id="chat-i18n-en" type="application/json">{"button_label":"Need Help?","placeholder":"Ask us anything...","title":"CUCH Assistant","subtitle":"How can we help you?","send":"Send","close":"Close","folder":"/var/www/cu","greeting":"Hi! Welcome to CUCH.org. How can I help you today? Feel free to ask about our archive, search, or anything else!","error":"Sorry, our service is temporarily unavailable. Please try again later.","banner_text":"Need help? Ask our AI assistant!"}</script> <script src="/static/js/chat-widget.js"></script> </body> </html>