From 71d5a3a7239c4861b9e27c500bb8552d1847188c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Feb 2022 17:56:17 +0900 Subject: 2022/01/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlinputelement/index.md | 842 ++++++++++++++++------------- 1 file changed, 466 insertions(+), 376 deletions(-) (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/htmlinputelement/index.md b/files/ja/web/api/htmlinputelement/index.md index 9e01347320..2f6d58cc6f 100644 --- a/files/ja/web/api/htmlinputelement/index.md +++ b/files/ja/web/api/htmlinputelement/index.md @@ -7,420 +7,510 @@ tags: - HTML DOM - HTMLInputElement - Input - - Interface + - インターフェイス - NeedsContent - NeedsMarkupWork - - Reference + - リファレンス +browser-compat: api.HTMLInputElement translation_of: Web/API/HTMLInputElement --- -
{{ APIRef("HTML DOM") }}
+{{ APIRef("HTML DOM") }} -

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

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

{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram}} -

プロパティ

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

注: ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。

-
validity {{readonlyInline}}{{domxref("ValidityState")}} オブジェクト: その要素の現在の検証状態を返します。
validationMessage {{readonlyInline}}string: 制約検証をそのコントロールが満たさなかった場合、それを記述したローカライズされたメッセージを返します (もしあれば)。これは、コントロールが制約検証の候補ではない場合 ({{htmlattrxref("willValidate","input")}} が false の場合)、または制約を満たしている場合は空の文字列です。この値は、 setCustomValidity メソッドで設定できます。
willValidate {{readonlyInline}}boolean: その要素が制約検証の候補であるかどうかを返します。これは何か制約検証を阻む条件がある場合、例えば、 type が hidden、reset、button のいずれかである、祖先に {{HTMLElement("datalist")}} がある、 disabled プロパティが true である、などです。
 + hidden 以外のあらゆる型の input 要素に適用されるプロパティ +
{{domxref("HTMLInputElement.name", "name")}} + 文字列: その要素の {{ htmlattrxref("name", "input") }} 属性を返却または設定します。ここにはフォーム送信時にその要素を識別する名前が入ります。 +
{{domxref("HTMLInputElement.type", "type")}} + 文字列: その要素の {{ htmlattrxref("type", "input") }} 属性を返却または設定します。これは表示するコントロールの型を示します。利用可能な値については {{ HTMLElement("input") }} の {{ htmlattrxref("type", "input") }} 属性を参照してください。 +
{{domxref("HTMLInputElement.disabled", "disabled")}} + 論理値: その要素の {{ htmlattrxref("disabled", "input") }} 属性を返却または設定します。これはそのコントロールが対話を受け付けないかどうかを示します。その入力値はフォームとともに送信されません。 {{ htmlattrxref("readOnly", "input") }} もご覧ください。 +
{{domxref("HTMLInputElement.autofocus", "autofocus")}} + 論理値: その要素の {{ htmlattrxref("autofocus", "input") }} 属性を返却または設定します。ページが読み込まれたときに、ユーザーが別のコントロールに入力するなどしてそれを上書きしない限り、そのフォームコントロールが入力フォーカスを持つべきであることを指定します。文書内の一つの form 要素だけが {{htmlattrxref("autofocus","input")}} 属性を持つことができます。 {{htmlattrxref("type","input")}} 属性が hidden に設定されている場合には適用できません (つまり、非表示のコントロールにフォーカスを自動的に設定することはできません)。 +
{{domxref("HTMLInputElement.required", "required")}} + 論理値: その要素の {{ htmlattrxref("required", "input") }} 属性を返却または設定します。これは、フォームを送信する前にユーザーが値を入力しなければならないかどうかを示します。 +
{{domxref("HTMLInputElement.value", "value")}} + 文字列: そのコントロールの現在の値を返却または設定します。 +

注: ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。

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

メソッド

