HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。 機器とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。

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

フォームの <input> の型

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

以下の値を指定できます。

  • button: 既定の動作を持たないプッシュボタン。
  • checkbox: 選択または未選択のうちひとつの値をとることができるチェックボックス。
  • color: HTML5 色を指定するためのコントロール。色を選択するユーザーインターフェイスは、単純な色を文字列で受け付ける以上の機能は要求されていません (詳細)。
  • date: HTML5 日付 (時刻を除く年、月、日) を入力するためのコントロール。
  • datetime-local: HTML5 タイムゾーン情報がない日付と時刻を入力するためのコントロール。
  • email: HTML5 電子メールアドレスを入力するための欄。
  • file: ユーザーにファイルを選択させるコントロール。コントロールで選択できるファイルの種類を定義するには、accept 属性をして下さい。
  • hidden: 非表示のコントロールですが、その値はサーバーに送信されます。
  • image: 画像による送信ボタン。画像のソースを定義するために src 属性を、また代替文字列を定義するために alt 属性を使用しなければなりません。 height および width 属性を使用して、画像の寸法をピクセル値で定義できます。
  • month: HTML5 タイムゾーン情報がない年と月を入力するためのコントロール。
  • number: HTML5 数値を入力するためのコントロール。
  • password: 入力値を隠す1行テキストフィールド。入力可能な最大文字数を指定するには、 maxlength 及び minlength 属性を使用してください。
    メモ: パスワードなどの機密情報を扱うフォーム (例えばログインフォーム) は HTTPS で提供するべきです。 Firefox は、安全でないログインフォームに対して警告を表示する仕組みを複数実装しています。安全でないパスワードをご覧ください。他のブラウザーも、同様の仕組みを実装しています。
  • radio: 複数の選択肢からひとつの値を選択できるラジオボタン。
  • range: HTML5 正確な値であることが重要ではない数値を入力するためのコントロール。
  • reset: フォームのコントロールを既定値にリセットするボタン。
  • search: HTML5 検索文字列を入力するための1行入力フィールド。改行は自動的に入力値から取り除かれます。
  • submit: フォームを送信するボタン。
  • tel: HTML5 電話番号を入力するためのコントロール。
  • text: 1行入力フィールド。改行は自動的に入力値から取り除かれます。
  • time: HTML5 タイムゾーン情報がない時刻を入力するためのコントロール。
  • url: HTML5 URL を入力するための欄。
  • week: HTML5 年と週番号で構成される日付を入力するためのコントロール。週番号はタイムゾーンを伴いません。

廃止された入力型もあります。

  • datetime: HTML5 UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロール。この機能は WHATWG HTML から削除されました。

属性

<input> 共通の属性

ここでは、フォームのすべての <input> 型で共通に使用できる属性を掲載します。共通ではない属性と、指定した <input> の型によって動作が異なる共通属性は、各型の個別のページに掲載しています。

メモ: これはグローバル属性を含みます。

