input 要素

概要

HTML <input> 要素は、Web ベースのフォーム用のインタラクティブなコントロールを作成するために使用します。

• コンテンツカテゴリ フローコンテンツ、リスト化、サブミット可能、リセット可能、フォーム関連要素、フレージングコンテンツ。
  type の値が hidden でない場合はラベル付け可能要素、パルパブルコンテンツ。
• 許可された内容 なし。これは空要素です。
• タグの省略 開始タグが必須で、終了タグは不要です。
• 許可された親要素 フレージングコンテンツを受け入れるすべての要素
• DOM インターフェイス HTMLInputElement

属性

この要素はグローバル属性をサポートしています。

type

表示するコントロールの種類です。この属性を指定しない場合のデフォルトタイプは text です。以下の値が指定可能です。

• button: デフォルトの動作がないプッシュボタン。
• checkbox: チェックボックス。このアイテムで送信する値を定義するため、value 属性を使用しなければなりません。このアイテムが選択されているかを示すには、checked 属性を使用します。また、チェックボックスが不確定の状態 (ほとんどのプラットフォームで、チェックボックスを横切る水平線が引かれます) を表すために、indeterminate 属性を使用できます。
• color: HTML5 色を指定するためのコントロール。
• date: HTML5 日付 (時刻を除く年、月、日) を入力するためのコントロール。
• datetime: HTML5 UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロール。
• datetime-local: HTML5 タイムゾーン情報がない日付と時刻を入力するためのコントロール。
• email: HTML5 電子メールアドレスを入力するためのフィールド。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
• file: ユーザにファイルを選択させるコントロール。コントロールで選択できるファイルの種類を定義するには、accept 属性を使用します。
• hidden: 表示しないコントロールですが、その値はサーバに送信します。
• image: 画像による送信ボタン。画像のソースを定義するために src 属性を、また代替テキストを定義するために alt 属性を使用しなければなりません。height および width 属性を使用して、画像のサイズをピクセル値で定義できます。
• month: HTML5 タイムゾーン情報がない年と月を入力するためのコントロール。
• number: HTML5 浮動小数点数値を入力するためのコントロール。
• password: 入力値を隠す 1 行テキストフィールド。入力可能な最大文字数を指定するには、maxlength 属性を使用します。
• radio: ラジオボタン。このアイテムで送信する値を定義するため、value 属性を使用しなければなりません。このアイテムがデフォルトで選択されるかを示すには、checked 属性を使用します。name 属性に同じ値を持つラジオボタンは同一の "ラジオボタングループ" に入ります。グループ内で同時にひとつだけのラジオボタンを選択できます。
• range: HTML5 正確な値が重要な数値を入力するためのコントロール。このコントロールは、対応する属性が指定されていない場合に以下のデフォルト値を使用します:
  • min: 0
  • max: 100
  • value: min + (max-min)/2、または max が min より小さい場合は min
  • step: 1
• reset: フォームのコントロールをデフォルト値にリセットするボタン。
• search: HTML5 検索文字列を入力するための 1 行入力フィールド。改行は自動的に入力値から取り除かれます。
• submit: フォームを送信するボタン。
• tel: HTML5 電話番号を入力するためのコントロール。改行は自動的に入力値から取り除かれますが、他に強要される文法はありません。pattern や maxlength といった属性を使用して、コントロールに入力する値を制限できます。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
• text: 1 行入力フィールド。改行は自動的に入力値から取り除かれます。
• time: HTML5 タイムゾーン情報がない時刻を入力するためのコントロール。
• url: HTML5 URL を入力するためのフィールド。ユーザは空欄や正しくないアドレスの入力が可能です。改行は自動的に入力値から取り除かれます。pattern や maxlength といった属性を使用して、コントロールに入力する値を制限できます。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
• week: HTML5 年と週の値から成る日付およびタイムゾーン情報がない週番号を入力するためのコントロール。

accept

type 属性の値が file である場合に、この属性はサーバが受け入れるファイルの種類を示します。type 属性が他の値である場合は無視します。値は固有のコンテンツタイプ識別子の、カンマ区切りのリストでなければなりません:

