<input>: HTML 入力要素

<input> は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。<input> 要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。

試してみましょう

<label for="name">名前(4 〜 8 文字):</label>
<input
 type="text"
 id="name"
 name="name"
 required
 minlength="4"
 maxlength="8"
 size="10" />

label {
 display: block;
 font:
 1rem "Fira Sans",
 sans-serif;
}
input,
label {
 margin: 0.4rem 0;
}

<input> の型

<input> の動作は type 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は text です。

利用可能な型は次の通りです。

<input type="button" name="button" value="ボタン" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

属性

<input> 要素は属性があるためたいへん強力です。上記の例で説明している type 属性が最も重要です。すべての <input> 要素が、HTMLInputElement インターフェイスに基づいているため、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性が一部の特定の入力型にのみ影響を与えます。さらに、ある属性が入力に与える影響は入力の種類によって異なり、様々な入力型に様々な方法で影響を与えます。

この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。

<input> 要素の属性にはグローバル属性が含まれ、さらに次のものがあります。

標準的な属性の説明の後に、いくつかの非標準的な属性を追加で記載しています。

個々の属性

accept

file 入力型に対してのみ有効です。accept 属性は file アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。file 入力型を参照してください。

alt

image ボタンに対してのみ有効です。alt 属性は画像の代替テキストを提供します。src の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。image 入力型を参照してください。

autocapitalize

入力されたテキストを自動的に大文字にするかどうか、大文字にする場合はその方法を制御します。詳しい情報はグローバル属性 autocapitalize のページを参照してください。

autocomplete

(論理属性ではありません!) autocomplete 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、email 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は autocomplete を参照してください。

autocomplete 属性は hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, password で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、checkbox, radio, file とすべてのボタン型を除いたすべての入力型で有効になります。

詳しい情報については autocomplete 属性を参照してください。パスワードセキュリティに関する情報や、autocomplete が hidden に対して他の入力型とどう異なるのかについての情報があります。

autofocus

論理属性で、指定された場合は、ページの読み込みが完了したとき(またはその要素を含む <dialog> が表示されたとき)に、自動的にその入力欄がフォーカスを持つことを示します。

メモ: autofocus 属性がついた要素は、DOMContentLoaded イベントが発生する前にフォーカスを得ることがあります。

文書中で一つの要素だけが autofocus 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。

autofocus は hidden 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。

警告: フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。autofocus が割り当てられると、スクリーンリーダーは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。

autofocus 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。スクリーンリーダーはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。

capture

HTML Media Capture 仕様書で導入され、file 入力型に対してのみ有効です。capture 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで file アップロードコントロールを使用してアップロードするかを定義します。file 入力型を参照してください。

checked

