HTMLInputElement

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

EventTarget Node Element HTMLElement HTMLInputElement

インスタンスプロパティ

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

align 非推奨

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

autocapitalize Experimental

文字列: ユーザー入力の大文字化の動作を定義します。有効な値は noneoffcharacterswordssentences の何れかです。

defaultValue

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

dirName

文字列: この要素の書字方向を取得/設定します。

inputmode

この要素またはそのコンテンツを編集する際に使用する仮想キーボード設定の種類について、ブラウザーにヒントを提供します。

labels 読取専用

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

list 読取専用

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

multiple

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

name

文字列: この要素の name 属性を返却/設定します。ここにはフォーム送信時にその要素を識別する名前が入ります。

popoverTargetAction Experimental

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

popoverTargetElement Experimental

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

step

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

type (en-US)

文字列: この要素の type 属性を返却/設定します。これは表示するコントロールの型を示します。利用可能な値については <input>type 属性を参照してください。

useMap 非推奨

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

value

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

valueAsDate

Date: 要素の値を日付として解釈して返却/設定します。変換できない場合は null となります。

valueAsNumber

数値: この要素の値を、次のいずれかのうち一つとして解釈して返します。解釈は、時刻値、数値の順で行われ、変換できなければ NaN となります。

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

form 読取専用

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

formAction

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

formEnctype

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

formMethod

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

formNoValidate

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

formTarget

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

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

autofocus

論理値: この要素の autofocus 属性を返却/設定します。ページが読み込まれたときに、ユーザーが別のコントロールに入力するなどしてそれを上書きしない限り、そのフォームコントロールが入力フォーカスを持つべきであることを指定します。文書内の 1 つの form 要素だけが autofocus 属性を持つことができます。

disabled

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

required

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

validationMessage 読取専用

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

validity 読取専用

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

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 属性を返却/設定します。

allowdirs Non-standard

論理型: 標準外の Directory Upload API の一部です。ファイルリストでディレクトリーとファイルの両方を選択できるようにするかどうかを示します。 Firefox でのみ実装されており、設定で隠されています。

files

FileList: アップロードするために選択されたファイルを表す File オブジェクトのリストを返却/設定します。

webkitdirectory

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

webkitEntries

FileSystemEntry (en-US) の配列: 現在選択されているファイルまたはディレクトリーを示します

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

autocomplete

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

max

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

maxLength

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

min

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

minLength

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

pattern

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

placeholder

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

readOnly

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

selectionEnd (en-US)

unsigned long: 選択中のテキストの末尾の位置を返却/設定します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。

selectionStart (en-US)

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

selectionDirection (en-US)

文字列: 選択が行われた方向を返却/設定します。取りうる値は、forward(現在のロケールにおける先頭から末尾の方向に選択された)、backward(逆方向)、none(方向が不明)です。

size

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

インスタンスメソッド

blur()

この input 要素からフォーカスを外します。キー入力はどこにも行かなくなります。

click()

この input 要素のクリックをシミュレートします。

focus()

この input 要素にフォーカスを与えます。キー入力がこの要素に行くようになります。

select()

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

setSelectionRange()

この input 要素のテキストの範囲を選択します(ただし、フォーカスは与えません)。

setRangeText()

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

setCustomValidity()

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

showPicker()

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

checkValidity()

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

reportValidity()

checkValidity() メソッドを実行し、 false が返された場合 (無効な入力や pattern 属性が提供されていない場合) には、フォームを送信した場合と同様に、入力が無効であることをユーザーに報告します。

stepDown()

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

  • 現在の type の値にこのメソッドが適用できない場合
  • 要素に step 値が設定されていない場合
  • value が数値に変換できない場合
  • 結果の値が max を超えたり、 min を下回ったりする場合
stepUp()

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

  • 現在の type の値にこのメソッドが適用できない場合
  • 要素に step 値が設定されていない場合
  • value が数値に変換できない場合
  • 結果の値が max を超えたり、 min を下回ったりする場合

イベント

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

input

<input><select><textarea> のいずれかの要素の value が変更されたときに発生します。なお、このイベントは実際には HTMLElement インターフェイス上で発生し、 contenteditable 要素にも適用されますが、フォーム入力要素で最も一般的に使用されるため、ここに挙げています。

invalid

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

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

selectionchange イベント Experimental

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

仕様書

Specification
HTML Standard
# htmlinputelement

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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