Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

<input>: The HTML Input element

BaselineWidely available *

The<input>HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device anduser agent. The<input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

Try it

<label for="name">Name (4 to 8 characters):</label><input  type="text"   name="name"  required  minlength="4"  maxlength="8"  size="10" />
label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

<input> types

How an<input> works varies considerably depending on the value of itstype attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted istext.

The available types are as follows:

TypeDescriptionBasic Examples
button A push button with no default behavior displaying the value of thevalue attribute, empty by default.
<input type="button" name="button" value="Button" />
checkboxA check box allowing single values to be selected/deselected.
<input type="checkbox" name="checkbox"/>
color A control for specifying a color; opening a color picker when active in supporting browsers.
<input type="color" name="color"/>
date A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
<input type="date" name="date"/>
datetime-local A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.
<input type="datetime-local" name="datetime-local"/>
email A field for editing an email address. Looks like atext input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<input type="email" name="email"/>
file A control that lets the user select a file. Use theaccept attribute to define the types of files that the control can select.
<input type="file" accept="image/*, text/*" name="file"/>
hidden A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden!
<input name="userId" type="hidden" value="abc123">
image A graphicalsubmit button. Displays an image defined by thesrc attribute. Thealt attribute displays if the imagesrc is missing.
<input type="image" name="image" src="" alt="image input"/>
monthA control for entering a month and year, with no time zone.
<input type="month" name="month"/>
number A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.
<input type="number" name="number"/>
password A single-line text field whose value is obscured. Will alert user if site is not secure.
<input type="password" name="password"/>
radio A radio button, allowing a single value to be selected out of multiple choices with the samename value.
<input type="radio" name="radio"/>
range A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunctionmin andmax to define the range of acceptable values.
<input type="range" name="range" min="0" max="25"/>
reset A button that resets the contents of the form to default values. Not recommended.
<input type="reset" name="reset"/>
search A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.
<input type="search" name="search"/>
submitA button that submits the form.
<input type="submit" name="submit"/>
tel A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.
<input type="tel" name="tel"/>
text The default value. A single-line text field. Line-breaks are automatically removed from the input value.
<input type="text" name="text"/>
timeA control for entering a time value with no time zone.
<input type="time" name="time"/>
url A field for entering a URL. Looks like atext input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<input type="url" name="url"/>
week A control for entering a date consisting of a week-year number and a week number with no time zone.
<input type="week" name="week"/>
Obsolete values
datetimeDeprecated A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.
<input type="datetime" name="datetime"/>

Attributes

The<input> element is so powerful because of its attributes; thetype attribute, described with examples above, being the most important. Since every<input> element, regardless of type, is based on theHTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.

Attributes for the<input> element include theglobal HTML attributes and additionally:

AttributeType(s)Description
acceptfileHint for expected file type in file upload controls
altimagealt attribute for the image type. Required for accessibility
autocapitalizeall excepturl,email, andpasswordControls automatic capitalization in inputted text.
autocompleteall exceptcheckbox,radio, and buttonsHint for form autofill feature
capturefileMedia capture input method in file upload controls
checkedcheckbox,radioWhether the command or control is checked
dirnamehidden,text,search,url,tel,emailName of form field to use for sending the element's directionality in form submission
disabledallWhether the form control is disabled
formallAssociates the control with a form element
formactionimage,submitURL to use for form submission
formenctypeimage,submitForm data set encoding type to use for form submission
formmethodimage,submitHTTP method to use for form submission
formnovalidateimage,submitBypass form control validation for form submission
formtargetimage,submitBrowsing context for form submission
heightimageSame as height attribute for<img>; vertical dimension
listall excepthidden,password,checkbox,radio, and buttonsValue of the id attribute of the<datalist> of autocomplete options
maxdate,month,week,time,datetime-local,number,rangeMaximum value
maxlengthtext,search,url,tel,email,passwordMaximum length (number of characters) ofvalue
mindate,month,week,time,datetime-local,number,rangeMinimum value
minlengthtext,search,url,tel,email,passwordMinimum length (number of characters) ofvalue
multipleemail,fileBoolean. Whether to allow multiple values
nameallName of the form control. Submitted with the form as part of a name/value pair
patterntext,search,url,tel,email,passwordPattern thevalue must match to be valid
placeholdertext,search,url,tel,email,password,numberText that appears in the form control when it has no value set
popovertargetbuttonDesignates an<input type="button"> as a control for a popover element
popovertargetactionbuttonSpecifies the action that a popover control should perform
readonlyall excepthidden,range,color,checkbox,radio, and buttonsBoolean. The value is not editable
requiredall excepthidden,range,color, and buttonsBoolean. A value is required or must be checked for the form to be submittable
sizetext,search,url,tel,email,passwordSize of the control
srcimageSame assrc attribute for<img>; address of image resource
stepdate,month,week,time,datetime-local,number,rangeIncremental values that are valid
typeallType of form control
valueall exceptimageThe value of the control. When specified in the HTML, corresponds to the initial value
widthimageSame aswidth attribute for<img>