radio 型と checkbox 型の両方で有効で、checked は論理属性です。radio 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。checkbox 型に存在した場合、(ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。(HTMLInputElement の checked IDL 属性のみが更新されます。)

メモ: 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 checked の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。

例えば、name が fruit で、value が cherry であるチェックボックスがチェックされていると、送信されるフォームデータには fruit=cherry が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の value は on です。

dirname

hidden, text, search, url, tel, email 入力型について有効で、dirname 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは 2 組の名前と値を送信します。1 組目は name と value であり、2 組目は名前が dirname 属性の値で、値に ltr または rtl がブラウザーによって設定されます。

html

<form action="page.html" method="post">
 <label>
 Fruit:
 <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
 </label>
 <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

上記のフォームが送信されると、入力欄は name / value の組である fruit=cherry と、dirname / 書字方向の組である fruit-dir=ltr が送信されます。 詳しくは、 dirname attribute を参照してください。

disabled

論理属性で、存在する場合、ユーザーが入力欄を操作できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示す形で表示されます。

特に、無効になった入力欄は click イベントを受け取らず、フォームと共に送信されることもありません。

メモ: 仕様書で要件とはされていませんが、Firefox は既定で、ページを再読み込みしても <input> を 動的に無効化した状態を維持します。この機能は autocomplete 属性で制御することができます。

form

文字列で、入力欄が関連づけられた <form> 要素(つまり、フォームオーナー)を指定します。存在する場合、この文字列値は同一文書内の <form> 要素の id と一致している必要があります。この属性が指定されない場合は、<input> 要素は直近の内包するフォームに(もしあれば)関連付けられます。

form 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。

メモ: 入力欄は一つのフォームとしか関連付けることができません。

formaction

image および submit 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

formenctype

image および submit 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

formmethod

image および submit 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

formnovalidate

image および submit 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

formtarget

image および submit 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

height

image 入力型でのみ有効です。height はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。image 入力型を参照してください。

id

すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための <label> の for 属性の値として使用されます。<label> を参照してください。

inputmode

すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては none, text, tel, url, email, numeric, decimal, search があります。

list

list 属性で与えられる値は、同じ文書内にある <datalist> 要素の id としてください。<datalist> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。

これは text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color で有効です。

仕様書によれば、list 属性は hidden, password, checkbox, radio, file それにボタン型では対応していません。

ブラウザーによっては、独自のカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、<select> のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型についてはブラウザーの互換性一覧表を参照してください。

<datalist> 要素を参照してください。

max

date, month, week, time, datetime-local, number, range で有効であり、許可される値の範囲の最大値を定義します。要素に入力された value がこれを超えた場合、要素は制約検証に不合格になります。max 属性の値が数値でない場合は、要素に最大値は設定されません。

特殊な場合があります。データ型が期間を表す場合(日付や時刻など)、max の値は min の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。

maxlength

text, search, url, tel, email, password で有効であり、ユーザーがフィールドに入力することができる最大文字列長(UTF-16 コード単位で計測)を定義します。これは 0 以上の整数値でなければなりません。 maxlength が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は minlength の値以上である必要もあります。

欄に入力されたテキストの文字数が UTF-16 コード単位で maxlength よりも多いと、この入力欄は制約検証に不合格になります。既定では、ブラウザーはユーザーが maxlength 属性で許可された文字数以上を入力するのを防ぎます。制約検証は、ユーザーによって値が変更された場合にのみ適用されます。詳しくはクライアント側検証を参照してください。

min

date, month, week, time, datetime-local, number, range で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された value がこれを下回った場合、要素は制約検証に不合格になります。min 属性の値が数値でない場合は、要素に最小値は設定されません。

この値は max 属性の値以下である必要があります。min 属性が存在するものの、指定されていなかったり無効であったりした場合は、min の値は適用されません。min 属性が有効であり、値が空ではなく min 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくはクライアント側検証を参照してください。

特殊な場合があります。データ型が期間を表す場合(日付や時刻など)、max の値は min の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後 10 時から午前 4 時までの自国の範囲を指定することができます。

minlength

text, search, url, tel, email, password で有効であり、ユーザーがフィールドに入力することができる最小文字列長(UTF-16 コード単位で計測)を定義します。これは負数ではなく、maxlength で指定された値以下の整数値でなければなりません。minlength が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。

欄に入力されたテキストの文字数が UTF-16 コード単位で minlength よりも少ないと、この入力欄は制約検証に不合格になります。制約検証は、ユーザーによって値が変更された場合にのみ適用されます。詳しくはクライアント側検証を参照してください。

multiple

論理属性の multiple は、設定されている場合、email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また file 入力欄では複数のファイルを選択することができることを意味します。email および file 入力型を参照してください。

name

入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。

name は(厳密にはそうではありませんが)必須の属性と考えてください。入力欄に name が指定されていなかった場合や name が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。(無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。)

特殊な場合が 2 つあります。

1. _charset_ : <input> 要素の hidden 型として使用された場合、入力欄の value には自動的に、フォームを送信するのに使用される文字エンコーディングがユーザーエージェントによって設定されます。
2. isindex: 歴史的な理由で、isindex という名前は許可されていません。

name 属性はラジオボタンでは独特の動きをします。

同名のラジオボタングループ内で、一度にチェックできるラジオボタンは 1 つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。

同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの 1 つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの 1 つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、1 つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。

グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。

入力要素に name が与えられると、その名前は所有するフォーム要素の HTMLFormElement.elements プロパティのプロパティになります。name が guest に設定されている入力と、name が hat-size に設定されている入力がある場合、以下のコードを使用することができます。

js

let form = document.querySelector("form");
let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

このコードを実行すると、guestName が HTMLInputElement の guest フィールドに、hatSize が hat-size フィールドのオブジェクトになります。

警告: フォームの組み込みプロパティに対応する name をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。

pattern

text, search, url, tel, email, password で有効です。pattern 属性は、指定された場合、入力の value が一致すれば値が制約検証を通過したとみなされる正規表現をコンパイルするのに使われます。これは RegExp 型で使用される有効な JavaScript の正規表現でなければならず、これは正規表現のガイドで説明されている通りです。パターンのテキストの周囲にスラッシュを指定しないでください。正規表現がコンパイルするときには、次のようになります。

1. パターンは暗黙的に ^(?: と )$ で囲まれ、入力値全体と一致することが要求されます。すなわち、 ^(?:<パターン>)$ となります。
2. 'v' フラグを指定すると、パターンは ASCII ではなく、Unicode コードポイントの並びとして扱われます。

pattern 属性が存在するが指定されていない、または不正な場合は、正規表現は適用されず、この属性は完全に無視されます。 pattern 属性が有効で、空ではない値がパターンと一致しない場合、制約検証によりフォームの送信が阻止されます。 multiple が存在する場合は、コンパイルされた正規表現がカンマで区切られた各値と照合されます。

メモ: pattern 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、title 属性を含めることもできます。 アクセシビリティを確保するには、視覚的な説明が必要です。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。

詳しくはクライアント側の検証を参照してください。

placeholder

text, search, url, tel, email, password, number で有効です。placeholder 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明やプロンプトではなく、期待されるデータのタイプのヒントとなる単語や短いフレーズである必要があります。テキストには、改行を含めてはいけません。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。

メモ: placeholder 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細はラベルを参照してください。

popovertarget

<input type="button"> をポップオーバー制御ボタンにします。制御するポップオーバー要素の ID を値として取ります。詳細はポップオーバー API のランディングページを参照してください。 popovertarget 属性を使用してポップオーバーとその呼び出しボタンを関連付けると、さらに 2 つの有益な効果があります。

• ブラウザーは、ポップオーバーと呼び出し元の間に、暗黙的な aria-details および aria-expanded の関係を生成し、ポップオーバーを表示させる際には、キーボードフォーカスナビゲーションの論理的な位置にポップオーバーを配置します。これにより、キーボードや支援技術 (AT) のユーザーにとって、ポップオーバーがよりアクセスしやすくなります(ポップオーバーのアクセシビリティ機能も参照してください)。
• ブラウザーは、 2 つの間に暗黙的なアンカー参照を作成し、 CSS アンカー位置指定を使用して、ポップオーバーをそのコントローラーに対して相対的に配置することをとても便利にします。詳細は、ポップオーバーのアンカー位置指定を参照してください。

popovertargetaction

制御用の <input type="button"> で制御されるポップオーバー要素で行われる動作を指定します。取りうる値は次の通りです。

"hide"

このボタンは、表示されているポップオーバーを非表示にします。非表示になっているポップオーバーを非表示にしようとした場合は、何もしません。

"show"

このボタンは、非表示のポップオーバーを表示させます。すでに表示されているポップオーバーを表示させようとしても、何もしません。

"toggle"

このボタンは、ポップオーバーの表示と非表示を切り替えます。ポップオーバーが非表示の場合、表示させます。ポップオーバーが表示されている場合、非表示になります。popovertargetaction が省略された場合は、"toggle" が制御ボタンで実行される既定のアクションです。

readonly

論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。readonly 属性は text, search, url, tel, email, date, month, week, time, datetime-local, number, password の各入力型が対応しています。

詳しくは HTML 属性: readonly を参照してください。

required

required は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。required 属性は text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, file の各入力型で対応しています。

詳しくはクライアント側の検証および HTML 属性: required を参照してください。

size

email, password, tel, text の input 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、CSS の width プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。password や text の場合は文字数(または em 単位)で既定値は 20、それ以外の場合はピクセルとなります。CSS の width は size 属性よりも優先されます。

src

image 入力ボタンにのみ有効で、src は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。image 入力型を参照してください。

step

date, month, week, time, datetime-local, number, range で有効です。step 属性は、値が準拠すべき粒度を指定する数値です。ステップベースからの整数倍のステップ数である値のみが有効です。ステップベースは、指定されている場合は min、指定されていない場合は value、どちらも指定されていない場合は 0 となります(ただし、week は例外で、既定のステップベースは −259,200,000, これは週 1970-W01 の先頭を示します)。

明示的に指定しない場合は次のようになります。

• step の既定値は、number と range の場合は 1 です。
• 日付や時刻の入力型では、型ごとにふさわしい step の既定値があります。date、datetime-local、month、time、week の個別のページを参照してください。

値は、正の整数または浮動小数点実数、または特殊な値 any のいずれかでなければなりません。これは、ステップが考慮されず、あらゆる値が許容されることを意味します(min や max などの他の制約がない場合)。

例えば、<input type="number" min="10" step="2"> とすると、10 以上の偶数の整数であればすべて有効となります。<input type="number"> のように省略された場合は、整数であれば何でも有効ですが、浮動小数点実数 (4.2 など) は step の既定値が 1 なので有効ではありません。4.2 を有効にするためには、step に any、0.1、0.2 に設定するか、min の値を .2 で終わる数に(例えば <input type="number" min="-5.2"> に)設定する必要があります。

メモ: ユーザーが入力したデータがステップの設定に従っていない場合、その値は制約検証で無効とみなされ、:invalid 擬似クラスに一致するようになります。

詳しくはクライアント側の検証を参照してください。

tabindex

すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。

title

すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに <label> 要素を使用し、その for 属性でフォームコントロールの id 属性を指すようにしてください。下記のラベルを参照してください。

type

文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、checkbox の値が使用されます。省略された場合(または不明な値が指定された場合)は、入力型に text が使用され、テキストの入力欄が生成されます。

許可されている値は input の型にあります。

value

入力コントロールの値です。HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの HTMLInputElement オブジェクトの value プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。value 属性は常に省略可ですが、checkbox, radio, hidden においては必須だと考えてください。

width

image 入力ボタンにのみ有効で、width にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。image 入力型を参照してください。

標準外の属性

一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。

incremental 非標準

論理属性 incremental は WebKit および Blink 拡張で(そのため Safari, Opera, Chrome, などが対応)、もし存在すれば、ユーザーエージェントに入力をライブ検索として処理します。ユーザーがフィールドの値を編集すると、ユーザーエージェントは search イベントを検索ボックスを表す HTMLInputElement オブジェクトへ送信します。これにより、ユーザーが検索を編集するたびに、コードからリアルタイムに検索結果を更新することができます。

incremental が指定されていない場合、search イベントはユーザーが明示的に検索を実行した時のみ(フィールドを編集中に Enter または Return キーを押すなど) 送信されます。

search イベントは発生頻度が制限されているため、実装により定義された間隔よりも頻繁に送信されることはありません。

orient 非標準

CSS の標準外の -moz-orient non-standard プロパティと同様に <progress> および <meter> 要素に影響を与える orient 属性は、範囲スライダーの向きを定義する定義します。値は horizontal が範囲を水平方向に描画することを、vertical が範囲を垂直に描画することを意味します。垂直フォームコントロールを作成する現行の手法については、垂直フォームコントロールの作成を参照してください。

results 非標準

results 属性は Safari のみが対応しており、 <input> 要素のネイティブな検索クエリーのドロップダウンメニューに表示する項目の最大数を上書きすることができる数値です。

この値は、負でない 10 進数でなければならなりません。指定しない場合、または無効な値を指定した場合は、ブラウザーの既定の最大項目数が使用されます。

webkitdirectory 非標準

論理属性の webkitdirectory は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリーのみを選択することができることを示します。詳しい解説と例については HTMLInputElement.webkitdirectory を参照してください。

webkitdirectory はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。

メソッド

以下のメソッドは DOM 内で <input> を表現する HTMLInputElement インターフェイスで提供されます。親インターフェイスである HTMLElement, Element, Node, EventTarget で指定されているメソッドも使用できます。

checkValidity()

要素の有効性チェックを直ちに実行し、値が有効でない場合は文書に対して invalid イベントを要素に発生させます。

reportValidity()

要素の値が有効性チェックを通過した場合は true を返します。それ以外の場合は false を返し、要素に対して invalid イベントを発行し、(そのイベントが取り消されない場合)問題をユーザーに報告します。

select()

要素が選択可能な場合、<input> 要素の内容を選択します。選択可能なテキストコンテンツがない要素(カラーピッカーまたはカレンダー日付入力など)では、このメソッドは何もしません。

setCustomValidity()

入力要素の値が有効ではないときに表示する独自のメッセージを設定します。

setRangeText()

入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。selectMode 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。

setSelectionRange()

テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。

showPicker()

通常、要素が選択されたときに表示される入力要素のブラウザーピッカーを表示しますが、ボタン押下や他のユーザー操作によって発生させます。

stepDown()

数値入力欄の値を既定で 1、または指定された数値の単位だけ減少させます。

stepUp()

数値入力欄の値を既定で 1、または指定された数値の単位だけ増加させます。

CSS

置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。

UI 擬似クラス

擬似クラスの例

チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル設定することができます。この例では、color と font-weight でチェックされたボックスの直後にある <label> をスタイル設定しています。input がチェックされていない場合はスタイルを適用しません。

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput"
 >このチェックボックスのオンとオフを切り替えてください</label
>

input:checked + label {
 color: red;
 font-weight: bold;
}

属性セレクター

属性セレクターを使用すると、様々なフォームコントロールの型のターゲットを type に基づいて絞ることができます。CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。

/* password 入力欄に一致 */
input[type="password"] {
}
/* 有効な値の範囲が限定されているフォームコントロールに一致 */
input[min][max] {
}
/* pattern 属性の付いたフォームコントロールに一致 */
input[pattern] {
}

::placeholder

既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。::placeholder 擬似要素は入力欄の placeholder のテキストです。これは限定された CSS プロパティでスタイル設定することができます。

::placeholder {
 color: blue;
}

::first-line 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに ::placeholder を使用した規則で使用することができます。

caret-color

テキスト入力関連要素に特有のプロパティとして、CSS の caret-color プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。

HTML

<label for="textInput">赤いキャレットに注意:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
 caret-color: red;
 font:
 16px "Helvetica",
 "Arial",
 sans-serif;
}

