The Wayback Machine - https://web.archive.org/web/20170813171143/https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

input 要素

HTML <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用のインタラクティブなコントロールを作成するために使用します。<input> の動作は、type 属性の値に応じて大きく異なります。

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

属性

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

type
表示するコントロールの種類です。この属性を指定しない場合のデフォルトタイプは text です。以下の値が指定可能です。
  • button: デフォルトの動作がないプッシュボタン。
  • checkbox: チェックボックス。このアイテムで送信する値を定義するため、value 属性を使用しなければなりません。このアイテムが選択されているかを示すには、checked 属性を使用します。また、チェックボックスが不確定の状態 (ほとんどのプラットフォームで、チェックボックスを横切る水平線が引かれます) を表すために、indeterminate 属性を使用できます (プログラムから設定することのみ可能)。
  • color: HTML5 色を指定するためのコントロール。色選択の UI は、シンプルカラーをテキストで受け付ける以外に要求されている機能はありません (詳細)。
  • date: HTML5 日付 (時刻を除く年、月、日) を入力するためのコントロール。
  • datetime: HTML5 UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロール。この機能は WHATWG HTML から削除されました。
  • 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 を入力するためのフィールド。入力された値は送信前に、空文字列またはひとつの妥当な絶対 URL が含まれているかの検証を受けます。改行および先頭または末尾のホワイトスペースは、自動的に入力値から取り除かれます。pattern や maxlength といった属性を使用して、コントロールに入力する値を制限できます。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
  • week: HTML5 年と週の値から成る日付およびタイムゾーン情報がない週番号を入力するためのコントロール。