+## メソッド - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{domxref("HTMLOrForeignElement/blur", "blur()")}}input 要素からフォーカスを外します。キー入力はどこにも行かなくなります。
{{domxref("HTMLElement.click()", "click()")}}input 要素のクリックをシミュレートします。
{{domxref("HTMLOrForeignElement/focus", "focus()")}}input 要素にフォーカスを与えます。キー入力がこの要素に行くようになります。
{{domxref("HTMLInputElement.select()", "select()")}}input 要素のすべてのテキストを選択し、ユーザーがその内容をすべて置き換えることができるように、テキストにフォーカスを与えます。
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}input 要素のテキストの範囲を選択します (ただし、フォーカスは与えません)。
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}input 要素のテキストの範囲を新しいテキストで置き換えます。
setCustomValidity()要素に独自の検証メッセージ設定します。このメッセージが空の文字列ではない場合、その要素は独自の検証のエラーに見舞われており、検証に不合格になります。
checkValidity()boolean を返します。 false の場合はその要素が制約検証の候補であり、制約を満たしていないことを表します。この場合、その要素で {{event("invalid")}} イベントも発生します。 true の場合はその要素が制約検証の候補でないか、制約を満たしていることを表します。
reportValidity()checkValidity() メソッドを実行し、 false が返された場合 (無効な入力や pattern 属性が提供されていない場合) には、フォームを送信した場合と同様に、入力が無効であることをユーザーに報告します。
{{domxref("HTMLElement/blur", "blur()")}} + input 要素からフォーカスを外します。キー入力はどこにも行かなくなります。 +
{{domxref("HTMLElement.click()", "click()")}} + input 要素のクリックをシミュレートします。 +
{{domxref("HTMLElement/focus", "focus()")}} + input 要素にフォーカスを与えます。キー入力がこの要素に行くようになります。 +
{{domxref("HTMLInputElement.select()", "select()")}} + input 要素のすべてのテキストを選択し、ユーザーがその内容をすべて置き換えることができるように、テキストにフォーカスを与えます。 +
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}} + input 要素のテキストの範囲を選択します (ただし、フォーカスは与えません)。 +
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}input 要素のテキストの範囲を新しいテキストで置き換えます。
{{domxref("HTMLInputElement.setCustomValidity()", "setCustomValidity()")}} + 要素に独自の検証メッセージ設定します。このメッセージが空の文字列ではない場合、その要素は独自の検証のエラーに見舞われており、検証に不合格になります。 +
{{domxref("HTMLInputElement.showPicker()", "showPicker()")}} + 日付、時刻、色、ファイルのブラウザーのピッカーを表示します。 +
{{domxref("HTMLInputElement.checkValidity()", "checkValidity()")}} + 論理値を返します。 false の場合はその要素が制約検証の候補であり、制約を満たしていないことを表します。この場合、その要素で {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントも発生します。 true の場合はその要素が制約検証の候補でないか、制約を満たしていることを表します。 +
{{domxref("HTMLInputElement.reportValidity()", "reportValidity()")}} + checkValidity() メソッドを実行し、 false が返された場合 (無効な入力や pattern 属性が提供されていない場合) には、フォームを送信した場合と同様に、入力が無効であることをユーザーに報告します。 +
-
-
{{domxref("HTMLInputElement.stepDown()")}}
-
{{htmlattrxref("value","input")}} を ({{htmlattrxref("step","input")}} * n) だけ減少させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID_STATE_ERR 例外が発生します。 -
    -
  • 現在の {{htmlattrxref("type","input")}} の値にこのメソッドが適用できない場合
    • -
  • 要素に {{htmlattrxref("step","input")}} 値が設定されていない場合
    • -
  • {{htmlattrxref("value","input")}} が数値に変換できない場合
    • -
  • 結果の値が {{htmlattrxref("max","input")}} を超えたり、 {{htmlattrxref("min","input")}} を下回ったりする場合
    • -
-
-
{{domxref("HTMLInputElement.stepUp()")}}
-
{{htmlattrxref("value","input")}} を ({{htmlattrxref("step","input")}} * n) だけ増加させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID_STATE_ERR 例外が発生します。 -
    -
  • 現在の {{htmlattrxref("type","input")}} の値にこのメソッドが適用できない場合
    • -
  • 要素に {{htmlattrxref("step","input")}} 値が設定されていない場合
    • -
  • {{htmlattrxref("value","input")}} が数値に変換できない場合
    • -
  • 結果の値が {{htmlattrxref("max","input")}} を超えたり、 {{htmlattrxref("min","input")}} を下回ったりする場合
    • -
-
-
{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
-
入力欄で選択されたファイルを、与えられた {{domxref("File")}} オブジェクトの配列に設定します。これは、フレームスクリプトで使用可能な mozSetFileNameArray() の代替となるものです。クロームスクリプトはファイルを File オブジェクトとして開き、メッセージマネージャーを介してそれらを送信することができます。
-
{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
-
その入力欄からすべてのファイル名の配列を返します。
-
{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
-
入力で選択されたファイルのファイル名を設定します。ファイルシステムにアクセスするので、フレームスクリプトでは使用できません。
-
+- {{domxref("HTMLInputElement.stepDown()", "stepDown()")}} -

イベント

+ - : {{htmlattrxref("value","input")}} を ({{htmlattrxref("step","input")}} * n) だけ減少させます。 n が指定されなかった場合の既定値は 1 です。次の場合は `InvalidStateError` 例外が発生します。 -

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

+ - 現在の {{htmlattrxref("type","input")}} の値にこのメソッドが適用できない場合 + - 要素に {{htmlattrxref("step","input")}} 値が設定されていない場合 + - {{htmlattrxref("value","input")}} が数値に変換できない場合 + - 結果の値が {{htmlattrxref("max","input")}} を超えたり、 {{htmlattrxref("min","input")}} を下回ったりする場合 -
-
input
-
{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} のいずれかの要素の value が変更されたときに発生します。なお、このイベントは実際には {{domxref("HTMLElement")}} インターフェイス上で発生し、 contenteditable 要素にも適用されますが、フォーム入力要素で最も一般的に使用されるため、ここに挙げています。
-oninput イベントハンドラープロパティからも利用できます。
-
invalid
-
制約検証時に、要素が制約を満たしていなかった場合に発生します。
- oninvalid イベントハンドラープロパティからも利用できます。
-
search
-
{{HTMLElement("input")}} の type="search" で検索が開始されたときに発生します。
- onsearch イベントハンドラープロパティからも利用できます。
-
+- {{domxref("HTMLInputElement.stepUp()", "stepUp()")}} -

仕様書

+ - : {{htmlattrxref("value","input")}} を ({{htmlattrxref("step","input")}} * n) だけ増加させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID_STATE_ERR 例外が発生します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}技術的に、tabindex と accesskey の各プロパティ、ならびに blur()、click()、focus() の各メソッドが {{domxref("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()
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}size プロパティが unsigned long になりました。type プロパティはすべて小文字で指定する必要があります。
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}初回定義
+ - 現在の {{htmlattrxref("type","input")}} の値にこのメソッドが適用できない場合 + - 要素に {{htmlattrxref("step","input")}} 値が設定されていない場合 + - {{htmlattrxref("value","input")}} が数値に変換できない場合 + - 結果の値が {{htmlattrxref("max","input")}} を超えたり、 {{htmlattrxref("min","input")}} を下回ったりする場合 + +- {{domxref("HTMLInputElement.mozSetFileArray()", "mozSetFileArray()")}} {{non-standard_inline}} + - : 入力欄で選択されたファイルを、与えられた {{domxref("File")}} オブジェクトの配列に設定します。これは、フレームスクリプトで使用可能な `mozSetFileNameArray()` の代替となるものです。クロームスクリプトは[ファイルを File オブジェクトとして開き](/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code)、[メッセージマネージャー](/ja/docs/Mozilla/Firefox/Multiprocess_Firefox/The_message_manager)を介してそれらを送信することができます。 +- {{domxref("HTMLInputElement.mozGetFileNameArray()", "mozGetFileNameArray()")}} {{non-standard_inline}} + - : その入力欄からすべてのファイル名の配列を返します。 + +## イベント + +以下のイベントは、 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を用いるか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして待ち受けしてください。 + +- [`input`](/ja/docs/Web/API/HTMLElement/input_event) + - : {{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} のいずれかの要素の `value` が変更されたときに発生します。なお、このイベントは実際には {{domxref("HTMLElement")}} インターフェイス上で発生し、 [`contenteditable`](/ja/docs/Web/HTML/Global_attributes/contenteditable) 要素にも適用されますが、フォーム入力要素で最も一般的に使用されるため、ここに挙げています。 + [`oninput`](/ja/docs/Web/API/GlobalEventHandlers/oninput) イベントハンドラープロパティからも利用できます。 +- [`invalid`](/ja/docs/Web/API/HTMLInputElement/invalid_event) + - : 制約検証時に、要素が制約を満たしていなかった場合に発生します。 + [`oninvalid`](/ja/docs/Web/API/GlobalEventHandlers/oninvalid) イベントハンドラープロパティからも利用できます。 +- [`search`](/ja/docs/Web/API/HTMLInputElement/search_event) + - : {{HTMLElement("input")}} の `type="search"` で検索が開始されたときに発生します。 + [`onsearch`](/ja/docs/Web/API/GlobalEventHandlers/onsearch) イベントハンドラープロパティからも利用できます。 + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -
-

{{Compat("api.HTMLInputElement")}}

-
+{{Compat}} -

関連情報

+## 関連情報 - +- このインターフェイスを実装している HTML 要素: {{ HTMLElement("input") }} -- cgit v1.2.3-54-g00ecf