このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

HTMLInputElement

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

EventTarget Node Element HTMLElement HTMLInputElement

プロパティ

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

注: ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。
validity 読取専用 ValidityState オブジェクト: その要素の現在の検証状態を返します。
validationMessage 読取専用 文字列: 制約検証をそのコントロールが満たさなかった場合、それを記述したローカライズされたメッセージを返します (もしあれば)。これは、コントロールが制約検証の候補ではない場合 (willvalidate が false の場合)、または制約を満たしている場合は空の文字列です。この値は、 setCustomValidity メソッドで設定できます。
willValidate 読取専用 論理値: その要素が制約検証の候補であるかどうかを返します。これは何か制約検証を阻む条件がある場合、例えば、 `type` が hidden、reset、`button` のいずれかである、祖先に <datalist> がある、 `disabled` プロパティが `true` である、などです。
checkbox または radio 型の要素にのみに適用できるプロパティ
checked 論理値: type が checkbox または radio の場合、要素の現在の状態を返却または設定します。
defaultChecked 論理値: このオブジェクトを生成した HTML でもともと指定されていたラジオボタンまたはチェックボックスの既定の状態を返却または設定します。
indeterminate 論理値: チェックボックスやラジオボタンの状態が不確定であるかどうかを返します。チェックボックスの場合は、その状態が不確定 (チェックでも未チェックでもない状態) であることを示すために、チェックボックスの外観が何らかの方法で不明瞭になったり、灰色になったりする効果があります。 checked 属性の値には影響を与えず、チェックボックスをクリックするとその値は false になります。
image 型の要素のみに適用できるプロパティ
alt 文字列: type が image である場合、その要素の代替テキストが設定された alt 属性を返却または設定します。
height 文字列: type の値が image である場合、ボタンに表示される画像の高さを定義するその要素の height 属性を返却または設定します。
src 文字列: type の値が image である場合、グラフィックの送信ボタンを表示する画像の場所を示す URI を指定する、その要素の src 属性を返却または設定します。それ以外の場合は無視されます。
width 文字列: type の値が image である場合、ボタンに表示される画像の幅を定義する、文書の width 属性を返却または設定します。
file 型の要素のみに適用できるプロパティ
accept 文字列: type が file である場合、サーバーが受け入れるファイル形式をカンマ区切りのリストで表すその要素の accept 属性を返却または設定します。
allowdirs 論理値: 標準外の Directory Upload API の一部です。ファイルリストでディレクトリーとファイルの両方を選択できるようにするかどうかを示します。 Firefox でのみ実装されており、設定で隠されています。
files FileList オブジェクトを返却または設定し、これはアップロードするために選択されたファイルを表す File オブジェクトのリストが入ります。
webkitdirectory 論理値: webkitdirectory 属性を返します。 true の場合、ファイルシステム選択インターフェイスはファイルではなくディレクトリーのみが選択できるようになります。
webkitEntries FileSystemEntry (en-US) オブジェクトの配列: 現在選択されているファイルまたはディレクトリーを示します。
text/number を含む型の要素のみに適用できるプロパティ
autocomplete 文字列: その要素の autocomplete 属性を返却または設定します。これはコントロールの値をブラウザーで自動的に補完できるかどうかを示します。 type 属性の値が hidden、checkbox、radio、file、またはボタン型 (button、submit、reset、image) の場合は無視されます。可能な値は次の通りです。
on: ブラウザーが以前入力された値を使用して値を自動補完することができる
off: ユーザーは明示的に値を入力しなければならない
max 文字列: その要素の max 属性を返却または設定します。この属性には、この項目の (数値または日時の) 最大値が含まれ、最小値 (min 属性) より小さくすることはできません。
maxLength long: その要素の maxlength 属性を返却または設定します。この属性には、値が持つことのできる (Unicode コードポイントでの) 最大文字数が含まれます。 (これを負の数に設定した場合、例外が発生します。)
min 文字列: その要素の min 属性を返却または設定します。この属性には、この項目の (数値または日時の) 最小値が含まれ、最大値 (max 属性) より大きくすることはできません。
minLength long: その要素の 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、またはボタン型の場合は無視されます。
selectionStart unsigned long: 選択中のテキストの先頭の位置を返却または設定します。何も選択していない場合は、その <input> 要素内にあるテキスト入力カーソル (キャレット) の位置を返します。
selectionEnd unsigned long: 選択中のテキストの末尾の位置を返却または設定します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。
selectionDirection 文字列: 選択が行われた方向を返却または設定します。可能な値は次のとおりです。
forward は現在のロケールにおいての先頭から末尾の方向で選択された場合
backward は逆方向の場合
none は方向が不明な場合
size unsigned long: その要素の size 属性を返却または設定します。これはコントロールの外見の大きさが入ります。この値は type の値が text または password の場合は整数で文字数であり、それ以外の場合はピクセル単位です。 type が text、search、tel、url、email、password のいずれかに設定されている場合のみ適用され、それ以外の場合は無視されます。
未分類のプロパティ
defaultValue 文字列: このオブジェクトを生成した HTML で最初に指定された既定値を返却または設定します。
dirName 文字列: 要素の書字方向を返却または設定します。
accessKey 文字列: 押されるとコントロールへの入力フォーカスを切り替える単一の文字が入った文字列を返します。
list 読取専用 HTMLElement オブジェクト: list 属性が指す要素を返します。同じツリーに HTML 要素がない場合、プロパティは null になることがあります。
multiple 論理値: その要素の multiple 属性を返却または設定します。これは複数の値 (例えば複数のファイル) を持つことが可能であるかどうかを示します。
files FileList の配列: 選択されたファイルのリストを返します。
labels 読取専用 NodeList の配列: この要素のラベルである <label> 要素のリストを返します。
step 文字列: その要素の step 属性を返却または設定します。これは、 min や max と共に、数値や日時の値を設定する際の増分を制限します。文字列 any または正の浮動小数点数を設定することができます。 any が設定されていない場合、コントロールは最小値よりも大きい step 値の倍数のみを受け入れます。
valueAsDate Date オブジェクト: その要素の値を、日時として解釈して返却または設定します。変換が不可能であれば null を返します。
valueAsNumber double: その要素の値を、次のいずれかのうち一つとして解釈して返します。解釈は以下の順で行われます。
  • 時刻の値
  • 数値
  • 変換が不可能であれば `NaN`
autocapitalize 文字列: ユーザーの入力を大文字化する動作を定義します。有効な値は none, off, characters, words, sentences です。
inputmode この要素またはその内容を編集する際に使用する仮想キーボード設定の種類について、ブラウザーにヒントを与えます。
align

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

useMap

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

メソッド

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 を下回ったりする場合
mozSetFileArray()

入力欄で選択されたファイルを、与えられた File オブジェクトの配列に設定します。これは、フレームスクリプトで使用可能な mozSetFileNameArray() の代替となるものです。クロームスクリプトはファイルを File オブジェクトとして開き、メッセージマネージャーを介してそれらを送信することができます。

mozGetFileNameArray()

その入力欄からすべてのファイル名の配列を返します。

イベント

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

input

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

invalid

制約検証時に、要素が制約を満たしていなかった場合に発生します。 oninvalid イベントハンドラープロパティからも利用できます。

<input> の type="search" で検索が開始されたときに発生します。 onsearch イベントハンドラープロパティからも利用できます。

仕様書

Specification
HTML Standard
# htmlinputelement

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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