HTMLInputElement

BaselineWidely available *

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

* Some parts of this feature may have varying levels of support.

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

インスタンスプロパティ

親インターフェイスである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 属性を表します。これは、min やmax と共に、数値や日時の値を設定する際の増分を制限します。文字列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読取専用: そのコントロールが制約を満たしていない場合、それを記述したローカライズされたメッセージを返します（もしあれば）。これは、コントロールが制約検証の候補ではない場合（willValidate がfalse の場合）、または制約を満たしている場合は空の文字列です。この値は、setCustomValidity() メソッドで設定できます。
validity読取専用: この要素の現在の検証状態を返します。
willValidate読取専用: その要素が制約検証の候補であるかどうかを返します。これは何か制約検証を阻む条件がある場合、例えば、type がhidden、reset、button のいずれかである、祖先に<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 属性の値がtext、search、tel、url、email の場合にのみ適用されます。
placeholder: 文字列で、この要素のplaceholder 属性を表します。ここには、ユーザーがコントロールに何を入力できるかのヒントが設定されます。プレイスホルダーのテキストには、キャリッジリターンやラインフィードを含むことはできません。この属性は、type 属性の値がtext、search、tel、url、email の場合にのみ適用されます。
readOnly: 論理型で、この要素のreadonly 属性を表します。これは、ユーザーがコントロールの値を変更できないことを示します。この属性は、type 属性の値がhidden、range、color、checkbox、radio、file、ボタン型の場合は無視されます。
selectionDirection: 文字列で、選択された方向を表します。可能な値は、forward （現在のロケールの文頭から文末の方向に選択）、backward （逆方向）、none （方向は不明）のいずれかです。
selectionEnd: 数値で、選択中のテキストの末尾の位置を表します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。
selectionStart: 数値で、選択中のテキストの先頭の位置を表します。何も選択していない場合は、その<input> 要素内にあるテキスト入力カーソル (キャレット) の位置を返します。
size: 数値で、この要素のsize 属性を表します。これはコントロールの外見の大きさが入ります。この値はtype の値がtext またはpassword の場合は整数で文字数であり、それ以外の場合はピクセル単位です。type がtext、search、tel、url、email、password のいずれかに設定されている場合のみ適用されます。

インスタンスメソッド

親インターフェイスである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 です。