HTMLInputElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

EventTarget Node Element HTMLElement HTMLInputElement

インスタンスプロパティ

親インターフェイスである HTMLElement から継承したプロパティもあります。

一部のプロパティは、対応する属性を持つ入力要素の型にのみ適用されます。

align 非推奨;

文字列で、要素の配置を表します。代わりに CSS を使用してください。

defaultValue

文字列で、このオブジェクトが生成された際にもともと HTML で指定されていた既定値を表します。

dirName

文字列で、この要素の書字方向を表します。

incremental 非標準

論理値で、検索イベントの発生モードを表します。 true の場合、キーが押されるたび、またはキャンセルボタンをクリックしたときに発生し、それ以外の場合は Enter を押したときに発生します。

labels 読取専用

この要素のラベルである <label> のリストを返します。

list 読取専用

list 属性が指す要素を返します。同じツリーに HTML 要素が見つからなかった場合、プロパティは null になることがあります。

multiple

論理値で、この要素の multiple 属性を表します。これは複数の値(例えば複数のファイル)を持つことが可能であるかどうかを示します。

name

文字列で、この要素の name 属性を表します。ここにはフォーム送信時にその要素を識別する名前が入ります。

popoverTargetAction

<input> 要素の type="button" 型で制御されるポップオーバー要素で実行されるアクション("hide""show""toggle" のいずれか)を取得および設定します。これは popovertargetaction という HTML 属性の値を反映します。

popoverTargetElement

<input> 要素の type="button" 型で制御されるポップオーバー要素を取得および設定します。これは JavaScript で popovertarget という HTML 属性に相当するものです。

step

文字列で、この要素の step 属性を表します。これは、 minmax と共に、数値や日時の値を設定する際の増分を制限します。文字列 any または正の浮動小数点数を設定することができます。 any が設定されていない場合、コントロールは最小値よりも大きい step 値の倍数のみを受け入れます。

type

文字列で、この要素の type 属性を表します。これは表示するコントロールの型を示します。利用可能な値については type 属性のドキュメントを参照してください。

useMap 非推奨;

文字列で、クライアント側イメージマップを表します。

value

文字列で、そのコントロールの現在の値を表します。ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。

valueAsDate

Date で、要素の値を日付として解釈して表します。変換できない場合は null となります。

valueAsNumber

数値で、この要素の値を解釈したものを表します。解釈は、時刻、数値の順で行われ、変換できなければ NaN となります。

親フォームに関連するインスタンスプロパティ

form 読取専用

親の <form> 要素の参照を返します。

formAction

文字列で、この要素の formaction 属性を表します。ここには要素によって送信された情報を処理するプログラムの URI が入ります。これは親フォームの action 属性を上書きします。

formEnctype

文字列で、この要素の formenctype 属性を表します。ここにはフォームをサーバーに送信する際のコンテンツの型が入ります。これは親フォームの enctype 属性を上書きします。

formMethod

文字列で、この要素の formmethod 属性を表します。ここにはブラウザーがフォームを送信する際に用いる HTTP メソッドが入ります。これは親フォームの method 属性を上書きします。

formNoValidate

論理値で、この要素の formnovalidate 属性を表します。これは送信時にそのフォームが検証されないかどうかを示します。これは親フォームの novalidate 属性を上書きします。

formTarget

文字列で、この要素の formtarget 属性を表します。ここにはフォームを送信した後で受け取ったレスポンスを表示する場所を示す名前またはキーワードが入ります。これは親フォームの target 属性を上書きします。

hidden 以外の任意の型の入力要素に適用されるインスタンスプロパティ

disabled

論理値で、この要素の disabled 属性を表します。これはそのコントロールが対話を受け付けないかどうかを示します。その入力値はフォームとともに送信されません。 readonly もご覧ください。

required

論理値で、この要素の required 属性を表します。これは、フォームを送信する前にユーザーが値を入力しなければならないかどうかを示します。

validationMessage 読取専用

そのコントロールが制約を満たしていない場合、それを記述したローカライズされたメッセージを返します(もしあれば)。これは、コントロールが制約検証の候補ではない場合(willValidatefalse の場合)、または制約を満たしている場合は空の文字列です。この値は、 setCustomValidity() メソッドで設定できます。

validity 読取専用

この要素の現在の検証状態を返します。

willValidate 読取専用

その要素が制約検証の候補であるかどうかを返します。これは何か制約検証を阻む条件がある場合、例えば、typehiddenresetbutton のいずれかである、祖先に <datalist> がある、disabled プロパティが true である、などです。

checkbox または radio 型の要素にのみ適用されるプロパティ

checked

論理型で、この要素の現在の状態を表します。

defaultChecked

論理型で、このオブジェクトを生成した HTML でもともと指定されていたラジオボタンまたはチェックボックスの既定の状態を表します。

indeterminate

論理型で、チェックボックスやラジオボタンの状態が不確定であるかどうかを返します。チェックボックスの場合は、その状態が不確定 (チェックでも未チェックでもない状態) であることを示すために、チェックボックスの外観が何らかの方法で不明瞭になったり、灰色になったりする効果があります。 checked 属性の値には影響を与えず、チェックボックスをクリックするとその値は false になります。

image 型の要素にのみ適用されるプロパティ

alt

文字列で、この要素の代替テキストが設定された alt 属性を表します。

height