A few additional non-standard attributes are listed following the descriptions of the standard attributes.

Individual attributes

accept

Valid for thefile input type only, theaccept attribute defines which file types are selectable in afile upload control. See thefile input type.

alt

Valid for theimage button only, thealt attribute provides alternative text for the image, displaying the value of the attribute if the imagesrc is missing or otherwise fails to load. See theimage input type.

autocapitalize

Controls whether inputted text is automatically capitalized and, if so, in what manner. See theautocapitalize global attribute page for more information.

autocomplete

(Not a Boolean attribute!) Theautocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocompleteemail addresses in an email input field. Seeautocomplete for permitted values.

Theautocomplete attribute is valid onhidden,text,search,url,tel,email,date,month,week,time,datetime-local,number,range,color, andpassword. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types exceptcheckbox,radio,file, or any of the button types.

See theautocomplete attribute for additional information, including information on password security and howautocomplete is slightly different forhidden than for other input types.

autofocus

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the<dialog> containing the element has been displayed).

Note:An element with theautofocus attribute may gain focus before theDOMContentLoaded event is fired.

No more than one element in the document may have theautofocus attribute. If put on more than one element, the first one with the attribute receives focus.

Theautofocus attribute cannot be used on inputs of typehidden, since hidden inputs cannot be focused.

Warning:Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. Whenautofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying theautofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

capture

Introduced in the HTML Media Capture specification and valid for thefile input type only, thecapture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload withfile upload control in supporting scenarios. See thefile input type.

checked

Valid for bothradio andcheckbox types,checked is a Boolean attribute. If present on aradio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on acheckbox type, it indicates that the checkbox is checked by default (when the page loads). It doesnot indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only theHTMLInputElement'schecked IDL attribute is updated.)

Note:Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currentlychecked. If they are, the name and the value(s) of the checked controls are submitted.

For example, if a checkbox whosename isfruit has avalue ofcherry, and the checkbox is checked, the form data submitted will includefruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The defaultvalue for checkboxes and radio buttons ison.

dirname

Valid forhidden,text,search,url,tel, andemail input types, thedirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being thename andvalue, and the second being the value of thedirname attribute as the name, with a value ofltr orrtl as set by the browser.

html
<form action="page.html" method="post">  <label>    Fruit:    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />  </label>  <input type="submit" /></form><!-- page.html?fruit=cherry&fruit-dir=ltr -->

When the form above is submitted, the input cause both thename /value pair offruit=cherry and thedirname / direction pair offruit-dir=ltr to be sent.For more information, see thedirname attribute.

disabled

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

Specifically, disabled inputs do not receive theclick event, and disabled inputs are not submitted with the form.

Note:Although not required by the specification, Firefox will by defaultpersist the dynamic disabled state of an<input> across page loads. Use theautocomplete attribute to control this feature.

form

