<input>要素

<input>要素の定義

英語で「入力」を意味する、”input”より。HTML文書では、ユーザーから入力を受け付けるための、様々なコントロールを作成する際に利用されます。
<input>要素は空要素のため、子要素にできるものはありません。

<input>要素の種類

<input>要素は”type”属性の値によって、様々な種類のものが用意されています。

• button型　特定の動作を持たないプッシュボタン
• checkbox型　選択または未選択のうちひとつの値をとることができるチェックボックス
• color型　色を指定するためのコントロール。
• date型　日付 (時刻を除く年、月、日) を入力するためのコントロール
• datetime-local型　タイムゾーン情報がない日付と時刻を入力するためのコントロール
• email型　電子メールアドレスを入力するための欄
• file型　ユーザーにファイルを選択させるコントロール
• hidden型　画面上には表示させない、非表示のコントロール（値はサーバーに送信されます）
• image型　画像による送信ボタン。
• month型　タイムゾーン情報がない年と月を入力するためのコントロール
• number型　数値を入力するためのコントロール
• password型　入力値を隠す1行テキストフィールド
• radio型　複数の選択肢からひとつの値を選択できるラジオボタン
• range型　正確な値であることが重要ではない数値を入力するためのコントロール
• reset型　フォームのコントロールを既定値にリセットするボタン
• search型　検索文字列を入力するための1行入力フィールド。改行は自動的に入力値から取り除かれます。
• submit型　フォームを送信するボタン
• tel型　電話番号を入力するためのコントロール
• text型　1行入力フィールド。改行は自動的に入力値から取り除かれます。
• time型　タイムゾーン情報がない時刻を入力するためのコントロール
• url型　URL を入力するための欄
• week型　年と週番号で構成される日付を入力するためのコントロール。週番号はタイムゾーンを伴いません。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

• button型 ： link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
• checkbox型 ： button, menuitemcheckbox, option, switch
• image型 ： link, menuitem, menuitemcheckbox, menuitemradio, radio, switch
• radio型 ： menuitemradio
• それ以外 ： なし

DOMインターフェース

HTMLInputElement

属性

グローバル属性が指定できます。
なお、<input>要素の属性は、種類によって使えるものや使い方が変わるものもありますので、ここでは、すべての種類で共通のものについて紹介します。

autocomplete

文字列で、入力欄がどの種類の自動補完機能を提供するのかを記述します。ただし、数値やテキストデータを扱わない、radio型 や checkbox型 では効果がありません。

autofocus

論理属性で、この属性を指定した場合、自動的にその入力欄がフォーカスを持つようになります。
なお、この属性を指定できるのは、文書内で１つの要素のみです。

disabled

論理属性で、この属性を指定した場合、その入力欄の操作が不可能になり、データも送信されません。

form

その入力欄が関連付けられた <form> 要素のidを指定します。これにより、入力欄を <form> 要素の外側に置くことが出来ます。

list

その入力欄が関連付けられた、定義済みデータを提供する、<datalist> 要素の id を指定します。

name

入力欄の名前を指定する文字列です。フォームが実際に送信される際には、このnameの値と、入力値の組み合わせがフォームのデータとして送信されます。

readonly

論理属性で、この属性を指定した場合、入力欄の値を変更することが出来なくなります。ただし、disable属性とは異なり、データ自体は送信されます。

required

論理属性で、この属性を指定した場合、入力欄へのデータの入力が「必須」となります。ただし、readonly 属性が同時に指定されている入力欄には効果がありません。
ただし、以下の型は、required属性には対応していません。

• color型
• submit型
• button型
• hidden型
• image型
• range型
• reset型

tabindex

入力欄が TAB キーを利用してフォーカスを受け取るかどうか、受け取る場合はその順序を整数値で指定します。

• 正の整数の場合：要素のタブ順序を示します。 TAB キーで数値の順にフォーカスが移動し、Shift ＋ TAB キーで、数値の逆順にフォーカスが移動します。
• ０の場合：要素のタブ順序をユーザーエージェントに任せます。
• 負の整数の場合：通常は”-1″を指定します。フォーカスを受け取るが、連続的なキーボード操作では、フォーカスを受け取らないようになります。

type

<input>要素の種類（型）を指定します。

value

入力欄の初期値を指定します。

サンプル

See the Pen PoYRBGq by Masahiko Iwakiri (@m-iwakiri) on CodePen.