• パラメータを持たない、正しい MIME type
• audio/* は音声ファイルを表す HTML5
• video/* は動画ファイルを表す HTML5
• image/* は画像ファイルを表す HTML5

accesskey HTML 4 のみ、廃止 HTML5

入力フォーカスをコントロールに切り替えるためにユーザが押下できる 1 文字。この属性は HTML5 のグローバル属性です。

mozactionhint

仮想キーボードを持つモバイルデバイスで、Enter キーのラベルを決めるために使用する "アクションヒント" を指定します。サポートする値は go、done、next、search、send です。これらは自動的に、適切な文字列に割り当てられます (大文字・小文字は区別しません)。

autocomplete HTML5

この属性は、コントロールの値をブラウザが自動的に補完してよいかを示します。この属性は、type 属性の値が hidden、checkbox、radio、file あるいはボタンタイプ (button、submit、reset、image) である場合は無視されます。以下の値が指定可能です。

• off: ユーザはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザは入力内容の自動補完を行いません。
• on: ブラウザはユーザが以前入力した値を元に、値の自動補完を行うことができます。

input 要素で autocomplete 属性を指定していない場合は、ブラウザは <input> 要素のフォームオーナーの autocomplete 属性の値を使用します。フォームオーナーは当該 <input> 要素が子孫になっている form 要素か、input 要素の form 属性で id を指定されている form 要素です。詳しくは、<form> 要素の autocomplete 属性をご覧ください。

autofocus HTML5

この論理属性で、ユーザが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。ドキュメント内のフォーム要素でひとつだけが autofocus 属性を持つことができ、これは真偽値です。この属性は、type 属性が hidden である場合は適用できません (つまり、hidden コントロールへ自動的にフォーカスを設定することができません)。

autosave HTML5

この属性は単一の値として定義されるでしょう。type 属性の値が search であるとき、以前の検索語はページ読み込みを越えてドロップダウンに保持されます。

checked

type 属性の値が radio または checkbox であるとき、この論理属性はコントロールをデフォルトで選択することを示します。type 属性が他の値である場合は無視します。

disabled

この論理属性は、フォームコントロールと対話できないことを示します。特に、無効状態のコントロールでは click イベントが発生しないでしょう。また、無効状態のコントロールの値はフォームとともに送信しません。
type 属性の値が hidden である場合は、この属性を無視します。

form HTML5

input 要素が関連づけられた form 要素 (フォームオーナー)。属性の値は同一文書内の <form> 要素の id 属性の値でなければなりません。この属性を指定しない場合、<input> 要素は <form> 要素の子孫要素として配置しなければなりません。この属性は <input> 要素を form 要素の子孫としてだけでなく、文書内のどこにでも配置することを可能にします。input はひとつの form にのみ関連づけることができます。

formaction HTML5

input 要素が submit ボタンまたは image であるときに、input 要素によって送信した情報を処理するプログラムの URI。指定した場合は、フォームオーナーの action 属性より優先します。

formenctype HTML5

input 要素が submit ボタンか image であるとき、この属性はフォームをサーバに送信するために使用するコンテンツの種類を指定します。以下の値が指定可能です。

• application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
• multipart/form-data: <input> 要素の type 属性に file を指定して使用する場合に使用。
• text/plain: プレーンテキストとしてフォームデータを送信する場合に使用。

この属性を指定した場合は、フォームオーナーの enctype 属性より優先します。

formmethod HTML5

input 要素が submit ボタンか image であるとき、この属性はフォームを送信する際にブラウザが使用する HTTP メソッドを指定します。以下の値が指定可能です。

• post: フォームからのデータはフォームの内容を含めてサーバーに送信されます。
• get: フォームからのデータはセパレーターとして '?' を使用して form 属性の URI に追加され、その結果となる URI をサーバーに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。

この属性を指定した場合は、フォームオーナーの method 属性より優先します。

formnovalidate HTML5

input 要素が submit ボタンか image であるとき、この論理属性はフォームを送信する際に検証を行わないことを指定します。この属性を指定した場合は、フォームオーナーの novalidate 属性より優先します。

formtarget HTML5

input 要素が submit ボタンか image であるとき、この属性はフォームを送信した後に受け取る応答を表示する場所を示す名前またはキーワードを示します。これは、ブラウジングコンテキスト (タブ、ウィンドウ、またはインラインフレーム) の名前またはキーワードを参照します。この属性を指定した場合は、フォームオーナーの target 属性より優先します。以下のキーワードは特別な意味を持ちます:

• _self: 現在と同じブラウジングコンテキストにレスポンスを読み込みます。この値は、属性が指定されていない場合のデフォルト値です。
• _blank: 新しい無名のブラウジングコンテキストにレスポンスデータを読み込みます。
• _parent: 現在のコンテキストの親のブラウジングコンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top: 最上位のブラウジングコンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたないブラウジングコンテキスト) にレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。

height HTML5

type 属性の値が image であるとき、この属性はボタンとして表示する画像の高さを定義します。

inputmode HTML5

どのキーボードを表示するかに関する、ブラウザへの助言です。この属性は type 属性の値が text、password、email、url であるときに適用します。以下の値が指定可能です。

• verbatim: ユーザ名やパスワードのように、英数字で文章ではないコンテンツ。
• latin: 入力予測が有効といった入力支援を伴う、ユーザの好む言語によるラテン文字の入力。検索ボックスなど、人間からコンピュータへのコミュニケーション。
• latin-name: latin と同様ですが、人名用です。
• latin-prose: latin と同様ですが、より積極的な入力支援を伴います。電子メール向けインスタントメッセージングのように、人と人とのコミュニケーション用。
• full-width-latin: latin-prose と同様ですが、ユーザの副次的な言語向けです。
• kana: 漢字変換をサポートする、全角文字を使用したかな入力またはローマ字入力 (一般的にひらがな入力)。日本語テキスト入力を意図しています。
• katakana: 漢字変換をサポートする、全角文字を使用したカタカナ入力。日本語テキスト入力を意図しています。
• numeric: 0 から 9 の数字、ユーザ選択の千区切り文字、負の数を示す文字のキーによる数値入力。クレジットカード番号などの数値コードを意図します。実際の数値については、<input type="number"> を使用します。
• tel: アスタリスクや井桁のキーを含む、電話番号の入力。可能であれば代わりに <input type="tel"> を使用してください。
• email: メールアドレスの入力。可能であれば代わりに <input type="email"> を使用してください。
• url: URL の入力。可能であれば代わりに <input type="url"> を使用してください。

list HTML5

ユーザに提案する定義済み候補のリストを示します。値は、同一文書内の <datalist> 要素の id であることが必要です。ブラウザは、この input 要素に対して正しい候補のみを表示します。この属性は、type の値が hidden、checkbox、radio、file、ボタンタイプである場合は無視します。

max HTML5

アイテムの最大値 (数値または日時) であり、最小値 (min 属性) を下回ってはいけません。

maxlength HTML5

type 属性の値が text、email、search、password、tel、url であるとき、この属性はユーザが入力できる (Unicode コードポイントでの) 最大文字数です。他のコントロールタイプでは無視されます。この属性の値は、size 属性の値を超えることができます。この属性を指定していない場合、ユーザは入力文字数を制限されません。負の値を指定すると、デフォルトの動作になります。つまり、ユーザは入力文字数を制限されません。制約は、属性の値が変更されたときにのみ評価されます。

min HTML5

アイテムの最小値 (数値または日時) であり、最大値 (min 属性) を上回ってはいけません。

multiple HTML5

この論理属性は、ユーザが複数の値を入力してよいかを示します。この属性は、type 属性の値が email または file である場合に適用します。他の値では無視します。

name

コントロールの名前であり、フォームデータとともに送信されます。

pattern HTML5

コントロールの値を検査する正規表現です。パターンは一部のサブセットではなく値全体にマッチしなければなりません。ユーザ支援として、title 属性を使用してパターンを説明しましょう。この属性は、type 属性の値が text、search、tel、url、email である場合に適用します。他の値では無視します。正規表現の文法は、JavaScript の正規表現と同一です。パターンはスラッシュで囲みません。

placeholder HTML5

コントロールに何を入力できるかに関する、ユーザへの助言です。プレースホルダのテキストはキャリッジリターンやラインフィードを含んではいけません。この属性は、type 属性の値が text、search、tel、url、email である場合に適用します。他の値では無視します。

注記: placeholder 属性を <label> 要素の代わりに使用してはいけません。placeholder の用途は異なります: <label> 要素はフォーム要素の役割を述べます。つまり、どの種類の情報を求めているかを示します。一方 placeholder 属性は、入力すべき内容の体裁に関する助言です。placeholder 属性がユーザに一切表示されない場合があるので、placeholder がなくても理解できるようにしなければなりません。

readonly

この論理属性は、ユーザがコントロールの値を変更できないことを示します。

HTML5 この属性は、type 属性の値が hidden、range、color、checkbox、radio、file、ボタンタイプである場合に無視されます。

required HTML5

この属性は、フォームを送信する前に値を入力しなければならないことを示します。type 属性の値が hidden、image、またはボタンタイプ (submit、reset、button) である場合は使用できません。フィールドに対して適宜 :optional および :required CSS 疑似クラスが適用されます。

selectionDirection HTML5

選択が行われたときの方向を示します。LTR ロケールにおいて左から右へ、RTL ロケールにおいて右から左へ選択する場合は "forward"、逆方向に選択する場合は "backward" です。選択方向が不明である場合は "none" を指定できます。

size

コントロールの初期サイズです。type 属性の値が text または password でなければ、値はピクセル値です。それらの値である場合は、文字数の整数値です。HTML5 より、この属性は type 属性の値が text、search、tel、url、email、password である場合にのみ適用され、他の値では無視されます。また、サイズは 0 より大きくしなければなりません。サイズを指定しない場合は、デフォルト値の 20 を使用します。

spellcheck HTML5

この属性の値を true に設定すると、その要素はスペルや文法のチェックが必要であることを示します。値 default は要素がデフォルトの動作に従うことを示し、おそらく親要素の spellcheck の値に基づきます。値 false はチェックが不要であることを示します。

src

type 属性の値が image であるとき、この属性でグラフィカルな送信ボタンに表示する画像の場所を示す URI を指定します。type 属性が他の値である場合は無視します。

step HTML5

設定可能な数値や日時の値を示す際に増加量を制限するため、min 属性および max 属性とともに作用します。文字列 any または正の浮動小数点数値を指定できます。この属性の値が any ではない場合、コントロールは最小値より大きな step の値の倍数のみを受け入れます。

tabindex HTML 4 では要素固有の属性、HTML5 ではグローバル属性

文書内でのタブナビゲーション順における、要素の位置を示します。

usemap HTML 4 のみ、廃止 HTML5

イメージマップとしての <map> 要素の名前。

value

コントロールの初期値です。この属性は type 属性の値が radio または checkbox である場合を除き、省略可能です。
ページを再読み込みするとき、Gecko および IE は再読み込み前に値が変更された場合に HTML ソースで指定された値を無視する点に注意してください。

width HTML5

type 属性の値が image であるとき、この属性はボタンとして表示する画像の幅を定義します。

x-moz-errormessage

この Mozilla 拡張は、フィールドが正常にバリデートされない場合に表示するエラーメッセージを指定できます。

注記

File input

スクリプトからファイル選択ダイアログの値を設定することはできません。以下のようなスクリプトは何も効果がありません:

var e = getElementById("someFileInputElement");
e.value = "foo";

エラーメッセージ

フィールドのバリデートが失敗したときに Firefox で独自のエラーメッセージを表示させたい場合は、x-moz-errormessage 属性を使用できます:

<input type="email" x-moz-errormessage="Please specify a valid email address.">

ただしこれは非標準であり、他のブラウザでは効果がない点に注意してください。

例

シンプルな入力ボックス

<!-- A basic input -->
<input type="text" name="input" value="Type here">

一般的な活用シナリオ

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
    First name: <input type="text" name="first_name" /><br />
     Last name: <input type="text" name="last_name" /><br />
        E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>

モバイル版 Firefox で mozactionhint を使用

フォームをモバイル版 Firefox で表示したときに、仮想キーボードの Enter キーのラベルテキストを指定する mozactionhint 属性を使用できます。例えば "Next" ラベルを表示するには、以下のようにします:

<input type="text" mozactionhint="next" name="sometext" />

結果は以下のとおりです:

仕様

ブラウザ実装状況

Gecko に関する注記

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) より Android 版 Firefox は、ユーザがブラウザから離れることなくカメラで画像を撮影してアップロードできます。Web 開発者はこの機能を、以下のように file input で accept 属性を "image/*" に設定することで実装できます:

<input type="file" accept="image/*">

関連情報

• 他のフォーム関連要素: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress>, <meter>
• Cross-browser HTML5 placeholder text