accept
type 属性の値が file である場合に、この属性はサーバーが受け入れるファイルの種類を示します。type 属性が他の値である場合は無視します。値は固有のコンテンツタイプ識別子の、カンマ区切りのリストでなければなりません:
  • ピリオド (U+002E) に続けてファイルの拡張子(例: .jpg, .png, .doc).
  • パラメーターを持たない、正しい MIME type
  • audio/* は音声ファイルを表すHTML5
  • video/* は動画ファイルを表すHTML5
  • image/* は画像ファイルを表すHTML5
accesskey HTML 4 のみ、廃止 HTML5
入力フォーカスをコントロールに切り替えるためにユーザーが押下できる 1 文字。この属性は HTML5 のグローバル属性です。
mozactionhint
仮想キーボードを持つモバイルデバイスで、Enter キーのラベルを決めるために使用する "アクションヒント" を指定します。サポートする値は go、done、next、search、send です。これらは自動的に、適切な文字列に割り当てられます (大文字・小文字は区別しません)。
autocapitalize
これは Chrome および iOS 版 Safari Mobile で使用する非標準属性であり、ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、iOS 5 以降で使用できます。以下の値を指定できます。
  • none: 自動大文字化機能を無効にします。
  • sentences: 文の先頭文字を自動的に大文字化します。
  • words: 単語の先頭文字を自動的に大文字化します。
  • characters: すべての文字を自動的に大文字化します。
  • on: iOS 5 から非推奨です。
  • off: iOS 5 から非推奨です。
Safari HTML リファレンスの autocapitalize documentation に関するドキュメント
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: 職種 (例: "Software Engineer", "Senior Vice President", "Deputy Managing Director")
  • 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
  • url: このフィールドに関連する別のフィールドの、会社・個人・住所・連絡先情報に対応するホームページや他のウェブページ。
  • photo: このフィールドに関連する別のフィールドの、会社・個人・住所・連絡先情報に対応する写真・アイコンや他の画像。

詳しくは WHATWG Standard をご覧ください。

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 属性とログインフィールド をご覧ください。

autocorrect
これは Safari がサポートする非標準属性であり、ユーザーが <input> にテキストを入力または編集した際にオートコレクトを実行するかを制御します。以下の値を指定できます:
  • on: オートコレクトを有効にする
  • off: オートコレクトを無効にする
Safari HTML リファレンスの autocorrect に関するドキュメント
autofocus HTML5
この論理属性で、(別のコントロールに入力するなどして) ユーザーが変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。ドキュメント内のフォーム要素でひとつだけが autofocus 属性を持つことができ、これは真偽値です。この属性は、type 属性が hidden である場合は適用できません (つまり、hidden コントロールへ自動的にフォーカスを設定することができません)。コントロールへのフォーカス適用は、DOMContentLoaded イベントが発生する前に行われます。
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 であるとき、この属性はボタンとして表示する画像の高さを定義します。
incremental
この属性は WebKit (Safari) および Blink (Chrome) がサポートする非標準属性であり、type が search である場合にのみ適用されます。この属性を設定すると (属性の値は不問)、<input> でユーザーがテキストを編集するのに応じて search イベントが発生します。このイベントは、最後のキーストロークから実装依存の時間が経過した後にのみ発生します。新たなキーストロークにより、経過時間はリセットされます。言い換えると、イベント発生時にデバウンス処理を行います。この属性を設定しない場合は、ユーザーが明示的に検索を実行した (例: フィールド内で Enter キーを押下する) 場合にのみ search イベントが発生します。Safari HTML リファレンスの incremental に関するドキュメント
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
type 属性の値が text、email、search、password、tel、url であるとき、この属性はユーザーが入力できる (Unicode コードポイントでの) 最大文字数です。他のコントロールタイプでは無視されます。この属性の値は、size 属性の値を超えることができます。この属性を指定していない場合、ユーザーは入力文字数を制限されません。負の値を指定すると、デフォルトの動作になります (つまり、ユーザーは入力文字数を制限されません)。制約は、属性の値が変更されたときにのみ評価されます。
min HTML5
アイテムの最小値 (数値または日時) であり、最大値 (min 属性) を上回ってはいけません。
minlength HTML5
type 属性の値が text、email、search、password、tel、url であるとき、この属性はユーザーが入力できる (Unicode コードポイントでの) 最小文字数です。他のコントロールタイプでは無視されます。
multiple HTML5
この論理属性は、ユーザーが複数の値を入力してよいかを示します。この属性は、type 属性の値が email または file である場合に適用します。他の値では無視します。
name
コントロールの名前であり、フォームデータとともに送信されます。
pattern HTML5
コントロールの値を検査する正規表現です。パターンは一部のサブセットではなく値全体にマッチしなければなりません。ユーザー支援として、title 属性を使用してパターンを説明しましょう。この属性は、type 属性の値が text、search、tel、url、email、password である場合に適用します。他の値では無視します。正規表現の文法は、JavaScript の 正規表現 アルゴリズムと同一です。また、パターンを一連の Unicode コードポイントとして扱わせる 'u' パラメーターを付加します。パターンはスラッシュで囲みません。
placeholder HTML5
コントロールに何を入力できるかに関する、ユーザーへの助言です。プレースホルダーのテキストはキャリッジリターンやラインフィードを含んではいけません。
注記: placeholder 属性を <label> 要素の代わりに使用してはいけません。この用途は誤っています。<label> 要素はフォーム要素の役割を述べます。つまり、どの種類の情報を求めているかを示します。一方 placeholder 属性は、入力すべき内容の体裁に関する助言です。placeholder 属性がユーザーに一切表示されない場合があるので、placeholder がなくても理解できるようにしなければなりません。
readonly HTML5
この属性は、ユーザがコントロールの値を変更できないことを示します。属性の値に意味はありません。入力値を読み書きしなければならない場合は、"readonly" 属性を追加してはいけません。この属性は、type 属性の値が hidden、range、color、checkbox、radio、file、ボタンタイプ (button や submit など) である場合に無視されます。
required HTML5
この属性は、フォームを送信する前に値を入力しなければならないことを示します。type 属性の値が hidden、image、またはボタンタイプ (submit、reset、button) である場合は使用できません。フィールドに対して適宜 :optional および :required CSS 疑似クラスが適用されます。
results
この属性は Safari がサポートする非標準属性であり、type が search である場合にのみ適用されます。過去の検索語句を表示する <input> のネイティブドロップダウンリストで、表示する項目の最大数を制御します。値は、負数ではない整数を指定します。
selectionDirection HTML5
選択が行われたときの方向を示します。LTR ロケールにおいて左から右へ、RTL ロケールにおいて右から左へ選択する場合は "forward"、逆方向に選択する場合は "backward" です。選択方向が不明である場合は "none" を指定できます。
selectionEnd
選択された最後の文字の、要素のテキストコンテンツにおけるオフセットです。未選択状態ではこの値は、現在のテキスト入力カーソルの位置の直後にある文字 (すなわち、次に入力した文字が入る場所) のオフセットを表します。
selectionStart
選択された最初の文字の、要素のテキストコンテンツにおけるオフセットです。未選択状態ではこの値は、現在のテキスト入力カーソルの位置の直後にある文字 (すなわち、次に入力した文字が入る場所) のオフセットを表します。
size
コントロールの初期サイズです。type 属性の値が text または password でなければ、値はピクセル値です。それらの値である場合は、文字数の整数値です。HTML5 より、この属性は type 属性の値が text、search、tel、url、email、password である場合にのみ適用され、他の値では無視されます。また、サイズは 0 より大きくしなければなりません。サイズを指定しない場合は、デフォルト値の 20 を使用します。HTML5 では単に "ユーザーエージェントは、少なくともその分の文字を確実に表示するべきです" と述べていますが、フォントによっては文字ごとに幅が異なる場合があります。size 属性を少なくとも 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 ソースで指定された値を無視する 点に注意してください。
webkitdirectory 
この論理属性は、type 属性が file であるときの選択ダイアログでディレクトリーしか選択できないことを示します。
width HTML5
type 属性の値が image であるとき、この属性はボタンとして表示する画像の幅を定義します。
x-moz-errormessage
この Mozilla 拡張は、フィールドが正常にバリデートされない場合に表示するエラーメッセージを指定できます。

注記

File input

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

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

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

エラーメッセージ

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

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

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

例

例 1: シンプルな入力ボックス

HTML

<p>A basic input</p>
<input type="text" value="Type here">

表示結果

例 2: 一般的な活用シナリオ

HTML

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

表示結果

モバイル版 Firefox で mozactionhint を使用

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

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

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

mozactionhint.png

ローカライゼーション

特定の <input> では、入力可能なテキストがロケールに依存します。あるロケールでは 1,000.00 が有効な数値である一方、別のロケールで有効な数値は 1.000,00 です。

Firefox は (少なくとも type="number" において) ユーザーの入力内容を検証する際に、ロケールを特定するために以下のヒューリスティクスを使用します:

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

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<input> の定義		 現行の標準  
HTML Media Capture
<input capture> の定義		 勧告候補 capture 要素を追加
HTML5
<input> の定義		 勧告  
HTML 4.01 Specification
<form> の定義		 勧告  

ブラウザー実装状況

機能 Chrome Firefox (Gecko)[28] Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) (有)[1] 1.0 1.0
type 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=button 1.0 1.0 (1.7 or earlier) 3 1.0 1.0
type=checkbox 1.0 1.0 (1.7 or earlier)
3.6 (1.9.2)[2]		 2 1.0 1.0
type=color 21.0 29.0 (29.0) 未サポート 11.01 未サポート
type=date 5.0[24] 未サポート[3] 未サポート 10.62 (有)[4]
type=datetime 未サポート[4] 未サポート[3] 未サポート 10.62 (有)[4]
type=datetime-local 5.0 未サポート[3] 未サポート 10.62 (有)[4]
type=email 5.0 4.0 (2.0) 10 10.62 ?
type=file 1.0 1.0 (1.7 or earlier) 3.02 1.0 1.0
type=hidden 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=image 1.0 1.0 (1.7 or earlier)[5] 2 1.0 1.0
type=month 5.0 未サポート[3] 未サポート 10.62 (有)[4]
type=number 6.0[7] 29.0 (29.0) 10[4] 10.62 (有)
type=password 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=radio 1.0 1.0 (1.7 or earlier)
3.6 (1.9.2)[2]		 2 1.0 1.0
type=range 5.0 23.0 (23.0) 10 10.62[8] (有)
type=reset 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=search 5.0 4.0 (2.0) 10 11.01 (有)
type=submit 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=tel 5.0 4.0 (2.0) 10 11.01 ?
type=text 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=time 5.0 未サポート[3] 未サポート 10.62 (有)[4]
type=url 5.0 4.0 (2.0) 10 10.62 ?
type=week 5.0 未サポート[3] 未サポート 10.62 (有)[4]
accept=[file extension] (有) 未サポート 10 ? 未サポート
accept=[MIME type] 8.0 16.0 (16.0) 10 10 未サポート
accept=audio/* (有) 4.0 (2.0)[9] 10 未サポート 未サポート
accept=video/* (有) 4.0 (2.0)[10] 10 未サポート 未サポート
accept=image/* (有) 4.0 (2.0)[11] 10 未サポート 未サポート
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey 1.0 (有) 6 1.0 ?
mozactionhint 未サポート 4.0 (2.0) 未サポート 未サポート 未サポート
autocapitalize 43 ? ? ? (有)
autocomplete 17.0 4.0 (2.0) 5 9.6 5.2
autofocus 5.0 4.0 (2.0) 10 9.6 5.0
capture Chrome for Android (0.16) ? ? ? ?
checked 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
disabled 1.0 1.0 (1.7 or earlier)[25] 6 1.0 1.0
form 9.0 4.0 (2.0) ? 10.62 ?
formaction 9.0 4.0 (2.0) 10 10.62 5.2
formenctype 9.0 4.0 (2.0) 10 10.62 ?
formmethod 9.0 4.0 (2.0) 10 10.62 5.2
formnovalidate 5.0[12] 4.0 (2.0) 10 10.62 ?
formtarget 9.0 4.0 (2.0) 10 10.62 5.2
height 1.0 16.0 (16.0) ? 1.0 ?
incremental (有) 未サポート 未サポート 未サポート (有)
inputmode 未サポート 未サポート 未サポート 未サポート 未サポート
list 20.0 4.0 (2.0) 10 9.6 未サポート
max 5.0 16.0 (16.0) ? 10.62 ?
maxlength 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
min 5.0 16.0 (16.0) ? 10.62 ?
minlength 40.0 ? ? ? ?
multiple 1.0[13] 3.6 (1.9.2)[14]
(有)[15]		 10 1.0
10.62[14]
11.01[15]		 ?
name 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
pattern 5.0 4.0 (2.0) 10 9.6 未サポート
placeholder 10.0 4.0 (2.0) 10 11.00 5.0
readonly 1.0 1.0 (1.7 or earlier) 6[16] 1.0 1.0
required 5.0
10[17]		 4.0 (2.0) 10 9.6 未サポート
size 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
spellcheck 10.0 3.6 (1.9.2) 10 11.0 4.0
src 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
step 6.0 16.0 (16.0) 10 10.62 5.0
tabindex 1.0 1.0 (1.7 or earlier) 6[18] (有) ?
webkitdirectory (有) 49.0 (49.0) ? (有) (有)
width 1.0 16.0 (16.0) ? 1.0 ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 4.0 (2.0) (有) (有) (有)
type (有) (有) (有) (有) (有)
type=button (有) (有)[27] (有) (有) (有)
type=checkbox (有) (有) (有) (有) (有)
type=color ? 27.0 (27.0) ? (有) ?
type=date 未サポート 未サポート 未サポート 10.62 5.0[23]
type=datetime 未サポート 未サポート 未サポート 10.62 (有)[23]
type=datetime-local 未サポート 未サポート 未サポート 10.62 (有)[23]
type=email ? 4.0 (2.0) ? (有) 3.1[19]
type=file ? ?[27] ? ? (有)[21]
type=hidden (有) (有) (有) (有) (有)
type=image (有) (有) (有) (有) (有)
type=month 未サポート 未サポート 未サポート 10.62 (有)[23]
type=number 2.3 29.0 (29.0) ? (有) 4.0[19]
type=password (有) (有) (有) (有) (有)[22]
type=radio (有) (有) (有) (有) (有)
type=range ? 未サポート ? (有) 5.0
type=reset (有) (有) (有) (有) (有)
type=search ? 4.0 (2.0) ? 10.62 4.0[22]
type=submit (有) (有)[27] (有) (有) (有)
type=tel 2.3 4.0 (2.0) ? 10.62 3.1[22]
type=text (有) (有)[27] (有) (有) (有)[22]
type=time 未サポート 未サポート 未サポート 10.62 (有)[23]
type=url ? 4.0 (2.0) ? 10.62 3.1[19]
type=week 未サポート 未サポート 未サポート 10.62 (有)
accept=[MIME type] ? ? ? ? ?
accept=audio/* ? ? ? ? ?
accept=image/* ? ?[26] ? ? ?
accept=video/* ? ? ? ? ?
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey ? ? ? ? ?
autocapitalize ? ? ? ? ?[29]
autocomplete ? 4.0 (2.0) (有) (有) (有)
autofocus 3.2 4.0 (2.0) ? (有) ?
capture 3.0 10.0 (10.0) ? ? 6.0
checked (有) (有) (有) (有) (有)
disabled (有) 4.0 (2.0) (有) (有) (有)
form ? ? ? ? ?
formaction ? 4.0 (2.0) ? 10.62 5.0
formenctype ? ? ? ? ?
formmethod ? 4.0 (2.0) ? 10.62 5.0
formnovalidate ? 4.0 (2.0) ? 10.62 ?
formtarget ? 4.0 (2.0) ? 10.62 5.0
height ? 16.0 (16.0) ? ? ?
list 未サポート 4.0 (2.0) ? (有) ?
max ? 16.0 (16.0)[20] ? 10.62 ?
maxlength (有) 4.0 (2.0) (有) (有) (有)
min ? 16.0 (16.0)[20] ? 10.62 ?
minlength ? 未サポート ? 27.0 ?
multiple ? (有) ? (有) ?
name (有) 4.0 (2.0) (有) (有) 1.0
pattern ? 4.0 (2.0) ? (有) (有)
placeholder 2.3 4.0 (2.0) ? 11.10 4
readonly (有) 4.0 (2.0) (有) (有) (有)
required ? (有) ? (有) ?
size (有) 4.0 (2.0) (有) (有) (有)
spellcheck ? 4.0 (2.0) ? 11.0 ?
src ? ? ? ? ?
step ? 16.0 (16.0)[20] ? 10.62 ?
tabindex ? ? ? ? ?
webkitdirectory (有) 49.0 (49.0) ? (有) (有)
width ? 16.0 (16.0) ? ? ?

[1] バージョン 2 またはそれ以前に実装されました。

[2] indeterminate 値を実装しました。

[3] この機能は未実装です。バグ 888320 および TPE DOM/Date time input types をご覧ください。

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

[5] Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) はクリックしたときの x 座標と y 座標のみ送信し、要素の name/value は送信しません

[7] Chrome 11 でローカライズしました。

[8] Opera 11.01 でデフォルト値をサポートしました。

[9] 以下の音声ファイル拡張子に限定: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma

[10] 以下の動画ファイル拡張子に限定: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid

[11] 以下の画像ファイル拡張子に限定: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

[12] 6.0 では HTML5 doctype のみで動作。バリデーションのサポートは 7.0 で無効化され、10.0 で再び有効化されました。

[13] バージョン 5.0 で type="file" および type="email" をサポートしました。

[14] type="file" をサポートしました。

[15] type="email" をサポートしました。

[16] type="checkbox" および type="radio" ではサポートしていません。

[17] <select> 要素をサポートしました。

[18] tabindex > 0 の要素はナビゲートされません。

[19] バリデーションは行いませんが、専用のキーボードを提供します。iOS の Safari Mobile は無効化したテキスト型 <input> 要素に、opacity: 0.4 をデフォルトスタイルに適用しています。他の主要ブラウザーは現在、このデフォルトスタイルを共有していません。

[20] UI は未実装であると思われます。

[21] iOS 8.0 および 8.0.1 の Mobile Safari は、ファイルアップロード機能に問題がありました。このバグは iOS 8.0.2 で修正されました。

[22] iOS の Safari Mobile は無効化したテキスト型 <input> 要素に、opacity: 0.4 をデフォルトスタイルに適用しています。他の主要ブラウザーは現在、このデフォルトスタイルを共有していません。

[23] iOS の Safari Mobile は type="date"、type="time"、type="datetime"、type="datetime-local"、type="month" である <input> に display: block を設定しており、内部のテキストの位置がずれています。WebKit bug 139848 をご覧ください。

[24] Chrome 39 では display: table-cell; width: 100%; を適用した type="date" の <input> で、Chrome から min-width が強制されるため、min-width で指定された最小幅より小さくすることができません。Chromium bug #346051 をご覧ください。

[25] Firefox のデフォルト動作は他のブラウザと異なり、ページを再読み込みしても <input> を 動的に無効化した状態や動的にチェックした状態 (効力があれば) を維持します。autocomplete 属性の値を off にすると、この機能が無効になります。またこの設定は、type 属性が通常 autocomplete を適用しない値である <input> 要素でも有効です。バグ 654072 をご覧ください。

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

[27] Android 版 Firefox は、すべての type="file" である input 要素に background-image でグラデーションを設定します。これは background-image: none を使用して無効化できます。また、デフォルトで border も設定しています。

[28] Firefox 51 より前のバージョンでは、選択していないときに selectionStart および selectionEnd が 0 を返していました。Firefox 51より、現在のテキスト入力カーソルの位置の直後にある文字のオフセットを正しく返します。これは、次に入力した文字が配置される場所です。

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

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss
 最終更新者: yyss,