A string specifying the<form> element with which the input is associated (that is, itsform owner). This string's value, if present, must match theid of a<form> element in the same document. If this attribute isn't specified, the<input> element is associated with the nearest containing form, if any.

Theform attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

Note:An input can only be associated with one form.

formaction

Valid for theimage andsubmit input types only. See thesubmit input type for more information.

formenctype

Valid for theimage andsubmit input types only. See thesubmit input type for more information.

formmethod

Valid for theimage andsubmit input types only. See thesubmit input type for more information.

formnovalidate

Valid for theimage andsubmit input types only. See thesubmit input type for more information.

formtarget

Valid for theimage andsubmit input types only. See thesubmit input type for more information.

height

Valid for theimage input button only, theheight is the height of the image file to display to represent the graphical submit button. See theimage input type.

id

Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the<label>'sfor attribute to link the label with the form control. See<label>.

inputmode

Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values includenone,text,tel,url,email,numeric,decimal, andsearch.

list

The value given to thelist attribute should be theid of a<datalist> element located in the same document. The<datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with thetype are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

It is valid ontext,search,url,tel,email,date,month,week,time,datetime-local,number,range, andcolor.

Per the specifications, thelist attribute is not supported by thehidden,password,checkbox,radio,file, or any of the button types.

Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even an input that opens like a<select> but allows for non-listed values. Check out thebrowser compatibility table for the other input types.

See the<datalist> element.

max

Valid fordate,month,week,time,datetime-local,number, andrange, it defines the greatest value in the range of permitted values. If thevalue entered into the element exceeds this, the element failsconstraint validation. If the value of themax attribute isn't a number, then the element has no maximum value.

There is a special case: if the data type is periodic (such as for dates or times), the value ofmax may be lower than the value ofmin, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

maxlength

Valid fortext,search,url,tel,email, andpassword, it defines the maximum string length (measured inUTF-16 code units) that the user can enter into the field. This must be an integer value of 0 or higher. If nomaxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value ofminlength.

The input will failconstraint validation if the length of the text entered into the field is greater thanmaxlengthUTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by themaxlength attribute. Constraint validation is only applied when the value is changed by the user. SeeClient-side validation for more information.

min

Valid fordate,month,week,time,datetime-local,number, andrange, it defines the most negative value in the range of permitted values. If thevalue entered into the element is less than this, the element failsconstraint validation. If the value of themin attribute isn't a number, then the element has no minimum value.

This value must be less than or equal to the value of themax attribute. If themin attribute is present but is not specified or is invalid, nomin value is applied. If themin attribute is valid and a non-empty value is less than the minimum allowed by themin attribute, constraint validation will prevent form submission. SeeClient-side validation for more information.

There is a special case: if the data type is periodic (such as for dates or times), the value ofmax may be lower than the value ofmin, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

minlength

Valid fortext,search,url,tel,email, andpassword, it defines the minimum string length (measured inUTF-16 code units) that the user can enter into the entry field. This must be a non-negative integer value smaller than or equal to the value specified bymaxlength. If nominlength is specified, or an invalid value is specified, the input has no minimum length.

The input will failconstraint validation if the length of the text entered into the field is fewer thanminlengthUTF-16 code units long, preventing form submission. Constraint validation is only applied when the value is changed by the user. SeeClient-side validation for more information.

multiple

The Booleanmultiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with thefile input. See theemail andfile input type.

name

A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.

Consider thename a required attribute (even though it's not). If an input has noname specified, orname is empty, the input's value is not submitted with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)

There are two special cases:

  1. _charset_ : If used as the name of an<input> element of typehidden, the input'svalue is automatically set by theuser agent to the character encoding being used to submit the form.
  2. isindex: For historical reasons, the nameisindex is not allowed.

Thename attribute creates a unique behavior for radio buttons.

Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,

When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.

Once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.

When an input element is given aname, that name becomes a property of the owning form element'sHTMLFormElement.elements property. If you have an input whosename is set toguest and another whosename ishat-size, the following code can be used:

