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 属性を上書きします。 |
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 である、などです。 |
checked |
boolean: type が checkbox または radio の場合、要素の現在の状態を返却または設定します。 |
defaultChecked |
boolean: このオブジェクトを生成した HTML でもともと指定されていたラジオボタンまたはチェックボックスの既定の状態を返却または設定します。 |
indeterminate |
boolean: チェックボックスやラジオボタンの状態が不確定であるかどうかを返します。チェックボックスの場合は、その状態が不確定 (チェックでも未チェックでもない状態) であることを示すために、チェックボックスの外観が何らかの方法で不明瞭になったり、灰色になったりする効果があります。 checked 属性の値には影響を与えず、チェックボックスをクリックするとその値は false になります。 |
alt |
string: type が image である場合、その要素の代替テキストが設定された alt 属性を返却または設定します。 |
height |
string: type の値が image である場合、ボタンに表示される画像の高さを定義するその要素の height 属性を返却または設定します。 |
src |
string: type の値が image である場合、グラフィックの送信ボタンを表示する画像の場所を示す URI を指定する、その要素の src 属性を返却または設定します。それ以外の場合は無視されます。 |
width |
string: type の値が image である場合、ボタンに表示される画像の幅を定義する、文書の width 属性を返却または設定します。 |
accept |
string: type が file である場合、サーバーが受け入れるファイル形式をカンマ区切りのリストで表すその要素の accept 属性を返却または設定します。 |
allowdirs |
boolean: 標準外の Directory Upload API の一部です。ファイルリストでディレクトリーとファイルの両方を選択できるようにするかどうかを示します。 Firefox でのみ実装されており、設定で隠されています。 |
files |
FileList オブジェクトを返却または設定し、これはアップロードするために選択されたファイルを表す File オブジェクトのリストが入ります。 |
webkitdirectory |
boolean: webkitdirectory 属性を返します。 true の場合、ファイルシステム選択インターフェイスはファイルではなくディレクトリーのみが選択できるようになります。 |
webkitEntries (en-US) |
FileSystemEntry (en-US) オブジェクトの配列: 現在選択されているファイルまたはディレクトリーを示します。 |
autocomplete |
string: その要素の autocomplete 属性を返却または設定します。これはコントロールの値をブラウザーで自動的に補完できるかどうかを示します。 type 属性の値が hidden、checkbox、radio、file、またはボタン型 (button、submit、reset、image) の場合は無視されます。可能な値は次の通りです。on: ブラウザーが以前入力された値を使用して値を自動補完することができるoff: ユーザーは明示的に値を入力しなければならない |
max |
string: その要素の max 属性を返却または設定します。この属性には、この項目の (数値または日時の) 最大値が含まれ、最小値 (min 属性) より小さくすることはできません。 |
maxLength |
long: その要素の maxlength 属性を返却または設定します。この属性には、値が持つことのできる (Unicode コードポイントでの) 最大文字数が含まれます。 (これを負の数に設定した場合、例外が発生します。) |
min |
string: その要素の min 属性を返却または設定します。この属性には、この項目の (数値または日時の) 最小値が含まれ、最大値 (max 属性) より大きくすることはできません。 |
minLength |
long: その要素の minlength 属性を返却または設定します。この属性には、値が持つことのできる (Unicode コードポイントでの) 最小文字数が含まれます。 (これを負の数に設定した場合、例外が発生します。) |
pattern |
string: その要素の pattern 属性を返却または設定します。ここにはコントロールの値をチェックするための正規表現を含みます。 title 属性を使用してユーザーにパターンを説明してください。この属性は、 type 属性の値が text、search、tel、url、email の場合に適用され、それ以外の場合は無視されます。 |
placeholder |
string: その要素の placeholder 属性を返却または設定します。ここには、ユーザーがコントロールに何を入力できるかのヒントが設定されます。プレイスホルダーのテキストには、キャリッジリターンやラインフィードを含むことはできません。この属性は、type属性の値がtext、search、tel、url、emailの場合に適用され、それ以外の場合は無視されます。この属性は、 type 属性の値が text、search、tel、url、email の場合に適用され、それ以外の場合は無視されます。 |
readOnly |
boolean:その要素の readonly 属性を返却または設定します。これは、ユーザーがコントロールの値を変更できないことを示します。type 属性の値が hidden、range、color、checkbox、radio、file、またはボタン型の場合は無視されます。 |
selectionStart |
unsigned long: 選択中のテキストの先頭の位置を返却または設定します。何も選択していない場合は、その <input> 要素内にあるテキスト入力カーソル (キャレット) の位置を返します。 |
selectionEnd |
unsigned long: 選択中のテキストの末尾の位置を返却または設定します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。 |
selectionDirection |
string: 選択が行われた方向を返却または設定します。可能な値は次のとおりです。forward は現在のロケールにおいての先頭から末尾の方向で選択された場合backward は逆方向の場合none は方向が不明な場合 |
size |
unsigned long: その要素の size 属性を返却または設定します。これはコントロールの外見の大きさが入ります。この値は type の値が text または password の場合は整数で文字数であり、それ以外の場合はピクセル単位です。 type が text、search、tel、url、email、password のいずれかに設定されている場合のみ適用され、それ以外の場合は無視されます。 |
defaultValue |
string: このオブジェクトを生成した HTML で最初に指定された既定値を返却または設定します。 |
dirName |
string: 要素の書字方向を返却または設定します。 |
accessKey |
string: 押されるとコントロールへの入力フォーカスを切り替える単一の文字が入った文字列を返します。 |
list 読取専用 |
HTMLElement object: list 属性が指す要素を返します。同じツリーに HTML 要素がない場合、プロパティは null になることがあります。 |
multiple |
boolean: その要素の multiple 属性を返却または設定します。これは複数の値 (例えば複数のファイル) を持つことが可能であるかどうかを示します。 |
files |
FileList array: 選択されたファイルのリストを返します。 |
HTMLInputElement.labels 読取専用 |
NodeList array: この要素のラベルである <label> 要素のリストを返します。 |
step |
string: その要素の step 属性を返却または設定します。これは、 min や max と共に、数値や日時の値を設定する際の増分を制限します。文字列 any または正の浮動小数点数を設定することができます。 any が設定されていない場合、コントロールは最小値よりも大きい step 値の倍数のみを受け入れます。 |
valueAsDate |
Date object: その要素の値を、日時として解釈して返却または設定します。変換が不可能であれば null を返します。 |
valueAsNumber |
double: その要素の値を、次のいずれかのうち一つとして解釈して返します。解釈は以下の順で行われます。
|
autocapitalize |
string: ユーザーの入力を大文字化する動作を定義します。有効な値は none、off、characters、words、sentences です。 |
inputmode |
この要素またはその内容を編集する際に使用する仮想キーボード設定の種類について、ブラウザーにヒントを与えます。 |
HTMLInputElement.alignstring: 要素の配置を表します。代わりに CSS を使用してください。HTMLInputElement.useMapstring: クライアント側イメージマップを表します。
メソッド
blur() (en-US) |
input 要素からフォーカスを外します。キー入力はどこにも行かなくなります。 |
click() |
input 要素のクリックをシミュレートします。 |
focus() (en-US) |
input 要素にフォーカスを与えます。キー入力がこの要素に行くようになります。 |
select() |
input 要素のすべてのテキストを選択し、ユーザーがその内容をすべて置き換えることができるように、テキストにフォーカスを与えます。 |
setSelectionRange() |
input 要素のテキストの範囲を選択します (ただし、フォーカスは与えません)。 |
setRangeText() |
input 要素のテキストの範囲を新しいテキストで置き換えます。 |
setCustomValidity() |
要素に独自の検証メッセージ設定します。このメッセージが空の文字列ではない場合、その要素は独自の検証のエラーに見舞われており、検証に不合格になります。 |
checkValidity() |
boolean を返します。 false の場合はその要素が制約検証の候補であり、制約を満たしていないことを表します。この場合、その要素で invalid (en-US) イベントも発生します。 true の場合はその要素が制約検証の候補でないか、制約を満たしていることを表します。 |
reportValidity() |
checkValidity() メソッドを実行し、 false が返された場合 (無効な入力や pattern 属性が提供されていない場合) には、フォームを送信した場合と同様に、入力が無効であることをユーザーに報告します。 |
HTMLInputElement.stepDown()(en-US)valueを (step* n) だけ減少させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID_STATE_ERR 例外が発生します。HTMLInputElement.stepUp()(en-US)valueを (step* n) だけ増加させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID_STATE_ERR 例外が発生します。HTMLInputElement.mozSetFileArray()- 入力欄で選択されたファイルを、与えられた
Fileオブジェクトの配列に設定します。これは、フレームスクリプトで使用可能なmozSetFileNameArray()の代替となるものです。クロームスクリプトはファイルを File オブジェクトとして開き、メッセージマネージャーを介してそれらを送信することができます。 HTMLInputElement.mozGetFileNameArray()- その入力欄からすべてのファイル名の配列を返します。
HTMLInputElement.mozSetFileNameArray()(en-US)- 入力で選択されたファイルのファイル名を設定します。ファイルシステムにアクセスするので、フレームスクリプトでは使用できません。
イベント
以下のイベントは、 addEventListener() を用いるか、このインターフェイスの onイベント名 プロパティにイベントリスナーを割り当てるかして待ち受けしてください。
input<input>、<select>、<textarea>のいずれかの要素のvalueが変更されたときに発生します。なお、このイベントは実際にはHTMLElementインターフェイス上で発生し、contenteditable要素にも適用されますが、フォーム入力要素で最も一般的に使用されるため、ここに挙げています。
oninputイベントハンドラープロパティからも利用できます。invalid- 制約検証時に、要素が制約を満たしていなかった場合に発生します。
oninvalidイベントハンドラープロパティからも利用できます。 search (en-US)<input>のtype="search"で検索が開始されたときに発生します。
onsearchイベントハンドラープロパティからも利用できます。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| 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>