HTMLInputElement

HTMLInputElement インターフェイスは <input> 要素のオプション、レイアウト、表示を操作するための特別なプロパティやメソッドを提供します。

プロパティ

親フォームに関連するプロパティ
form 読取専用 HTMLFormElement オブジェクト: 親の <form> 要素の参照を返します。
formAction string: その要素の formaction 属性を返却または設定します。ここには要素によって送信された情報を処理するプログラムの URI が入ります。これは親フォームの action 属性を上書きします。
formEncType string: その要素の formenctype 属性を返却または設定します。ここにはフォームをサーバーに送信する際のコンテンツの型が入ります。これは親フォームの enctype 属性を上書きします。
formMethod string: その要素の formmethod 属性を返却または設定します。ここにはブラウザーがフォームを送信する際に用いる HTTP メソッドが入ります。これは親フォームの method 属性を上書きします。
formNoValidate Boolean: その要素の formnovalidate 属性を返却または設定します。これは送信時にそのフォームが検証されないかどうかを示します。これは親フォームの novalidate 属性を上書きします。
formTarget string: その要素の formtarget 属性を返却または設定します。ここにはフォームを送信した後で受け取ったレスポンスを表示する場所を示す名前またはキーワードが入ります。これは親フォームの target 属性を上書きします。
hidden 以外のあらゆる型の入力要素に適用されるプロパティ
name string: その要素の name 属性を返却または設定します。ここにはフォーム送信時にその要素を識別する名前が入ります。
type string: その要素の type 属性を返却または設定します。これは表示するコントロールの型を示します。利用可能な値については <input> の type 属性を参照してください。
disabled Boolean: その要素の disabled 属性を返却または設定します。これはそのコントロールが対話を受け付けないかどうかを示します。その入力値はフォームとともに送信されません。 readonly もご覧ください。
autofocus Boolean: その要素の autofocus 属性を返却または設定します。ページが読み込まれたときに、ユーザーが別のコントロールに入力するなどしてそれを上書きしない限り、そのフォームコントロールが入力フォーカスを持つべきであることを指定します。文書内の一つの form 要素だけが autofocus 属性を持つことができます。 type 属性が hidden に設定されている場合には適用できません (つまり、非表示のコントロールにフォーカスを自動的に設定することはできません)。
required Boolean: その要素の required 属性を返却または設定します。これは、フォームを送信する前にユーザーが値を入力しなければならないかどうかを示します。
value string: そのコントロールの現在の値を返却または設定します。

注: ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。
validity 読取専用 ValidityState オブジェクト: その要素の現在の検証状態を返します。
validationMessage 読取専用 string: 制約検証をそのコントロールが満たさな買った場合、それを記述したローカライズされたメッセージを返します (もしあれば)。これは、コントロールが制約検証の候補ではない場合 (willvalidate が false の場合)、または制約を満たしている場合は空の文字列です。この値は、 setCustomValidity メソッドで設定できます。
willValidate 読取専用 Boolean: その要素が制約検証の候補であるかどうかを返します。これは何か制約検証を阻む条件がある場合、例えば、 type が hidden, reset, button のいずれかである、祖先に <datalist> がある、 disabled プロパティが true である、などです。
checkbox または radio 型の要素にのみに適用できるプロパティ
checked Boolean: Returns / Sets the current state of the element when type is checkbox or radio.
defaultChecked Boolean: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminate Boolean: Returns whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
image 型の要素のみに適用できるプロパティ
alt string: Returns / Sets the element's alt attribute, containing alternative text to use when type is image.
height string: Returns / Sets the element's height attribute, which defines the height of the image displayed for the button, if the value of type is image.
src string: Returns / Sets the element's src attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of type is image; otherwise it is ignored.
width string: Returns / Sets the document's width attribute, which defines the width of the image displayed for the button, if the value of type is image.
file 型の要素のみに適用できるプロパティ/caption>
accept string: Returns / Sets the element's accept attribute, containing comma-separated list of file types accepted by the server when type is file.
allowdirs Boolean: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
files Returns/accepts a FileList object, which contains a list of File objects representing the files selected for upload.
webkitdirectory Boolean: Returns the webkitdirectory attribute; if true, the file system picker interface only accepts directories instead of files.
webkitEntries Array of FileSystemEntry objects: Describes the currently selected files or directories.
text/number を含む型の要素のみに適用できるプロパティ
autocomplete string: Returns / Sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
on: the browser can autocomplete the value using previously stored value
off: the user must explicity enter a value
max string: Returns / Sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
maxLength long: Returns / Sets the element's maxlength attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
min string: Returns / Sets the element's min attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
minLength long: Returns / Sets the element's minlength attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
pattern string: Returns / Sets the element's pattern attribute, containing a regular expression that the control's value is checked against. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
placeholder string: Returns / Sets the element's placeholder attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
readOnly boolean: Returns / Sets the element's readonly attribute, indicating that the user cannot modify the value of the control.
HTML5This is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type.
selectionStart unsigned long: 選択した文章の開始点を返却・設定する。何も選択していない場合，<input>要素内の文章入力カーソル（編集子）の位置を返す。
selectionEnd unsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirection string: Returns / Sets the direction in which selection occurred. Possible values are:
forward if selection was performed in the start-to-end direction of the current locale
backward for the opposite direction
none if the direction is unknown
size unsigned long: Returns / Sets the element's size attribute, containing visual size of the control. This value is in pixels unless the value of type is text or password, in which case, it is an integer number of characters. Applies only when type is set to text, search, tel, url, email, or password; otherwise it is ignored.
未分類のプロパティ
defaultValue string: Returns / Sets the default value as originally specified in the HTML that created this object.
dirName string: Returns / Sets the directionality of the element.
accessKey string: Returns a string containing a single character that switches input focus to the control when pressed.
list 読取専用 HTMLElement object: Returns the element pointed by the list attribute. The property may be null if no HTML element found in the same tree.
multiple Boolean: Returns / Sets the element's multiple attribute, indicating whether more than one value is possible (e.g., multiple files).
files FileList array: Returns the list of selected files.
HTMLInputElement.labels 読取専用 NodeList array: Returns a list of <label> elements that are labels for this element.
step string: Returns / Sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate Date object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumber double: Returns the value of the element, interpreted as one of the following, in order:
  • A time value
  • A number
  • NaN if conversion is impossible