文字列で、ボタンに表示される画像の高さを定義するこの要素の height 属性を表します。

src

文字列で、グラフィックの送信ボタンを表示する画像の場所を示す URI を指定する、この要素の src 属性を表します。

width

文字列で、ボタンに表示される画像の幅を定義する、文書の width 属性を表します。

file 型の要素にのみ適用されるプロパティ

accept

文字列で、サーバーが受け入れるファイル形式をカンマ区切りのリストで表すこの要素の accept 属性を表します。

capture

文字列で、この要素の capture 属性を表し、ファイルアップロードコントロール内でメディアキャプチャの入力方法を示します。

files

FileList で、アップロードするために選択されたファイルのリストを表します。

webkitdirectory

論理型で、 webkitdirectory 属性を返します。true の場合、ファイルシステム選択インターフェイスはファイルではなくディレクトリーのみが選択できるようになります。

webkitEntries 読取専用

現在選択されているファイルまたはディレクトリーを示します。

テキストや数値を含む表示される要素にのみ適用されるプロパティ

autocomplete

文字列で、この要素の autocomplete 属性を表します。これはコントロールの値をブラウザーで自動的に補完できるかどうかを示します。

max

文字列で、この要素の max 属性を表します。この属性には、この項目の(数値または日時の)最大値が含まれ、最小値(min 属性)より小さくすることはできません。

maxLength

数値で、この要素の maxlength 属性を表します。この属性には、値が持つことのできる(Unicode コードポイント単位の)最大文字数が含まれます。

min

文字列で、この要素の min 属性を表します。この属性には、この項目の(数値または日時の)最小値が含まれ、最大値(max 属性)より大きくすることはできません。

minLength

数値で、この要素の minlength 属性を表します。この属性には、値が持つことのできる(Unicode コードポイント単位の)最小文字数が含まれます。

pattern

文字列で、この要素の pattern 属性を表します。ここにはコントロールの値をチェックするための正規表現を含みます。title 属性を使用してユーザーについてパターンを説明してください。この属性は、 type 属性の値が textsearchtelurlemail の場合にのみ適用されます。

placeholder

文字列で、この要素の placeholder 属性を表します。ここには、ユーザーがコントロールに何を入力できるかのヒントが設定されます。プレイスホルダーのテキストには、キャリッジリターンやラインフィードを含むことはできません。この属性は、 type 属性の値が textsearchtelurlemail の場合にのみ適用されます。

readOnly

論理型で、この要素の readonly 属性を表します。これは、ユーザーがコントロールの値を変更できないことを示します。この属性は、 type 属性の値が hiddenrangecolorcheckboxradiofile、ボタン型の場合は無視されます。

selectionDirection

文字列で、選択された方向を表します。可能な値は、 forward (現在のロケールの文頭から文末の方向に選択)、 backward (逆方向)、 none (方向は不明)のいずれかです。

selectionEnd

数値で、選択中のテキストの末尾の位置を表します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。

selectionStart

数値で、選択中のテキストの先頭の位置を表します。何も選択していない場合は、その <input> 要素内にあるテキスト入力カーソル (キャレット) の位置を返します。

size

数値で、この要素の size 属性を表します。これはコントロールの外見の大きさが入ります。この値は type の値が text または password の場合は整数で文字数であり、それ以外の場合はピクセル単位です。 typetextsearchtelurlemailpassword のいずれかに設定されている場合のみ適用されます。

インスタンスメソッド

親インターフェイスである HTMLElement から継承したメソッドもあります。

checkValidity()

論理値で、この要素が制約検証の対象であり、かつ制約を満たしていない場合に false を返します。この場合、この要素で invalid イベントも発生します。この要素が制約検証の対象でない場合、または制約を満たす場合は true を返します。

reportValidity()

checkValidity() メソッドを実行し、(入力が不正であったり pattern 属性がなかったりして) false が返された場合、フォームを送信した場合と同じように、入力が無効であることをユーザーに報告します。

select()

この input 要素のすべてのテキストを選択し、ユーザーがその内容をすべて置き換えることができるように、テキストにフォーカスを与えます。

setCustomValidity()

要素に独自の検証メッセージ設定します。このメッセージが空文字列ではない場合、その要素は独自の検証のエラーに見舞われており、検証に不合格になります。

setRangeText()

この input 要素のテキストの範囲を新しいテキストで置き換えます。

setSelectionRange()

入力要素のテキスト範囲を選択します(フォーカスは設定しません)。

showPicker()

日付、時刻、色、ファイルについて、ブラウザーのピッカーを表示します。

stepDown()

value を (step * n) だけ減少させます。 n が指定されなかった場合の既定値は 1 です。

stepUp()

value を (step * n) だけ増加させます。 n が指定されなかった場合の既定値は 1 です。

イベント

親インターフェイスである HTMLElement から継承したイベントもあります。

以下のイベントは、 addEventListener() を用いるか、このインターフェイスの onイベント名 プロパティにイベントリスナーを割り当てるかして待ち受けしてください。

invalid イベント

制約検証時に、要素が制約を満たしていなかった場合に発行されます。

<input>type="search" で検索が開始されたときに発行されます。

select イベント

テキストが選択されたときに発行されます。

selectionchange イベント Experimental

<input> の中のテキストの選択が変更された場合に発行されます。

仕様書

Specification
HTML Standard
# htmlinputelement

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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