type
表示するコントロールの型です。個々の型はフォームの <input> の型に、詳細情報へのリンクとともに掲載しています。
accept
type 属性の値が file である場合、この属性はサーバーが受け入れるファイルの種類を示します、それ以外の場合は無視されます。値はコンテンツの種類を定義する次の値をコンマで区切ったリストでなければなりません。
  • ピリオド (U+002E) で始まる、大文字・小文字の区別がないファイルの拡張子 (例: .jpg, .png, .doc).
  • 拡張子を持たない有効な MIME タイプ。
  • audio/* は音声ファイルを表します。 HTML5
  • video/* は動画ファイルを表します。 HTML5
  • image/* は画像ファイルを表します。 HTML5
accesskey HTML 4 のみ、 HTML5 で廃止
ユーザーが押下してコントロールにフォーカスを切り替えることができる1文字。この属性は HTML5 ではグローバル属性です。 — 詳しくは accesskey のページを参照してください。
autocomplete HTML5
この属性は、入力がブラウザーによって自動的に、主に以前ユーザーが入力した値によって補完されることがあることを示します。
詳しい情報は、HTML の autocomplete 属性を参照してください。
autofocus HTML5
この論理属性で、 (別のコントロールに入力するなどして) ユーザーが変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書内のフォーム要素でひとつだけが autofocus 属性を持つことができ、これは真偽値です。この属性は、type 属性が hidden である場合は適用できません (つまり、hidden コントロールへ自動的にフォーカスを設定することができません)。コントロールへのフォーカス適用は、DOMContentLoaded イベントが発生する前に行われます。
メモ: フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用して操作している弱視の人の使い勝手を悪くすることがあります。 autofocus が割り当てられると、読み上げソフトは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。
capture

type 属性の値が file である場合にこの論理属性が存在すれば、メディアキャプチャーの仕組み を使用してデバイスの環境からメディアを直接取り込むことを優先すると示します。

checked

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

Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても <input>動的に変更したチェック状態を維持します。この機能は autocomplete 属性で制御できます。

disabled

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

Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても <input>動的に無効化した状態を維持します。この機能は autocomplete 属性で制御できます。

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 であるときに適用します。以下の値が指定可能です。
  • none: 仮想キーボードを表示しません。
  • text: ユーザーのロケールにおける文字入力です。
  • decimal: 実数の入力です。
  • numeric: 数値入力です。
  • tel: 電話番号の入力で、*や#キーを含みます。 <input type="tel"> を推奨します。
  • search: 検索の入力に最適化した仮想キーボードを表示します。
  • email: メールアドレスの入力。 <input type="email"> を推奨します。
  • url: URL の入力。 <input type="url"> を推奨します。
仕様の競合: WHATWG の仕様では inputmode を記述しており、最近のブラウザーは対応する方向に向かっています。しかし W3C HTML 5.2 仕様では記述していません (つまり、廃止扱いになっています)。これらの違いが合意に至るまでは、 WHATWG の定義が正しいと考えるべきでしょう。
list HTML5
ユーザーに提案する定義済み候補のリストを示します。値は、同一文書内の <datalist> 要素の id であることが必要です。ブラウザーは、この input 要素に対して正しい候補のみを表示します。この属性は、 type の値が hidden, checkbox, radio, file, ボタン型である場合は無視します。
max HTML5
この項目の最大値 (数値または日時) で、 (min 属性による) 最小値を下回ってはいけません。
maxlength
type 属性の値が text, email, search, password, tel, url であるとき、この属性はユーザーが入力できる (UTF-16 コード単位の) 最大文字数です。他のコントロール型では無視されます。
min HTML5
この項目の最小値 (数値または日時) であり、 (min 属性による) 最大値を上回ってはいけません。
minlength HTML5
type 属性の値が textemailsearchpasswordtelurl であるとき、この属性はユーザーが入力できる (Unicode コードポイントでの) 最小文字数です。他のコントロール型では無視されます。
multiple HTML5
この論理属性は、ユーザーが複数の値を入力してよいかを示します。この属性は、type 属性の値が email または file である場合に適用します。他の値では無視します。
name
コントロールの名前であり、フォームデータの一部としてコントロールの値と共に送信されます。名前が指定されなかったり空であったりした場合は、コントロールの値はフォームと共に送信されません。
pattern HTML5
コントロールの値を検査する正規表現です。パターンは値全体に一致するものでなければならず、一部のサブセットではいけません。 title 属性を使用して、パターンを説明してユーザーに助言しましょう。この属性は、 type 属性の値が text, search, tel, url, email, password である場合に適用され、他の値では無視されます。正規表現の文法は、 JavaScript の正規表現アルゴリズムと同一で、 'u' 引数はパターンを一連の Unicode コードポイントとして扱うことを示します。パターンはスラッシュで囲みません。
placeholder HTML5
コントロールに何を入力できるかに関する、ユーザーへの助言であり、ふつうは入力するべき種類の情報の例の形です。プレイスホルダーの文字列はキャリッジリターンやラインフィードを含んではいけません
メモ: placeholder を使用する前に、ラベルとプレイスホルダーの説明を読み、正しい使い方を確認してください。プレイスホルダーは混乱を生む可能性があり、予期しない方法で特定の操作を混乱させる可能性があります。
readonly HTML5
この属性は、ユーザーがコントロールの値を変更できないことを示します。属性の値に意味はありません。入力値を読み書きしなければならない場合は、 "readonly" 属性を追加してはいけません。この属性は、 type 属性の値が hidden, range, color, checkbox, radio, file, ボタン型 (buttonsubmit など) である場合は無視されます。
required HTML5
この属性は、フォームを送信する前に値を入力しなければならないことを示します。type 属性の値が hiddenimage、またはボタン型 (submitresetbutton) である場合は使用できません。フィールドに対して適宜 CSS の :optional および :required 疑似クラスが適用されます。
size
コントロールの初期の寸法です。 HTML5 より、この属性は type 属性の値が text, search, tel, url, email, password である場合にのみ適用され、他の値では無視されます。また、サイズは 0 より大きくしなければなりません。既定値は 20 です。
HTML5 では "ユーザーエージェントは、少なくともその分の文字を確実に表示するべきです" と述べていますが、フォントによっては文字ごとに幅が異なる場合があります。ブラウザ―によっては、サイズを x 以上と定義しても、文字数が x である文字列が完全に表示されないことがあります。
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 であるとき、この属性はボタンとして表示する画像の幅を定義します。

<input> 標準外の属性

autocorrect
これは Safari が対応する標準外属性であり、ユーザーが <input> にテキストを入力または編集した際にオートコレクトを実行するかを制御します。以下の値を指定できます。
  • on: オートコレクトを有効にする
  • off: オートコレクトを無効にする
Safari HTML リファレンスの autocorrect に関する文書
incremental
この属性は WebKit (Safari) および Blink (Chrome) が対応する標準外属性であり、typesearch である場合にのみ適用されます。この属性を設定すると (属性の値は不問)、<input> でユーザーがテキストを編集するのに応じて search イベントが発生します。このイベントは、最後のキーストロークから実装依存の時間が経過した後にのみ発生します。新たなキーストロークにより、経過時間はリセットされます。言い換えると、イベント発生時にデバウンス処理を行います。この属性を設定しない場合は、ユーザーが明示的に検索を実行した (例: フィールド内で Enter キーを押下する) 場合にのみ search イベントが発生します。Safari HTML リファレンスの incremental に関する文書
mozactionhint
仮想キーボードを持つモバイルデバイスで、 Enter キーのラベルを決めるために使用する "アクションヒント" を指定します。対応する値は go, done, next, search, send です。これらは自動的に、適切な文字列に割り当てられます (大文字・小文字は区別しません)。
results
この属性は Safari が対応する標準外属性であり、typesearch である場合にのみ適用されます。過去の検索語句を表示する <input> のネイティブドロップダウンリストで、表示する項目の最大数を制御します。値は、負数ではない整数を指定します。
webkitdirectory 
この論理属性は、type 属性が file であるときの選択ダイアログでディレクトリーしか選択できないことを示します。
x-moz-errormessage
この Mozilla 拡張は、フィールドが正常にバリデートされない場合に表示するエラーメッセージを指定できます。

入力要素の整形

各型を扱うページで、<input> 要素のさまざまな使用例を確認できます。フォームの <input> の型や、この記事の冒頭の Live example をご覧ください。

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32">

CSS

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

結果

HTML の要素に色を追加することについての詳細情報は、 CSS を使用した HTML 要素への色の適用を参照してください。

ラベルとプレイスホルダー

要約: 時間を節約するため、手っ取り早く言います。可能であれば placeholder 属性を使用しないでください。 <input> 要素にラベルを付けるには、 <label> 要素を使用してください。

説明のテキストと <input> を関連付けるには、似た方法が3つあるように見えます。しかし、実際には大きく異なっており、その中の一つだけが常に正解です。ここでそれぞれを見て、フォームへのデータ入力の案内をユーザーに提供する最適な方法を学習しましょう。

<label> 要素

<label> 要素は、フォームの入力欄を説明するために、 (レイアウト方法はさておき) 常に適切である唯一の方法です。 <input><textarea> に何を入力するべきかを説明するのに <label> を使用することは、決して悪い考えではありません。

placeholder 属性

placeholder 属性で、 <input> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。これは説明やプロンプトよりも、入力例を表示するためのものですが、ひどく誤用される傾向があります。

以下の例はパスワードを取る二つの入力欄に、プレイスホルダーが付いたものです。

プレイスホルダーの正しい使い方と誤った使い方

最初の例はプレイスホルダーの文字列として "MyGr8P@sswrd" を使用し、パスワードがどの様なものかを表しています。但し、これは本当は良いパスワードではありません。

二番目の例は、プレイスホルダーとして "Enter your password" というプロンプトの文字列を使用しています。これを行うことの最初の、そして最も明確な問題は、ユーザーが最初の文字を入力した途端、入力欄が何のためにあるかを説明するプロンプトが表示されなくなることです。

これがその理由で、代わりに <label> 要素を使用してください。プレイスホルダーはフォームを理解するために必要であってはなりません。人によっては、識別のためのテキストが消滅した後であっても、指定された空のボックスが何を意味しているのかを思い出すことができますが、不可能な人もいます。

プレイスホルダーがなくなったときにユーザーがフォームを理解できなくなるのであれば (つまり、ブラウザーが placeholder に対応していなかったり、ユーザーが入力を始めた後で分からなくなるような場合) は、プレイスホルダーを正しく使用していないことになります。

加えて、自動翻訳機能を備えたブラウザーは、翻訳時に属性をスキップする可能性があります。つまり、 placeholder は翻訳されず、重要な情報が翻訳されなくなる可能性があるということです。

プレイスホルダーを使う必要がある場合は、プレイスホルダーとラベルの両方を使うこともできます。

<input> 要素の隣にある関連付けのないテキスト

次のように、 <input> 要素のとなりに単なるプレインテキストを配置することもできます。

<p>Enter your name: <input id="name" type="text" size="30"></p>

これは行わないでください。これでは次の節で説明するような理由で重要な、プロンプトと <input> の間の関連付けが作成されません。

なぜラベルを使用するべきなのか

前述のような情報に加え、他にも <label><input> を説明するのに最適な方法であるという理由はいくつもあります。

  • <input> 要素と <label> 要素を意味的に結び付けることは、読み上げソフトのような支援技術にとって有益です。 <label>for 属性を用いて結びつけることで、読み上げソフトに入力欄をユーザーに対してより詳細に説明させることができます。
  • <input> 要素と <label> 要素を結び付けることで、どちらをクリックしても <input> にフォーカスを当てることができます。プレインテキストで作成した「ラベル」を使用すると、これはできません。プロンプトの部分を入力欄の有効化領域に含めると、肢体不自由の人々に有益です。
  • ウェブ開発者にとって、人々がすべてのことを知っているとは考えないことが重要です。ウェブ — 及びウェブサイトによる広がり — を使用する人々には多様性があり、ウェブサイトの訪問者によっては、思考プロセスや状況によって、明確かつ正しく提示されたラベルがないと、フォームを正しく解釈できない可能性があります。

<input> 要素の使い方に関する例は、それぞれの型に関するページに豊富にあります。フォームの <input> の型、およびこの記事の冒頭にあるライブ例を参照してください。

仕様書

仕様書 状態 備考
HTML Living Standard
<input> の定義
現行の標準  
HTML Media Capture
<input capture> の定義
勧告 capture 要素を追加
HTML5
<input> の定義
勧告  
HTML 4.01 Specification
<form> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
type="button"1 あり1 あり あり1
type="checkbox" あり あり あり あり あり あり
type="color"2014291 なし1210
type="date"201257 なし11 なし2
type="datetime-local"2012 なし3 なし11 なし2
type="email"5 ? あり1011 あり
type="file"1 ?16 あり111
type="hidden"1 あり1 あり21
type="image" あり ? あり あり あり あり
type="month"2012 なし7 なし11 なし8
type="number" あり ? あり10 あり あり
type="password"1 ?1221
type="radio" あり あり あり あり あり あり
type="range"4122310113.1
type="reset"1 ?110 あり あり1
type="search"51241010.65
type="submit"1 あり111 あり あり1
type="tel" あり あり あり1011 あり
type="text"1 あり1 あり あり1
type="time"201257 なし10 なし
type="url"1 あり あり1011 あり
type="week"2012 なし7 なし11 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
type="button" あり1 あり4 あり あり ?
type="checkbox" あり あり あり4 あり あり ?
type="color"4.4 ?1427 あり なし ?
type="date" あり あり ?57115 ?
type="datetime-local" あり あり ? あり11 あり ?
type="email" ? ? ?4 あり3.14 5 ?
type="file" あり あり ?41 あり ?
type="hidden" あり あり あり4 あり あり ?
type="image" あり ? ? あり あり あり ?
type="month" あり あり ? なし あり あり ?
type="number" あり あり ? あり あり あり ?
type="password" ? あり ?4 あり あり ?
type="radio" あり あり あり4 あり あり ?
type="range"

4.3

2.1 — 4.39

57 ?52 あり5.1 ?
type="reset" あり あり ?410 あり あり ?
type="search" あり あり あり あり あり あり ?
type="submit" あり あり あり411 あり あり ?
type="tel" あり あり ? あり あり あり ?
type="text" あり あり あり4 あり あり ?
type="time" あり20 あり57 あり なし ?
type="url" あり あり あり あり あり あり ?
type="week" あり あり あり あり あり あり ?

1. Firefox doesn't yet support inputs of type color on Windows Touch.

2. The input type is recognized, but there is no date-specific control.

3. See bug 888320 and TPE DOM/Date time input types.

4. Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.

5. Automatically applies a default style of opacity: 0.4 to disable textual <input> elements, including those of type 'email'. Other major browsers don't currently share this particular default style.

6. You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see bug 1384030).

7. See bug 888320.

8. The input type is recognized, but there is no month-specific control.

9. Android WebView recognizes the range type, but doesn't implement a range-specific control.

10. Unlike other browsers, Firefox by default persists the dynamic disabled state of a &ltbutton&gt across page loads. Use the autocomplete attribute to control this feature.

11. Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

</button>

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 1.0 (有) 1.0 (1.7 or earlier) (有) 1.0 1.0
type="time" 20 (有) 57 (57) 未サポート 10.62 未サポート[1]
accept (有) 未サポート (有) 10 ? 未サポート
mozactionhint 未サポート 未サポート 4.0 (2.0) 未サポート 未サポート 未サポート
autocapitalize 43 未サポート ? ? ? (有) [3]
autofocus, max, min, pattern, placeholder, required, step, list, multiple 5.0 (有) (有) 10 9.6 5.0
capture Chrome for Android (0.16) 未サポート ? ? ? ?
file型のfakepath (有) 未サポート 53 (53) (有) (有) (有)
form 10 (有) 4 未サポート[7] 9.5 5.0
formaction, formenctype, formmethod, formnovalidate, formtarget 9.0 (有) 4.0 (2.0) 10 10.62 5.1
incremental (有) 未サポート (有) 未サポート 未サポート (有)
inputmode (有) 未サポート 17 (17) 未サポート 未サポート 未サポート
minlength 40.0 未サポート ? ? ? ?
readonly 1.0 (有) 1.0 (1.7 or earlier) 6[2] 1.0 1.0
spellcheck 10.0 未サポート 3.6 (1.9.2) 10 11.0 4.0
webkitdirectory (有) (有) 49.0 (49.0) ? (有) (有)
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 (有) (有) 4.0 (2.0) (有) (有) (有)
type="time" 未サポート (有) 57 (57) 未サポート 10.62 (有)[1]
accept (有) 未サポート (有) ? (有) (有)
autocapitalize ? 未サポート ? ? ? (有)[3]
autofocus, max, min, pattern, placeholder, required, step, list, multiple (有) (有) (有)[5] ? (有) (有)
capture 3.0 未サポート 10.0 (10.0) ? ? 6.0
file型のfakepath (有) 未サポート 53.0 (53) (有) (有) (有)
form, formaction, formenctype, formmethod, formnovalidate, formtarget ? (有) ? ? ? ?
minlength ? 未サポート 未サポート ? 27.0 ?
spellcheck ? 未サポート 4.0 (2.0) ? 11.0 ?
webkitdirectory (有) (有) 49.0 (49.0) ? (有) (有)

[1] 値は認識しますが、UIがありません。

[2] type="checkbox" および type="radio" では対応していません。

[3] Safari では autocapitalize="words" で、すべての単語の2文字目を大文字化します。

[4] datetime-local が有効と判断され、datetime は仕様やブラウザーから削除されました。

[5] バグ 1355389

[6] 未実装です。バグ 888320TPE DOM/Date time input typesをご覧ください。

メモ

File 入力欄

  1. Gecko 2.0 より、type が file である <input> 要素で click() メソッドを呼び出すと、ファイル選択ダイアログが開いてユーザーがファイルを選択できます。例や詳細についてはウェブアプリケーションからファイルを扱うをご覧ください。

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

    var e = getElementById("someFileInputElement");
    e.value = "foo";
    
  3. 明白なセキュリティ上の理由で、<input type="file"> を使用してファイルを選択したとき、ソースファイルの実際のパスは input の value 属性に表示されません。代わりにファイル名が、先頭に C:\fakepath\ を付加した形で表示されます。この措置は歴史的な理由によるものですが、すべての現行ブラウザーが対応しており、実際は仕様書で定義されています

エラーメッセージ

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

<input type="email"
 x-moz-errormessage="有効なメールアドレスを指定してください。">

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

ローカライゼーション

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

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

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

モバイル版 Firefox で mozactionhint を使用

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

<input type="text" mozactionhint="next">

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

なお、「Next」キーはキーボードの右下の隅にあります。

関連情報