js
let form = document.querySelector("form");let guestName = form.elements.guest;let hatSize = form.elements["hat-size"];

When this code has run,guestName will be theHTMLInputElement for theguest field, andhatSize the object for thehat-size field.

Warning:Avoid giving form elements aname 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 fortext,search,url,tel,email, andpassword, thepattern attribute is used to compile a regular expression that the input'svalue must match in order for the value to passconstraint validation. It must be a valid JavaScript regular expression, as used by theRegExp type, and as documented in ourguide on regular expressions. No forward slashes should be specified around the pattern text. When compiling the regular expression:

  1. the pattern will be implicitly wrapped with^(?: and)$, such that the match is required against theentire input value, i.e.,^(?:<pattern>)$.
  2. the'v' flag is specified so that the pattern is treated as a sequence of Unicode code points, instead of asASCII.

If thepattern 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 themultiple is present, the compiled regular expression is matched against each comma separated value.

Note:If using thepattern attribute, inform the user about the expected format by including explanatory text nearby. You can also include atitle 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.

SeeClient-side validation for more information.

placeholder

Valid fortext,search,url,tel,email,password, andnumber, theplaceholder 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 textmust 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:Theplaceholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. SeeLabels for more information.

popovertarget

Turns an<input type="button"> element into a popover control button; takes the ID of the popover element to control as its value. See thePopover API landing page for more details. Establishing a relationship between a popover and its invoker button using thepopovertarget attribute has two additional useful effects:

  • The browser creates an implicitaria-details andaria-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 alsoPopover accessibility features).
  • The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls usingCSS anchor positioning. SeePopover anchor positioning for more details.
popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control<input type="button">. 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. Ifpopovertargetaction 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. Thereadonly attribute is supported by thetext,search,url,tel,email,date,month,week,time,datetime-local,number, andpassword input types.

See theHTML 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. Therequired attribute is supported bytext,search,url,tel,email,date,month,week,time,datetime-local,number,password,checkbox,radio, andfile inputs.

SeeClient-side validation and theHTML attribute:required for more information.

size

Valid foremail,password,tel,url, andtext, thesize attribute specifies how much of the input is shown. Basically creates same result as setting CSSwidth property with a few specialties. The actual unit of the value depends on the input type. Forpassword andtext, it is a number of characters (orem units) with a default value of20, and for others, it is pixels (orpx units). CSSwidth takes precedence over thesize attribute.

src

Valid for theimage input button only, thesrc is string specifying the URL of the image file to display to represent the graphical submit button. See theimage input type.

step

Valid fordate,month,week,time,datetime-local,number, andrange, thestep attribute is a number that specifies the granularity that the value must adhere to.

If not explicitly included:

  • step defaults to 1 fornumber andrange.
  • Each date/time input type has a defaultstep value appropriate for the type; see the individual input pages:date,datetime-local,month,time, andweek.

The value must be a positive number—integer or float—or the special valueany, which means no stepping is implied, and any value is allowed (barring other constraints, such asmin andmax).

Ifany is not explicitly set, valid values for thenumber, date/time input types, andrange input types are equal to the basis for stepping — themin value and increments of the step value, up to themax value, if specified.

For example, if you have<input type="number" min="10" step="2">, then any even integer,10 or greater, is valid. If omitted,<input type="number">, any integer is valid, but floats (like4.2) are not valid, becausestep defaults to1. For4.2 to be valid,step would have had to be set toany, 0.1, 0.2, or themin value would have had to be a number ending in.2, such as<input type="number" min="-5.2">.

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.

SeeClient-side validation for more information.

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<label> element with afor attribute set to the form control'sid attribute. SeeLabels below.

type

A string specifying the type of control to render. For example, to create a checkbox, a value ofcheckbox is used. If omitted (or an unknown value is specified), the input typetext is used, creating a plaintext input field.

