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> 要素は HTML 全体の中で最も強力で複雑なものの一つで、入力型と属性の組み合わせがまさしくたくさんあります。すべての <input> 要素は、入力型にかかわらず、 HTMLInputElement インターフェイスに基づいているので、技術的には全く同じ属性の組み合わせを共有します。しかし、実際には多くの属性は特定の入力型でのみ機能し、一部の入力型はこれらの属性の中でわずかしか対応していません。加えて、入力型によっては特定の属性を特別な方法で扱います。

ここでは、すべての <input> 要素の入力型に共通した個別の属性についての情報と、同様に標準外の属性のうち、一部の知っておく価値があるものを見ることができます。

すべての入力型に共通の属性

この節では、フォームのすべての <input> 型で使用される属性の一覧を示します。特定の入力型に固有の属性—またはすべての入力型に共通であるものの、その入力型で使われると特殊な動作をするもの—については、その入力型のページに書かれています。

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

属性 説明
autocomplete 文字列で、もしあれば、入力欄で許可する自動補完機能の種類を示す
autofocus 論理属性で、もしあれば、フォームが表示された時にフォーカスを受け取る
disabled 論理属性で、もしあれば、入力欄が無効になる
form 入力欄が所属する <form> を指定する id。指定されない場合、入力欄は直近の包含フォームに所属するか、フォームへの所属がなくなる
list 入力欄のサジェスト値のリストを提供する <datalist> 要素の id
name フォームのデータと一緒に送信されたデータの中で、入力欄を特定するための入力欄の名前
required 論理属性で、 true の場合はフォームが送信できるようになる前に入力欄が値を持たなければならない
tabindex 数値で、ユーザーが Tab キーを推したときに受け取るフォーカスを制御する順番としてユーザーエージェントにガイドを提供する
type 文字列で、どの入力型<input> 要素が表すかを示す
value 入力欄の現在の値

autocomplete

文字列で、入力欄がどの種類の自動補完機能を提供するのかを記述します。自動補完のよくある実装は、単に以前同じ入力欄に入力された値を再呼び出ししますがもっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 email 入力欄でメールアドレスを自動補完したりすることです。許可されている値はValues in HTML の autocomplete 属性を参照してください。

この属性は、数値またはテキストデータを返さない checkboximage のような入力型では効果がありません。

詳細情報については HTML の autocomplete 属性を参照してください。

autofocus

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

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

文書中で一つの要素だけが autofocus 属性を持つことができ、また autofocushidden 型の入力欄には、フォーカスを受け取ることができないため、使用することができません。

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

disabled

論理属性で、もしあれば、ユーザーが入力欄と対話できないことを示します。向こうの入力欄はふつう、より薄い色で表示したり、その他の形で示したりしてフィールドが使用できないことを示します。

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

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

form

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

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

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

list

この入力欄でユーザーに提案する定義済み値のリストを提供する、同一文書内にある <datalist> 要素の id を指定します。リスト中で type と互換性がない値は、提案の選択肢に含まれません。

list 属性は hidden, password, checkbox, radio, file またはボタン型では対応していません。

name

入力コントロールの名前を指定する文字列です。この名前は <form> 要素の elements オブジェクトで保持され、フォームデータが送信される時に、コントロールの値と共に送信されます。

input 要素に name が与えられると、その名前は所有する form 要素の HTMLFormElement.elements プロパティのプロパティになります。つまり、もし nameguest が設定された入力欄があり、他に namehat-size が設定された入力欄があると、以下のコードを利用することができます。

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

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

警告: フォーム要素にはフォームの組込みプロパティに対応する name を設定すると、対応する入力欄を参照するプロパティが既定のプロパティやメソッドを上書きしてしまうので、避けてください。

_charset_ という名前には特別な意味があります。 hidden 型の <input> 要素に使用されると、ユーザーエージェントによってフォームの送信に使用される文字エンコーディングが自動的に value に設定されます。

name が指定されなかったり、 name が空欄だったりした場合は、その入力欄の値はフォームと共に送信されません。

メモ: 歴史的な理由から、 isindex の名前は許可されていません。本当に理由が知りたいのであれば、 HTML 仕様書の Naming form controls: the name attribute を参照してください。

required

required は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 required 属性は以下のものを除いたすべての入力型で対応しています。

入力欄に required 属性がある場合、 :required 疑似クラスも適用されます。逆に、 required 属性がない入力欄 (対応していない要素を除く) には :optional 疑似クラスが適用されます。

メモ: 読み取り専用フィールドは値を持てないため、 requiredreadonly 属性が同時に指定されている入力欄には効果がありません。

tabindex

省略可能な数値で、入力欄が Tab キーを使用してフォーカスを受け取るかどうか、また要素が連続的なフォーカス操作に加わるかどうかを定義します。この値は Tab キーを使用して要素に達する順序も指定します。

tabindex の値は符号によって特別な意味を持ちます。

  • 負の tabindex の値は、ユーザーが要素にフォーカスを与えられるようにするものの、連続的なキーボード操作を使用するべきではないことを示します。常に -1 の値を使用することが推奨され、その他の値を使用すると厄介なことになる場合があります。
  • tabindex が 0 であると、要素はフォーカス可能で、連続的なキーボード操作で到達できるべきであり、タブ順序はユーザーエージェントに任せ、ユーザーのプラットフォームの習慣を適用するべきであることを意味します。これは通常、フォーカス可能でキーボード操作に加わる場合、タブ順序を自分自身で管理しようとするより最適な値です。
  • 正の tabindex の値は、要素のタブ順序を示します。ユーザーが Tab キーを押下するたびに、次に高い tabindex の値を持つ要素にフォーカスが与えられます。多くのプラットフォームでは逆タブ機能を提供しており、ふつうは Shift + Tab の組み合わせでタブ順を逆にたどります。