autocapitalize string: Defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
inputmode Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
HTMLInputElement.align
string: Represents the alignment of the element. Use CSS instead.
HTMLInputElement.useMap
string: Represents a client-side image map.

メソッド

blur() Removes focus from the input element; keystrokes will subsequently go nowhere.
click() Simulates a click on the input element.
focus() Focuses on the input element; keystrokes will subsequently go to this element.
select() Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
setSelectionRange() Selects a range of text in the input element (but does not focus it).
setRangeText() Replaces a range of text in the input element with new text.
setCustomValidity() Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity() Returns a Boolean that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an invalid event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
reportValidity() Runs the checkValidity() method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
HTMLInputElement.stepDown()
Decrements the value by (step * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
  • if the method is not applicable to for the current type value,
  • if the element has no step value,
  • if the value cannot be converted to a number,
  • if the resulting value is above the max or below the min.
HTMLInputElement.stepUp()
Increments the value by (step * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
  • if the method is not applicable to for the current type value.,
  • if the element has no step value,
  • if the value cannot be converted to a number,
  • if the resulting value is above the max or below the min.
HTMLInputElement.mozSetFileArray()
Sets the files selected on the input to the given array of File objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
HTMLInputElement.mozGetFileNameArray()
Returns an array of all the file names from the input.
HTMLInputElement.mozSetFileNameArray()
Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.

イベント

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface:

input
Fires when the value of an <input>, <select>, or <textarea> element has been changed. Note that this is actually fired on the HTMLElement interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements.
Also available via the oninput event handler property.
invalid
Fired when an element does not satisfy its constraints during constraint validation.
Also available via the oninvalid event handler property.
search
Fired when a search is initiated on an <input> of type="search".
Also available via the onsearch event handler property.

仕様書

仕様書 状態 備考
HTML Living Standard
HTMLInputElement の定義		 現行の標準
HTML5
HTMLInputElement の定義		 勧告 技術的には、tabindex プロパティと accesskey プロパティ、ならびに blur()、click()、および focus() メソッドは、現在 HTMLElement で定義されています。
次のプロパティは廃止されました: align および useMap。
次のプロパティが追加されました: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, willValidate.
次のメソッドが追加されました: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), stepDown()
Document Object Model (DOM) Level 2 HTML Specification
HTMLInputElement の定義		 廃止された size プロパティは、unsigned long になりました。type プロパティはすべて小文字で指定する必要があります。
Document Object Model (DOM) Level 1 Specification
HTMLInputElement の定義		 廃止された 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • このインターフェイスを実装している HTML 要素: <input>