結果

field-sizing

field-sizing プロパティは、フォーム入力欄のサイズ設定の動作を制御することができます(つまり、既定では推奨されるサイズが設定されています)。このプロパティを使用すると、既定の動作を上書きして、フォームコントロールがコンテンツに合わせてサイズを調整できるようになります。

このプロパティは通常、コンテンツを収縮包装し、テキストが入力されるにつれて大きくなるフォームフィールドを形成するために使用します。これは、直接テキスト入力を受け入れる入力型(例えば、text、url、file 入力型、<textarea> 要素で動作します。

object-position と object-fit

<input> 要素は特定の場合(多くはテキスト以外の入力や特殊なインターフェイス)(には、置換要素になることがあります。その場合、CSS の object-position および object-fit プロパティを使って、要素の枠内での大きさと位置を調整することができます。

スタイル設定

HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。

• CSS を使った HTML の要素への色の適用

こちらも参照してください。

• HTML フォームへのスタイル設定
• HTML フォームへの高度なスタイル設定

追加機能

ラベル

ラベルは支援テキストを <input> に関連付けるために必要です。<label> 要素は、フォームの入力欄を説明するために、(レイアウト方法はさておき)常に適切な手段です。<label> を使用して <input> や <textarea> に何を入力するべきかを説明することは、決して悪い考えではありません。

関連付けられたラベル

<input> 要素と <label> 要素を意味的に連携させると、スクリーンリーダーなどの支援技術に役立ちます。<label> の for 属性を使って連携させることで、ラベルと入力欄を結び付け、画面リーダーがユーザーに入力欄についてより正確に説明できるようになります。

<input> 要素にプレーンテキストが隣接しているだけでは十分ではありません。ユーザビリティとアクセシビリティのためには、暗黙的または明示的な <label> を含めることが必要です。

<!-- アクセシブルではない -->
<p>名前を入力してください: <input id="name" type="text" size="30" /></p>
<!-- 暗黙的なラベル -->
<p>
 <label>名前を入力してください: <input id="name" type="text" size="30" /></label>
</p>
<!-- 明示的なラベル -->
<p>
 <label for="name">名前を入力してください: </label>
 <input id="name" type="text" size="30" />
</p>

最初の例は、プロンプトと <input> 要素の間に関係がないため、アクセシブルではありません。

ラベルはアクセシブルな名前を提供するばかりではなく、マウスやタッチパネルのユーザーがクリックしたりタッチしたりする際に、「ヒット」領域を拡大することができます。<label> と <input> を連携させることで、どちらかをクリックすると <input> にフォーカスが当たります。入力欄の「ラベル」にプレーンテキストを使用した場合、このようなことは起こりません。入力欄のアクティベーション領域にプロンプト部分が含まれていると、運動制御の条件を持つ人には便利です。

ウェブ開発者として大切なのは、私たちが知っていることを、人々がすべて知っていると思わないことです。ウェブを利用する人々に多様性があるということは、自分のウェブサイトにも及ぶことですが、サイトの訪問者の中には、思考プロセスや状況に何らかの違いがあり、明確で適切なラベルがなければ、あなたのフォームをあなたとは全く異なるように解釈する人がいるということでもあります。

プレイスホルダーはアクセシブルではない

placeholder 属性で、<input> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために決して必要なものではありません。プレイスホルダーはラベルではありませんので、代用として使用してはいけません。プレイスホルダーは、入力された値がどのように見えるかのヒントを提供するために使用されるもので、説明やプロンプトではありません。

プレイスホルダーは、スクリーンリーダーがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりした場合、プレイスホルダーは非表示になります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップすることがあります。すなわち placeholder は翻訳されないことがあります。

クライアント側の検証

上記の UI 擬似クラスの節で述べたように、CSS を用いて、それぞれの入力欄の現在の状態に基づく :valid または :invalid の UI 状態に基づいて入力欄にスタイル設定をすることに加え、フォームを送信(しようと)したときに、ブラウザーはクライアント側の検証を行います。フォームを送信する時に、制約検証に不合格になったフォームコントロールがある場合、対応しているブラウザーは、最初の無効なフォームコントロールにエラーメッセージを表示します。エラー種別に基づいた既定のメッセージを表示したり、ユーザーが設定したメッセージを表示したりします。

一部の入力型やその他の属性によっては、入力に対して有効な値を制限するものがあります。例えば、<input type="number" min="2" max="10" step="2"> の場合、2、4、6、8、10 の数値のみが有効になります。様々なエラーが発生する可能性があります。例えば、rangeUnderflow エラー(値が 2 より小さい場合)、rangeOverflow (10 より大きい場合)、stepMismatch (値が 2 から 10 の間の数字で偶数の整数でない (step 属性の要件に合わない) 場合)、typeMismatch (値が数値ではない場合)などです。

可能な値の範囲が周期的な(つまり、値が取りうる最大値で終了するのではなく、最初に戻る)入力型では、max プロパティと min プロパティの値を逆にして、許可される値の範囲が min から始まり、可能な最小値まで回り込んで、max に達するまで続くことを示すことが可能です。これは日付や時刻の場合、例えば午後 8 時から午前 8 時までの範囲を許可したい場合などに特に便利です。

<input type="time" min="20:00" max="08:00" name="overnight" />

決まった属性と値の組み合わせが、validityState の決まったエラーを発生させます。

フォームコントロールに required 属性がない場合、値がなかったり空文字列であったりしても無効にはなりません。required 以外の上記の属性があった場合も、空文字列でエラーにはなりません。

どのような値を受け入れることができるかの制限を設けることができるので、対応しているブラウザーはこれらのフォームの値をネイティブに検証し、フォームの送信時に誤りがある場合はユーザーに警告を発します。

上記の表で説明したエラーに加え、validityState インターフェイスには badInput, valid, customError の論理型の読み取り専用プロパティがあります。検証オブジェクトに含まれるのは次の通りです。

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

これらの論理型プロパティではそれぞれ、true の値で指定された観点の検証に合格しなかった可能性があることを示しますが、valid プロパティは例外で、その要素の値がすべての検証に合格したときに true になります。

エラーがあった場合、対応しているブラウザーでは、ユーザーに警告するとともに、フォームの送信を阻止します。注意点としては、独自のエラーに真とみなされる値(空の文字列や null 以外)が設定されていると、フォームの送信が阻止されます。独自のエラーメッセージがなく、他のどのプロパティも true を返さない場合、valid は true となり、フォームは送信されます。

function validate(input) {
 let validityState_object = input.validity;
 if (validityState_object.valueMissing) {
 input.setCustomValidity("値が必要です");
 } else if (validityState_object.rangeUnderflow) {
 input.setCustomValidity("値が低すぎます");
 } else if (validityState_object.rangeOverflow) {
 input.setCustomValidity("値が高すぎます");
 } else {
 input.setCustomValidity("");
 }
}

最後の行、独自の検証メッセージを空文字列に設定することが重要です。ユーザーがエラーを起こし、validity が設定されている場合、すべての値が有効であっても、メッセージが null になるまで送信に失敗します。

独自の検証エラーの例

フィールドの検査に不合格になった場合に独自のエラーメッセージを表示させたい場合は、<input> (および関連する) 要素で利用できる制約検証 API を使用する必要があります。以下のような形を取ってください。

<form>
 <label for="name">ユーザー名を入力してください(英大文字および小文字): </label>
 <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
 <button>送信</button>
</form>

基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、pattern と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。

独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。

const nameInput = document.querySelector("input");
nameInput.addEventListener("input", () => {
 nameInput.setCustomValidity("");
 nameInput.checkValidity();
});
nameInput.addEventListener("invalid", () => {
 if (nameInput.value === "") {
 nameInput.setCustomValidity("名前を入力してください。");
 } else {
 nameInput.setCustomValidity(
 "ユーザー名には英大文字と小文字のみが使えます。入力しなおしてください。",
 );
 }
});

この例は次のように表示されます。

簡単に言えば、以下の通りです。

• input 要素が有効であるかの状態をチェックするために、値が変更されるたびに checkValidity() メソッドを input イベントハンドラーから呼び出します。
• 値が有効ではない場合、invalid イベントが発行され、invalid イベントのハンドラー関数が実行されます。この関数の中で、値が無効である原因が空欄であるためであるか、パターンに一致しないためであるかを確認し、if () ブロックを使用して、独自の検証エラーメッセージを設定します。
• 結果として、送信ボタンが押されたときに入力値が有効ではない場合は、独自のエラーメッセージのうちの一つが表示されます。
• 有効である場合は、期待通りに送信されます。この場合、独自の検証は setCustomValidity() を空文字列で呼び出すことで中断されます。従って、input イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に有効な値を持っていたとしても、入力欄は無効であるとして登録されます。

ローカライズ

<input> 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、他のロケールではこの数値を入力する方法が 1.000,00 であったりします。

Firefox は(少なくとも type="number" において)ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。

• 当該要素または親要素の lang/xml:lang 属性で指定された言語
• HTTP の Content-Language ヘッダーで指定された言語
• 何も指定されていない場合は、ブラウザーのロケール

アクセシビリティ

ラベル

入力フィールドを設ける場合、横に並んだラベルを追加することはアクセシビリティの要件となります。これは、支援技術を使用する人が、その入力フィールドが何のためのものなのかを理解できるようにする必要があるためです。また、ラベルをクリックまたはタッチすると、そのラベルに関連付けられたフォームコントロールにフォーカスが移動します。これにより、視覚障碍者にとってのアクセシビリティとユーザビリティが向上し、ユーザーがフォームコントロールを起動するためにクリックまたはタッチできる領域が広がります。これは、特にラジオボタンやチェックボックスなど、小さなフォームコントロールに対して特に有用です。ラベルについての一般的な詳細情報は、ラベルをご覧ください。

上記スタイル設定における <label> と <input> 要素の関連付けられた例を次に示します。 <input> には id 属性を指定する必要があります。 <label> には、入力の id と同じ値を持つ for 属性が必要です。

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />

大きさ

×ばつ44 CSS ピクセル を最小値とすることが推奨されています。

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

技術的概要

仕様書

ブラウザーの互換性

関連情報

• CSS の appearance プロパティ
• 初めての HTML フォーム
• HTML フォームを構成する方法
• ネイティブのフォームウィジェット
• フォームデータの送信
• フォームの制約検証
• HTML フォームへのスタイル設定