Permitted values are listed inInput 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 respectiveHTMLInputElement object'svalue property. Thevalue attribute is always optional, though should be considered mandatory forcheckbox,radio, andhidden.

width

Valid for theimage input button only, thewidth is the width of the image file to display to represent the graphical submit button. See theimage 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.

AttributeDescription
incremental Whether or not to send repeatedsearch 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.).
mozactionhintDeprecated

A string indicating the type of action that will be taken when the user presses theEnter orReturn 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, useenterkeyhint 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, ifmultiple is also present)
incrementalNon-standard

The Boolean attributeincremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells theuser agent to process the input as a live search. As the user edits the value of the field, the user agent sendssearch events to theHTMLInputElement object representing the search box. This allows your code to update the search results in real time as the user edits the search.

Ifincremental is not specified, thesearch event is only sent when the user explicitly initiates a search (such as by pressing theEnter orReturn key while editing the field).

Thesearch event is rate-limited so that it is not sent more frequently than an implementation-defined interval.

orientNon-standard

Similar to the -moz-orient non-standard CSS property impacting the<progress> and<meter> elements, theorient attribute defines the orientation of the range slider. Values includehorizontal, meaning the range is rendered horizontally, andvertical, where the range is rendered vertically. SeeCreating vertical form controls for a modern approach to creating vertical form controls.

resultsNon-standard

Theresults attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the<input> 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.

webkitdirectoryNon-standard

The Booleanwebkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. SeeHTMLInputElement.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 theHTMLInputElement interface which represents<input> elements in the DOM. Also available are those methods specified by the parent interfaces,HTMLElement,Element,Node, andEventTarget.

checkValidity()

Returnstrue if the element's value passes validity checks; otherwise, returnsfalse and fires aninvalid event at the element.

reportValidity()

Returnstrue if the element's value passes validity checks; otherwise, returnsfalse, fires aninvalid event at the element, and (if the event isn't canceled) reports the problem to the user.

select()

Selects the entire content of the<input> 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. AselectMode 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<input> element:
Pseudo-classDescription
: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-onlyElement not editable by the user
:read-writeElement that is editable by the user.
:placeholder-shown Element that is currently displayingplaceholder text, including<input> and<textarea> elements with theplaceholder attribute present that has, as yet, no value.
:default Form elements that are the default in a group of related elements. Matchescheckbox andradio input types that were checked on page load or render.
:checked Matchescheckbox andradio input types that are currently checked (and the<option> in a<select> that is currently selected).
:indeterminatecheckbox elements whose indeterminate property is set to true by JavaScript,radio elements, when all radio buttons with the same name value in the form are unchecked, and<progress> elements in an indeterminate state
:valid Form controls that can have constraint validation applied and are currently valid.
:invalid Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by its attributes, such asrequired,pattern,step andmax.
:in-range A non-empty input whose current value is within the range limits specified by themin andmax attributes and thestep.
:out-of-range A non-empty input whose current value is NOT within the range limits specified by themin andmax attributes or does not adhere to thestep constraint.
:required<input>,<select>, or<textarea> element that has therequired attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.
:optional<input>,<select>, or<textarea> element that does NOT have therequired attribute set on it. Does not match elements that can't be required.
:blank<input> and<textarea> elements that currently have no value.
:user-invalid Similar to:invalid, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.
:open<input> elements that display a picker for the user to choose a value from (for example<input type="color">) — but only when the element is in the open state, that is, when the picker is displayed.

Pseudo-classes example

We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling thecolor andfont-weight of the<label> that comes immediately after a checked input. We haven't applied any styles if theinput is not checked.

<input type="checkbox" /><label for="checkboxInput">Toggle the checkbox on and off</label>
css
input:checked + label {  color: red;  font-weight: bold;}

Attribute selectors

It is possible to target different types of form controls based on theirtype usingattribute selectors. CSS attribute selectors match elements based on either just the presence of an attribute or the value of a given attribute.