tabindex が省略されたり、妥当な整数でなかったりした場合は、ユーザーエージェントはどのようにするか、プラットフォームの習慣に従います。

type

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

許可されている値はフォームの <input> の型にあります。

value

入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用して HTMLInputElement.value にアクセスすることで、いつでも変更したり受け取ったりすることができます。 value 属性は常に省略可です。

メモ: チェックボックスとラジオボタンは他の入力コントロールと異なり、値が現在チェックされていた場合 (checked) のみ送信されるデータに含められます。この場合、 value 属性は入力値として報告されます。

例えば、 namestatus のチェックボックスで valueactive になっており、チェックボックスがチェックされていると、送信されるフォームデータには status=active が含まれます。チェックボックスがアクティブでなければ、フォームデータ内には全く現れません。チェックボックスやラジオボタンの既定の valueon です。

すべての入力型に共通な標準外の属性

以下の属性は HTML 仕様書には掲載されていませんが、ユーザーエージェントによってはコンテンツが読み込まれる際に利用できます。一般的な規則として、これらを使用することは避けるべきですが、使用することが必要な場合や、少なくとも知っている必要がある場合があります。

属性 説明
x-moz-errormessage 入力欄が検証を通らない場合にユーザーにエラーメッセージとして表示する文字列です。 Firefox のみ

x-moz-errormessage

これは Mozilla 固有の拡張で、フィールドの検証に失敗した時に既定のエラーメッセージの代わりに Firefox が表示する文字列です。

入力要素の整形

各型を扱うページで、<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> の定義
勧告  

アクセシビリティの考慮事項

ラベル

入力欄を設置する場合、ラベルは隣に追加することが推奨されます。こうすることによって、支援技術を使用している人が、入力欄が何であるかを識別することができます。ラベルについての一般知識は、ラベルとプレイスホルダーを参照して下さい。

次の例は、上記の形で <label><input> 要素に関連付ける方法の例です。 <input>id 属性を設定する必要があります。そして <label> には入力欄の id と同じ値を持つ for 属性が必要になります。

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
type="button"Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="checkbox"Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="color"Chrome 完全対応 20Edge 完全対応 14Firefox 完全対応 29
補足
完全対応 29
補足
補足 Firefox doesn't yet support inputs of type color on Windows Touch.
IE 未対応 なしOpera 完全対応 12Safari 完全対応 10WebView Android 完全対応 4.4Chrome Android ? Edge Mobile 完全対応 14Firefox Android 完全対応 27Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
type="date"Chrome 完全対応 20Edge 完全対応 12Firefox 完全対応 57IE 未対応 なしOpera 完全対応 11Safari 未対応 なし
補足
未対応 なし
補足
補足 The input type is recognized, but there is no date-specific control.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 57Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android ?
type="datetime-local"Chrome 完全対応 20Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 888320 and TPE DOM/Date time input types.
IE 未対応 なしOpera 完全対応 11Safari 未対応 なし
補足
未対応 なし
補足
補足 The input type is recognized, but there is no date-specific control.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 11Safari iOS 完全対応 ありSamsung Internet Android ?
type="email"Chrome 完全対応 5Edge ? Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 11Safari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1
補足
完全対応 3.1
補足
補足 Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.
補足 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.
Samsung Internet Android ?
type="file"Chrome 完全対応 1Edge ? Firefox 完全対応 1
補足
完全対応 1
補足
補足 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).
IE 完全対応 ありOpera 完全対応 11Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 1Safari iOS 完全対応 ありSamsung Internet Android ?
type="hidden"Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 2Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="image"Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="month"Chrome 完全対応 20Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 888320.
IE 未対応 なしOpera 完全対応 11Safari 未対応 なし
補足
未対応 なし
補足
補足 The input type is recognized, but there is no month-specific control.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="number"Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="password"Chrome 完全対応 1Edge ? Firefox 完全対応 1IE 完全対応 2Opera 完全対応 2Safari 完全対応 1WebView Android ? Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="radio"Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="range"Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 23IE 完全対応 10Opera 完全対応 11Safari 完全対応 3.1WebView Android 完全対応 4.4
完全対応 4.4
未対応 2 — 4.4
補足
補足 Android WebView recognizes the range type, but doesn't implement a range-specific control.
Chrome Android 完全対応 57Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android ?
type="reset"Chrome 完全対応 1Edge ? Firefox 完全対応 1
補足
完全対応 1
補足
補足 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.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 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.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="search"Chrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="submit"Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1
補足
完全対応 1
補足
補足 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>
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 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>
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="tel"Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 11Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="text"Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="time"Chrome 完全対応 20Edge 完全対応 12Firefox 完全対応 57IE 未対応 なしOpera 完全対応 10Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 57Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
type="url"Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 11Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
type="week"Chrome 完全対応 20Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 888320.
IE 未対応 なしOpera 完全対応 11Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

[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」キーはキーボードの右下の隅にあります。

関連情報