<input>
The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.
Overview
The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
| The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. | 1 | 12 | 1 | 1 | 18 | 1 |
| Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. See the input/image input type. | 1 | 12 | 1 | 1 | 18 | 1 |
| Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox… | 1 | 12 | 1 | 1 | 18 | 1 |
| The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. | 1 | 12 | 1 | 1 | 18 | 1 |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Valid for the image and submit input types only. See the input/submit input type for more information. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| Valid for the image and submit input types only. See the input/submit input type for more information. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| Valid for the image and submit input types only. See the input/submit input type for more information. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| Valid for the image and submit input types only. See the input/submit input type for more information. | 4 | 12 | 4 | 5 | 18 | 4 |
| Valid for the image and submit input types only. See the input/submit input type for more information. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| The maxlength attribute defines the maximum string length that the user can enter into an input or textarea. The attribute must have an integer value of 0 or higher. | 1 | 12 | 1 | 1 | 18 | 1 |
| The minlength attribute defines the minimum string length that the user can enter into an input or textarea. The attribute must have an integer value of 0 or higher. | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
| 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. | 1 | 12 | 1 | 1 | 18 | 1 |
| The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only ValidityState.patternMismatch property will be true. | 4 | 12 | 4 | 5 | 18 | 4 |
| By default, the appearance of placeholder text is a translucent or light gray. The ::placeholder pseudo-element is the input's placeholder text. It can be styled with a limited subset of CSS properties. | 3 | 12 | 4 | 4 | 18 | 3.2 |
| The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control. | 1 | 12 | 1 | 1 | 18 | 1 |
| 4 | 12 | 4 | 5 | 18 | 4 | |
| The size attribute defines the width of the input and the height of the select element. For an input element, it defines the number of characters that the user agent allows the user to see when editing the value. For a select element, it defines the number of options that should be shown to the user. This must be a valid non-negative integer greater than… | 1 | 12 | 1 | 1 | 18 | 1 |
| 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 input/image input type. | 1 | 12 | 1 | 1 | 18 | 1 |
| input elements of type text create basic single-line text fields. | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of input elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| The accept property of the HTMLInputElement interface reflects the input element's accept attribute, generally a comma-separated list of unique file type specifiers providing a hint for the expected file type for an of type file. If the attribute is not explicitly set, the accept property is an empty string. | 1 | 12 | 1 | 1 | 18 | 1 |
| The alt property of the HTMLInputElement interface defines the textual label for the button for users and user agents who cannot use the image. It reflects the input element's alt attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The autocomplete property of the HTMLInputElement interface indicates whether the value of the control can be automatically completed by the browser. It reflects the input element's autocomplete attribute. | 14 | 12 | 4 | 6 | 18 | 6 |
| The cancel event fires on an input element when the user cancels the file picker dialog via the Esc key or the cancel button and when the user re-selects the same files that were previously selected of type="file". | 113 | 113 | 91 | 16.4 | 113 | 16.4 |
| The checked property of the HTMLInputElement interface specifies the current checkedness of the element; that is, whether the form control is checked or not. | 1 | 12 | 1 | 1 | 18 | 1 |
| The defaultValue property of the HTMLInputElement interface indicates the original (or default) value of the input element. It reflects the element's value attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLInputElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable. | 1 | 12 | 1 | 1 | 18 | 1 |
| The form read-only property of the HTMLInputElement interface returns an HTMLFormElement object that owns this input, or null if this input is not owned by any form. | 1 | 12 | 1 | 1 | 18 | 1 |
| The formAction property of the HTMLInputElement interface is the URL of the program that is executed on the server when the form that owns this control is submitted. It reflects the value of the 's formaction attribute. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| The formEnctype property of the HTMLInputElement interface is the MIME_type of the content sent to the server when the with the formEnctype is the method of form submission. It reflects the value of the 's formenctype attribute. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| The formMethod property of the HTMLInputElement interface is the HTTP method used to submit the form if the input element is the control that submits the form. It reflects the value of the 's formmethod attribute. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| The formNoValidate property of the HTMLInputElement interface is a boolean value indicating if the form will bypass constraint validation when submitted via the input. It reflects the element's formnovalidate attribute. | 4 | 12 | 4 | 5 | 18 | 4 |
| The formTarget property of the HTMLInputElement interface is the tab, window, or iframe where the response of the submitted form is to be displayed. It reflects the value of the input element's formtarget attribute. | 9 | 12 | 4 | 5 | 18 | 4.2 |
| The height property of the HTMLInputElement interface specifies the height of a control. It reflects the input element's height attribute. | 21 | 12 | 16 | 7 | 25 | 7 |
| The invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints. | 10 | 12 | 4 | 5 | 18 | 5 |
| The HTMLInputElement.labels read-only property returns a NodeList of the label elements associated with the input element, if the element is not hidden. If the element has the type hidden, the property returns null. | 6 | 18 | 56 | 5 | 18 | 4.2 |
| The list read-only property of the HTMLInputElement interface returns the HTMLDataListElement pointed to by the list attribute of the element, or null if the list attribute is not defined or the list attribute's value is not associated with any in the same tree. | 20 | 12 | 4 | 12.1 | 25 | 12.2 |
| The maxLength property of the HTMLInputElement interface indicates the maximum number of characters (in UTF-16) allowed to be entered for the value of the input element, and the maximum number of characters allowed for the value to be valid. It reflects the element's maxlength attribute. -1 means there is no limit on the length of the value. | 1 | 12 | 1 | 1 | 18 | 1 |
| The minLength property of the HTMLInputElement interface indicates the minimum number of characters (in UTF-16) required for the value of the input element to be valid. It reflects the element's minlength attribute. -1 means there is no minimum length requirement. | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
| The name property of the HTMLInputElement interface indicates the name of the input element. It reflects the element's name attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The pattern property of the HTMLInputElement interface represents a regular expression a non-null input value should match. It reflects the input element's pattern attribute. | 4 | 12 | 4 | 5 | 18 | 4 |
| The placeholder property of the HTMLInputElement interface represents a hint to the user of what can be entered in the control. It reflects the input element's placeholder attribute. | 3 | 12 | 4 | 4 | 18 | 3.2 |
| The readOnly property of the HTMLInputElement interface indicates that the user cannot modify the value of the input. It reflects the input element's readonly boolean attribute; returning true if the attribute is present and false when omitted. | 1 | 12 | 1 | 1 | 18 | 1 |
| The required property of the HTMLInputElement interface specifies that the user must fill in a value before submitting a form. It reflects the input element's required attribute. | 4 | 12 | 4 | 5 | 18 | 4 |
| The HTMLInputElement.select() method selects all the text in a textarea element or in an input element that includes a text field. | 1 | 12 | 1 | 1 | 18 | 1 |
| The select event fires when some text has been selected. | 1 | 12 | 6 | 1 | 18 | 1 |
| The selectionDirection property of the HTMLInputElement interface is a string that indicates the direction in which the user is selecting the text. | 15 | 13 | 8 | 6 | 18 | 6 |
| The selectionEnd property of the HTMLInputElement interface is a number that represents the end index of the selected text. That is, it represents the index of the character immediately following the selection. Likewise, when there is no selection, this returns the offset of the character immediately following the current text input cursor position. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The selectionStart property of the HTMLInputElement interface is a number that represents the beginning index of the selected text. When nothing is selected, then returns the position of the text input cursor (caret) inside of the element. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The HTMLInputElement.setRangeText() method replaces a range of text in an input or textarea element with a new string. | 24 | 79 | 27 | 7 | 25 | 7 |
| The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an input or textarea element. This updates the selection state immediately, though the visual highlight only appears when the element is focused. | 1 | 12 | 1 | 3 | 18 | 1 |
| The size property of the HTMLInputElement interface defines the number of visible characters displayed. It reflects the input element's size attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The type property of the HTMLInputElement interface indicates the kind of data allowed in the input element, for example a number, a date, or an email. Browsers will select the appropriate widget and behavior to help users to enter a valid value. | 1 | 12 | 1 | 1 | 18 | 1 |
| The value property of the HTMLInputElement interface represents the current value of the input element as a string. | 1 | 12 | 1 | 1 | 18 | 1 |
| The width property of the HTMLInputElement interface specifies the width of a control. It reflects the input element's width attribute. | 21 | 12 | 16 | 7 | 25 | 7 |
- Before Firefox 89, manipulating the content of `<input>` elements using `Document.execCommand()` commands requires workarounds (see bug 1220696).
- Does not support `audio/*` MIME type. See bug 242110.
Syntax
<input type="text" placeholder="テキスト入力">
<input type="password" placeholder="パスワード">
<input type="email" placeholder="メールアドレス">
<input type="number" min="0" max="100" step="1">
<input type="search" placeholder="検索...">Live demo
Textinput
hint display. with Type attribute in various inputfield create.placeholder.
valid-tion withinput
Required, pattern, min/max equal in browserstandard. valid-tion apply.
Use cases
Using <input>
The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features