css
/* matches a password input */input[type="password"] {}/* matches a form control whose valid values are limited to a range of values*/input[min][max] {}/* matches a form control with a pattern attribute */input[pattern] {}

::placeholder

By default, the appearance of placeholder text is a translucent or light gray. The::placeholder pseudo-element is the input'splaceholder text. It can be styled with a limited subset of CSS properties.

css
::placeholder {  color: blue;}

Only the subset of CSS properties that apply to the::first-line pseudo-element can be used in a rule using::placeholder in its selector.

appearance

Theappearance property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with thenone value.

You could make a<div> look like a radio button withdiv {appearance: radio;} or a radio look like a checkbox with[type="radio"] {appearance: checkbox;}, but don't.

Settingappearance: none removes platform native borders, but not functionality.

caret-color

A property specific to text entry-related elements is the CSScaret-color property, which lets you set the color used to draw the text input caret:

HTML

html
<label for="textInput">Note the red caret:</label><input size="32" />

CSS

css
input.custom {  caret-color: red;  font:    16px "Helvetica",    "Arial",    sans-serif;}

Result

field-sizing

Thefield-sizing 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.

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,text andurl), input typefile, and<textarea> elements.

object-position and object-fit

In certain cases (typically involving non-textual inputs and specialized interfaces), the<input> element is areplaced element. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSSobject-position andobject-fit properties.

Styling

For more information about adding color to elements in HTML, see:

Also see:

Additional features

Labels

Labels are needed to associate assistive text with an<input>. The<label> element provides explanatory information about a form field that isalways appropriate (aside from any layout concerns you have). It's never a bad idea to use a<label> to explain what should be entered into an<input> or<textarea>.

Associated labels

The semantic pairing of<input> and<label> elements is useful for assistive technologies such as screen readers. By pairing them using the<label>'sfor attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.

It does not suffice to have plain text adjacent to the<input> element. Rather, usability and accessibility requires the inclusion of either implicit or explicit<label>:

html
<!-- inaccessible --><p>Enter your name: <input type="text" size="30" /></p><!-- implicit label --><p>  <label>Enter your name: <input type="text" size="30" /></label></p><!-- explicit label --><p>  <label for="name">Enter your name: </label>  <input type="text" size="30" /></p>

The first example is inaccessible: no relationship exists between the prompt and the<input> element.

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<label> with an<input>, clicking on either one will focus the<input>. 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.

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.

Placeholders are not accessible

Theplaceholder attribute lets you specify text that appears within the<input> 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.

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 theplaceholder may not get translated.

Note:Don't use theplaceholder attribute if you can avoid it. If you need to label an<input> element, use the<label> element.

Client-side validation

Warning:Client-side validation is useful, but it doesnot guarantee that the server will receive valid data. If the data must be in a specific format,always verify it also on the server-side, and return a400 HTTP response if the format is invalid.

In addition to using CSS to style inputs based on the:valid or:invalid UI states based on the current state of each input, as noted in theUI pseudo-classes 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.

Some input types and other attributes place limits on what values are valid for a given input. For example,<input type="number" min="2" max="10" step="2"> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including arangeUnderflow error if the value is less than 2,rangeOverflow if greater than 10,stepMismatch if the value is a number between 2 and 10, but not an even integer (does not match the requirements of thestep attribute), ortypeMismatch if the value is not a number.

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 themax andmin properties to be reversed, which indicates that the range of permitted values starts atmin, wraps around to the lowest possible value, then continues on untilmax 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:

html
<input type="time" min="20:00" max="08:00" name="overnight" />

Specific attributes and their values can lead to a specific errorValidityState:

