HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。

ライブサンプル

さまざまな <input> の型によって外見がどのように違うかを理解するため、以下の編集可能なサンプルで type 属性の値を編集してみましょう。入力内容に応じて出力結果が更新されます。どちらも初期値 (text) で基本的な文字列入力欄を生成していますが number, color, checkbox, radio, date, file, month, password, range, time といった、他の値を試すことができます。

コンテンツカテゴリ フローコンテンツ、リスト化、サブミット可能、リセット可能、フォーム関連要素、記述コンテンツ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 のグローバル属性です。
autocomplete HTML5
この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。
以下の値が指定可能です。
  • off: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、文書が独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。
  • on: ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。ただし、 on はユーザーに入力してほしいデータの種類に関する追加情報を与えません。
  • name: 氏名。
  • honorific-prefix: 接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")
  • given-name: 名 (first name)
  • additional-name: ミドルネーム
  • family-name: 姓 (last name)
  • honorific-suffix: 接尾辞 (例: "Jr.", "B.Sc.", "MBASW", "II")
  • nickname
  • email
  • username
  • new-password: 新しいパスワード (例: アカウントの新規作成やパスワード変更のとき)
  • current-password
  • organization-title: 肩書 (例: "ソフトウェア技術者", "上級副社長", "副専務理事")
  • organization
  • street-address
  • address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1
  • country
  • country-name
  • postal-code
  • cc-name: 支払手段における姓名
  • cc-given-name
  • cc-additional-name
  • cc-family-name
  • cc-number: 支払手段を識別するコード (例: クレジットカード番号)
  • cc-exp: 支払手段の有効期限
  • cc-exp-month
  • cc-exp-year
  • cc-csc: 支払手段のセキュリティコード
  • cc-type: 支払手段の種類 (例: Visa)
  • transaction-currency
  • transaction-amount
  • language: 優先言語。有効な BCP 47 言語タグ であること。
  • bday: 誕生日
  • bday-day
  • bday-month
  • bday-year
  • sex: 性別 (例: Female, Fa'afafine)。自由形式の文字列であり、改行は不可。
  • tel: 国番号を含む、完全な電話番号。
    • tel の派生形: tel-country-code, tel-national, tel-area-code, tel-local, tel-local-prefix, tel-local-suffix, tel-extension
  • url: この欄に関連する別の欄の、会社・個人・住所・連絡先情報に対応するホームページや他のウェブページ。
  • photo: この欄に関連する別の欄の、会社・個人・住所・連絡先情報に対応する写真・アイコンや他の画像。

詳しくは WHATWG 仕様書をご覧ください。

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

Firefox は他のブラウザーと異なり、 autocomplete 属性で、ページを再読み込みしても <input>動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか を制御します。この維持機能は、既定で有効です。autocomplete 属性の値に off を設定すると、この機能を無効化できます。またこの設定は、type 属性が通常 autocomplete を適用しない値である <input> 要素でも有効です。 バグ 654072 をご覧ください。

ほとんどの現行ブラウザー (Firefox 38+, Google Chrome 34+, IE 11+ など) では autocomplete 属性を設定しても、ブラウザーのパスワードマネージャーがユーザーにログイン情報 (ユーザー名やパスワード) を保存したいかを問い合わせる、またユーザーが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません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 コード単位の) 最大文字数です。他のコントロール型では無視されます。この属性の値は、 size 属性の値を超えることができます。この属性を指定していない場合、ユーザーは入力文字数を制限されません。負の値を指定すると、既定の動作になります (つまり、ユーザーは入力文字数を制限されません)。制約は、属性の値が変更されたときにのみ評価されます。
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 属性を <label> 要素の代わりに使用してはいけません。それぞれ目的が異なります。 <label> 要素はフォーム要素の役割を記述し (つまり、どの種類の情報を求めているかを示します)、 placeholder 属性は、入力すべき内容の体裁に関する助言です。 placeholder 属性がユーザーに一切表示されない場合があるので、 placeholder がなくても理解できるようにしなければなりません。
readonly HTML5
この属性は、ユーザーがコントロールの値を変更できないことを示します。属性の値に意味はありません。入力値を読み書きしなければならない場合は、 "readonly" 属性を追加してはいけません。この属性は、 type 属性の値が hidden, range, color, checkbox, radio, file, ボタン型 (buttonsubmit など) である場合は無視されます。
required HTML5
この属性は、フォームを送信する前に値を入力しなければならないことを示します。type 属性の値が hiddenimage、またはボタン型 (submitresetbutton) である場合は使用できません。フィールドに対して適宜 CSS の :optional および :required 疑似クラスが適用されます。
selectionDirection HTML5
選択が行われたときの方向を示します。 LTR ロケールにおいて左から右へ、 RTL ロケールにおいて右から左へ選択する場合は "forward"、逆方向に選択する場合は "backward" です。この値が不明である可能性があるプラットフォームでは、 "none" を指定できます。例えば macOS では既定の方向が "none" であり、ユーザーがキーボードを使用して選択範囲を変更し始めると、選択方向が広がる方向を反映してこの値が変わります。
selectionEnd
選択された最後の文字の、要素のテキストコンテンツにおけるオフセットです。未選択状態ではこの値は、現在のテキスト入力カーソルの位置の直後にある文字 (すなわち、次に入力した文字が入る場所) のオフセットを表します。
selectionStart
選択された最初の文字の、要素のテキストコンテンツにおけるオフセットです。未選択状態ではこの値は、現在のテキスト入力カーソルの位置の直後にある文字 (すなわち、次に入力した文字が入る場所) のオフセットを表します。
size
コントロールの初期サイズです。 type 属性の値が text または password でなければ、値はピクセル値です。それらの値である場合は、文字数の整数値です。 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 要素への色の適用を参照してください。

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

仕様書

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

ブラウザーの対応

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="color" 20 14 29 (29) 未サポート 11.01 11
type="email", type="number", type="range", type="search", type="tel", type="url" (有) (有) (有) 10 (有) (有)
type="datetime-local", type="month", type="week" 20 16 未サポート 未サポート 10.62 未サポート[1]
type="date", type="time" 20 (有) 57 (57) 未サポート 10.62 未サポート[1]
type="datetime" 未サポート[4] 未サポート 未サポート[4] 未サポート[4] 未サポート[4] 未サポート[4]
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="color" ? (有) 27.0 (27.0) ? (有) ?
type="email", type="number", type="range", type="search", type="tel", type="url" (有) (有) (有) ? (有) (有)
type="datetime-local", type="month", type="week" (有) (有) 未サポート ? (有) (有)
type="date", type="time" 未サポート (有) 57 (57) 未サポート 10.62 (有)[1]
type="datetime" 未サポート[4] 未サポート 未サポート[4] 未サポート[4] 未サポート[4] 未サポート[4]
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 input

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

関連情報