Validity object errors depend on the<input> attributes and their values:
AttributeRelevant propertyDescription
maxvalidityState.rangeOverflow Occurs when the value is greater than the maximum value as defined by themax attribute
maxlengthvalidityState.tooLong Occurs when the number of characters is greater than the number allowed by themaxlength property
minvalidityState.rangeUnderflow Occurs when the value is less than the minimum value as defined by themin attribute
minlengthvalidityState.tooShort Occurs when the number of characters is less than the number required by theminlength property
patternvalidityState.patternMismatch Occurs when a pattern attribute is included with a valid regular expression and thevalue does not match it.
requiredvalidityState.valueMissing Occurs when therequired attribute is present but the value isnull or radio or checkbox is not checked.
stepvalidityState.stepMismatch The value doesn't match the step increment. Increment default is1, so only integers are valid ontype="number" is step is not included.step="any" will never throw this error.
typevalidityState.typeMismatch Occurs when the value is not of the correct type, for example an email does not contain an@ or a url doesn't contain a protocol.

If a form control doesn't have therequired attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception ofrequired, an empty string will not lead to an error.

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.

In addition to the errors described in the table above, thevalidityState interface contains thebadInput,valid, andcustomError boolean readonly properties. The validity object includes:

For each of these Boolean properties, a value oftrue indicates that the specified reason validation may have failed is true, with the exception of thevalid property, which istrue if the element's value obeys all constraints.

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 ornull), the form will be prevented from being submitted. If there is no custom error message, and none of the other properties return true,valid will be true, and the form can be submitted.

js
function validate(input) {  let validityState_object = input.validity;  if (validityState_object.valueMissing) {    input.setCustomValidity("A value is required");  } else if (validityState_object.rangeUnderflow) {    input.setCustomValidity("Your value is too low");  } else if (validityState_object.rangeOverflow) {    input.setCustomValidity("Your value is too high");  } else {    input.setCustomValidity("");  }}

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

Custom validation error example

If you want to present a custom error message when a field fails to validate, you need to use theConstraint Validation API available on<input> (and related) elements. Take the following form:

html
<form>  <label for="name">Enter username (upper and lowercase letters): </label>  <input type="text" name="name" required pattern="[A-Za-z]+" />  <button>Submit</button></form>

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

If you wanted to instead display custom error messages, you could use JavaScript like the following:

js
const nameInput = document.querySelector("input");nameInput.addEventListener("input", () => {  nameInput.setCustomValidity("");  nameInput.checkValidity();});nameInput.addEventListener("invalid", () => {  if (nameInput.value === "") {    nameInput.setCustomValidity("Enter your username!");  } else {    nameInput.setCustomValidity(      "Usernames can only contain upper and lowercase letters. Try again!",    );  }});

The example renders like so:

In brief:

  • We check the valid state of the input element every time its value is changed by running thecheckValidity() method via theinput event handler.
  • If the value is invalid, aninvalid event is raised, and theinvalid 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 anif () block, and set a custom validity error message.
  • As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.
  • If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invokingsetCustomValidity() with an empty string value. We therefore do this every time theinput 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.

Note:Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on theserver side. Invalid values can still be sent by older browsers or by bad actors.

Note:Firefox supported a proprietary error attribute —x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (seeFirefox bug 1513890).

Localization

The allowed inputs for certain<input> 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.

Firefox uses the following heuristics to determine the locale to validate the user's input (at least fortype="number"):

  • Try the language specified by alang/xml:lang attribute on the element or any of its parents.
  • Try the language specified by anyContent-Language HTTP header. Or,
  • If none specified, use the browser's locale.

Accessibility

Labels

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

The following is an example of how to associate the<label> with an<input> element in the above style. You need to give the<input> anid attribute. The<label> then needs afor attribute whose value is the same as the input'sid.

html
<label for="peas">Do you like peas?</label><input type="checkbox" name="peas" />

Size

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×44CSS pixels is recommended.

Technical summary

Content categoriesFlow content, listed, submittable, resettable, form-associated element,phrasing content. If thetype is nothidden, then labelable element, palpable content.
Permitted contentNone; it is avoid element.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parents Any element that acceptsphrasing content.
Implicit ARIA role
Permitted ARIA roles
DOM interfaceHTMLInputElement

Specifications

Specification
HTML
# the-input-element

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp