目次に戻る

input要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性

グローバル属性及びtype属性以外の属性は、typeごとに、指定可否が異なる。

  • グローバル属性
  • type→hidden、text、search、tel、url、email、password、datetime-local、date、month、week、time、number、range、color、checkbox、radio、file、submit、image、reset、button。デフォルトは、text
  • name→送信用名前文字列。属性値にisindexを指定してはならない。
  • value→送信値（のデフォルト）を指定する。改行文字を含んではならない。
  • src→イメージボタンの画像を指定するURL。
  • alt→イメージラベルに代わる代替テキストラベルを指定。
  • accept→audio/*（音声ファイル）、video/*（動画ファイル）、image/*（画像ファイル）、妥当なMIME type、ピリオド付拡張子。カンマ区切りで複数指定可。サーバーが受入れ可能なファイル形式を指定。同じファイル形式について、MIME typeと拡張子の両方で指定することが推奨される。
  • autocomplete→on、off、その他。デフォルトは、所属フォームの設定値、それがない場合は、on。自動補完機能の設定。
  • checked→ブーリアン属性。チェック状態にするときに指定。
  • alpha→ブーリアン属性。指定された場合は、ユーザーは色入力において透明度の操作が可能となる。
  • colorspace→値は下記のとおり。色入力における送信値の方式を指定。デフォルトは、limited-srgb
    • limited-srgb→16進数RGB方式カラーコードか、sRGB方式カラーコード。
    • display-p3→display-p3方式カラーコード。
  • dirname→送信値の書字方向値をフォーム送信するときにセットとなる送信用名前文字列。
  • disabled→ブーリアン属性。指定されたフォームコントロールは無効となる（操作・入力できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
  • formaction→フォーム送信先のURLを指定。form要素の指定より優先される。
  • formenctype→値は下記のとおり。フォームのデータ形式を指定。form要素の指定より優先される。非妥当値のデフォルトは、application/x-www-form-urlencoded
    • application/x-www-form-urlencoded→すべての文字をURLエンコード形式でフォーム送信。
    • multipart/form-data→バイナリーデータ形式でフォーム送信（ファイルの場合はこれを指定する）。
    • text/plain→プレーンテキスト形式でフォーム送信。
  • formmethod→フォーム送信形式を指定。form要素の指定より優先される。非妥当値のデフォルトは、get
    • get→URLの一部としてフォーム送信（URL末尾に、「?」の後に、「&」区切りで、「送信用名前文字列=送信値」を列挙）。
    • post→HTTP通信の本体データとしてフォーム送信。
    • dialog→直近の祖先dialog要素の返し値（returnValueプロパティの値）にセットして、ダイアログボックスを閉じる。
  • formnovalidate→ブーリアン属性。フォーム送信時の制約検証をしない場合に指定する。form要素の指定より優先される。
  • formtarget→値は下記のとおり。フォーム送信の結果を表示する場所を指定する場合に指定する。form要素の指定より優先される。
    • _blank→別ウィンドウ又は別タブ。
    • _top→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先の閲覧文脈。
    • _parent→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の親の閲覧文脈。
    • _self→当該要素が現在属している閲覧文脈。
    • その他妥当な閲覧文脈名→「_」（アンダースコア）で始まらない一文字以上の文字列。当該要素が現在属している入れ子の閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ（もしくは別タブ）に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • list→同一HTML文書内にあるdatalist要素のid属性値。サジェストリストを指定する。
  • max→入力値の最大値を指定。
  • min→入力値の最小値を指定。
  • maxlength→入力値の最大データ容量を、非負整数の文字数で指定。
  • minlength→入力値の最小データ容量を、非負整数の文字数で指定。
  • multiple→ブーリアン属性。指定された場合は、複数の値を入力できる。
  • pattern→入力値の制約条件をジャバスクリプトの正規表現で指定。全部一致で判定される。
  • placeholder→当該入力コントロールの入力値のヒントとなるテキスト。改行文字を含んではならない。これはラベルの代わりに用いられるべきものではない。
  • popovertarget→ボタンによる操作のターゲットとなる要素（popover属性が指定されたものに限る）のid属性値。input要素がフォームの送信ボタンとして機能する場合は、popovertarget属性は機能しない。
  • popovertargetaction→値は下記のとおり。未指定あるいは非妥当値のデフォルトは、toggle。popovertarget属性で指定されたターゲットに対する操作を指定する。
    • toggle→表示・非表示の状態を切り替える。
    • show→表示状態にする。
    • hide→非表示状態にする。
  • readonly→ブーリアン属性。指定されれば、当該フォームコントロールは操作・入力はできなくなるが、送信値はフォーム送信される。この状態は、スクリプトを用いないと解除できない。
  • required→ブーリアン属性。その項目の入力が必須の場合に指定。
  • size→0を除く非負整数。入力時にユーザーに見せる文字数（基本的に半角英数換算の文字数）を指定する。これを超えると入力値の最初の方が見えなくなる。デフォルトは、20
  • step→0より大きい浮動小数点数か、any（指定なし）のいずれか。入力可能な数値の最小単位を指定する。デフォルトはtypeによって異なる。
  • width→px単位の幅を指定する非負整数。単位はつけない。イメージボタンの幅を指定。
  • height→px単位の高さを指定する非負整数。単位はつけない。イメージボタンの高さを指定。
  • max、min、valueの各属性に属性値を指定する場合においては、指定されているtypeにそれに対応する制約検証がある場合は、原則としてその条件に一致する値でなければならない。ただし、datetime-localでは日付と時刻の区切り文字として「T」のほか半角スペースも可であり、colorの場合は英文字が大文字でも可である（とはいうものの、ブラウザの実装はあやしいので、条件に厳密に従った方が無難）。
  • 周期的な値でない限り、max属性値は、min属性値より小さくてはならない。
  • minlength属性値は、maxlength属性値以下でなければならない。
  • pattern属性がある場合は、title属性値は、当該pattern属性が指定する検証パターンを説明する記述を値としなければならない。
  • pattern属性がある場合は、指定する検証パターンを説明するtitle属性を指定すべきである。
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい（/>）。
WAI-ARIA
  • disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
  • disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
  • readonly属性が指定されている場合は、aria-readonly属性を指定すべきではない。
  • readonly属性が指定されている場合は、aria-readonly属性値にfalseを指定してはならない。
  • required属性が指定されている場合は、aria-required属性を指定すべきではない。
  • required属性が指定されている場合は、aria-required属性値にfalseを指定してはならない。
  • placeholder属性が指定されている場合は、aria-placeholder属性を指定してはならない。
  • max属性が指定可能な場合は、aria-valuemax属性を指定すべきではない。
  • max属性が指定されている場合は、aria-valuemax属性を指定してはならない。
  • min属性が指定可能な場合は、aria-valuemin属性を指定すべきではない。
  • min属性が指定されている場合は、aria-valuemin属性を指定してはならない。
視覚系ブラウザのデフォルトとして期待されるCSS

  input {
    display: inline-block;
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: initial;
    appearance: auto;
  }

  input[type=hidden i] {display: none !important;}

  input:is(
    [type=search i],
    [type=color i],
    [type=checkbox i],
    [type=radio i],
    [type=submit i],
    [type=reset i],
    [type=button i]
  ) {box-sizing: border-box;}

  input[dir=auto i]:is(
    [type=text i],
    [type=search i],
    [type=tel i],
    [type=url i],
    [type=email i]
  ) {unicode-bidi: plaintext;}

  input[type=tel i]:dir(ltr) {direction: ltr;}

  input:is(
    [type=submit i],
    [type=reset i],
    [type=button i]
  ) {text-align: center;}

  input:is(
    [type=hidden i],
    [type=file i],
    [type=image i]
  ) {appearance: none;}

  input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]
  ) {
    overflow: clip !important;
    overflow-clip-margin: 0 !important;
  }
  input:autofill {field-sizing: fixed !important;}

注記：なお、typeがデフォルトでtextの場合も、上記の[type=text i]の場合と同様のデフォルトCSSが適用になる。

typeが「hidden、image」以外の場合は、内部表示型は、常にflow-root

制約検証
  • typeが「hidden、reset、button」以外なら、原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
  • readonly属性があれば、制約検証の対象から除外。
  • required属性があれば、必須の入力がなされてるかどうかチェック。
  • pattern属性があれば、入力値が指定されたパターンに合致するかどうかチェック。合致しない場合は、ユーザーエージェントは、検証パターンを説明するものとして、title属性値を提示してもよい。
  • minlength属性があれば、入力値のデータ量が指定値を下回ってないかどうかチェック。
  • maxlength属性があれば、入力値のデータ量が指定値をオーバーしてないかどうかチェック。
  • min属性があれば、入力値が指定値を下回ってないかどうかチェック。
  • max属性があれば、入力値が指定値を上回ってないかどうかチェック。
  • step属性があれば、入力値が指定値によるルールに合致するかどうかチェック。合致しない場合においては、ユーザーエージェントは、入力値を近似の妥当値に変更してもよい。
ユーザーエージェントに対する特記事項
  • pattern属性の制約検証に抵触した場合でなくても、検証パターンを説明するものとして、title属性値を提示してもよい。
  • 当該入力コントロールにフォーカスが当たってなくて、かつ、当該入力コントロールの送信値が空の場合は、placeholder属性値を提示すべきである。この扱いにおいては、autofocus属性でフォーカスが当たってしまった場合も、フォーカスが当たってないものとみなす。
  • ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
  • maxlength属性に反する入力を妨げてもよい。

アクセシビリティ関連

私見・補足

制約条件に反する入力を完全に不可能にするようなユーザーインターフェースをとるユーザーエージェントもあり、その場合は制約検証のエラーがユーザーに対して提示されることはないということになる（エラーになるような入力がそもそもできない）。

disabledやreadonlyの状態のときのレンダリングについては、HTML Living Standardには明記がないようなのだが、HTML4.01仕様のフォーム関連の規定では、ユーザーエージェントによるものとされていたので、それに基づいて実装しているブラウザが多いと思われる。

type別詳細

type属性値=hidden

属性

name属性値が、_charset_のときは、特殊な意味をもち、value属性は省略されなければならない（送信値にはフォーム送信されるテキストの文字エンコーディングを示す値が自動でセットされる）。

autocomplete属性値として、on及びoffは指定禁止。

WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
制約検証
  • 制約検証の対象から除外。
意味・用法

ユーザーが確認したり操作したりすることを想定しない送信値を指定する。

私見・補足

表示されない。

type属性値=text（デフォルトでこの状態の場合を含む）

属性
WAI-ARIA
  • list属性が指定されてない場合は、
    • デフォルトroleは、textbox。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、combobox、searchbox、spinbuttonを指定可。
  • list属性が指定されている場合は、
    • デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外のroleは、指定不可。
  • list属性が指定されている場合は、aria-haspopup属性を指定すべきではない。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
ユーザーエージェントに対する特記事項
  • 改行文字の入力を許容しないようにしなければならない。
  • 入力値から改行文字を削除する。
意味・用法

一行プレーンテキスト入力コントロールを表す。

私見・補足

最も基本的な入力コントロール。

属性
WAI-ARIA
  • list属性が指定されてない場合は、デフォルトroleは、searchbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • list属性が指定されている場合は、デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • list属性が指定されている場合は、aria-haspopup属性を指定すべきではない。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
ユーザーエージェントに対する特記事項
  • 改行文字の入力を許容しないようにしなければならない。
  • 入力値から改行文字を削除する。
意味・用法

検索のための一行プレーンテキスト入力コントロールを表す。

私見・補足

最近の視覚系ブラウザでは、ユーザーの操作で入力値を消去できる機能をもつ場合が多いようだ。

type属性値=tel

属性
WAI-ARIA
  • list属性が指定されてない場合は、デフォルトroleは、textbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • list属性が指定されている場合は、デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • list属性が指定されている場合は、aria-haspopup属性を指定すべきではない。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
ユーザーエージェントに対する特記事項
  • 改行文字の入力を許容しないようにしなければならない。
  • 入力値から改行文字を削除する。
意味・用法

電話番号の入力のための一行プレーンテキスト入力コントロールを表す。

私見・補足

入力補助としてテンキーが表示されることが期待されるかもしれない。

固有の制約検証はないので、形式を限定したい場合はpattern属性で指定する。

type属性値=url

属性
WAI-ARIA
  • list属性が指定されてない場合は、デフォルトroleは、textbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • list属性が指定されている場合は、デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • list属性が指定されている場合は、aria-haspopup属性を指定すべきではない。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
制約検証
  • 入力値が妥当な絶対URLかどうかチェック。
ユーザーエージェントに対する特記事項
  • 改行文字の入力を許容しないようにしなければならない。
  • 入力値から改行文字を削除する。
  • 入力値のURLの前後の空白文字を削除する。
意味・用法

単一の絶対URL入力のための一行プレーンテキスト入力コントロールを表す。

私見・補足

入力値は絶対URLでなければならないので、placeholder属性値には、そうでないURLだと誤認されるような記載はしないこと。

type属性値=email

属性
WAI-ARIA
  • list属性が指定されてない場合は、デフォルトroleは、textbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • list属性が指定されている場合は、デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • list属性が指定されている場合は、aria-haspopup属性を指定すべきではない。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • その書字方向が当該要素のdirectionプロパティの状態と合致するような入力ユーザーインターフェースを提示する。
制約検証
  • 入力値が妥当なメールアドレスかどうかチェック。
ユーザーエージェントに対する特記事項
  • 個々のメールアドレスの入力において、改行文字及びカンマ文字の入力を許容しないようにしなければならない。
  • 入力値の個々のメールアドレスについて、改行文字及びカンマ文字を削除する。
  • 入力値の個々のメールアドレスの前後の空白文字を削除する。
  • 入力値の個々のメールアドレスが国際化ドメイン名である場合は、punycodeに変換して送信値とすべきである。
  • 個々のメールアドレスがpunycodeである場合は、入力コントロールのユーザーインターフェースにおいては国際化ドメイン名に変換して表示すべきである。
  • multiple属性が指定されている場合で、複数のメールアドレスが入力された場合は、それらをカンマ区切りで連結して送信値とする。
意味・用法

メールアドレス（のリスト）の入力のための一行プレーンテキスト入力コントロールを表す。

私見・補足

ユーザーエージェントに内蔵しているアドレス帳データからメールアドレスを選択できるようにする機能を持たせるようなことも想定されているようである。

type属性値=password

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの使用値は、normalが指定された場合の使用値よりも、小さくはならない。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、value属性値又はplaceholder属性値で示されるテキストの文字幅がデフォルトの推奨表示幅となる。
  • size属性がある場合は、その文字幅がデフォルトの推奨表示幅となる。
  • 前二項に該当しない場合は、２０文字幅がデフォルトの推奨表示幅となる。
  • 入力値のはみ出し分はスクロール表示する。
  • 入力された文字列は覆い隠されて表示される。
ユーザーエージェントに対する特記事項
  • 改行文字の入力を許容しないようにしなければならない。
  • 入力値から改行文字を削除する。
  • ユーザー以外が入力値を見ることができないように、入力値を覆い隠すべきである。
意味・用法

パスワードの入力のための一行プレーンテキスト入力コントロールを表す。

私見・補足

パスワードをフォーム送信するform要素において、method属性値をgetにすると、ブラウザの履歴にパスワードが見える状態のURLが保存されるなどして、セキュリティ上望ましくない状態となる。

type属性値=datetime-local

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • ローカルタイムの年月日時刻入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • 可能な限り広い入力値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な年月日時刻（「yyyy-mm-ddThh:mm:ss」書式。年部分は4桁以上で1以上。秒部分は2桁で、小数点以下も3桁まで可。その他は2桁。「T」は大文字。なお、秒部分はなくてもよい。例：0001-01-01T00:00:00）かどうかチェック。年月日と時刻の区切り文字が半角スペースである場合は、大文字の「T」に自動的に変換する。条件に違反する文字列の場合は、自動的に値を空に変換する。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：日本人が対象の日本語のブラウザで、「2018年7月1日17時35分25秒」と表示されていても、送信値は「2018-07-01T17:35:25」である。
  • グレゴリオ暦導入前の年月日時刻の入力において、ユリウス暦に基づく入力を先発グレゴリオ暦に変換する機能をサポートする義務はない（ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる）。
意味・用法

ローカルタイムにおける所定書式（「yyyy-mm-ddThh:mm:ss」書式。年部分は4桁以上で1以上。秒部分は2桁で、小数点以下も3桁まで可。その他は2桁。「T」は大文字。なお、秒部分はなくてもよい。例：0001-01-01T00:00:00）の年月日時刻入力コントロールを表す。

送信値の年月日部分は、先発グレゴリオ暦を前提とする。

送信値の時刻部分は、24時間制の協定世界時（それができる前の時期においては、世界時1型）に基づくローカルタイムの時刻を前提とする。

グレゴリオ暦導入前の年月日時刻の入力に、これを用いることは推奨されない。

私見・補足

送信値にタイムゾーンオフセットはつかないので、ユーザーのローカルタイム又は文脈から推定されるローカルタイムを前提とすることになると思われる。あるいは、タイムゾーンを入力・選択するフォームコントロールを前後に用意するか、タイムゾーンをプログラムで自動的に判定して前後に用意したtypeがhiddenのinput要素の送信値にセットするか。

入力補助としてカレンダーが表示されることが期待されるかもしれない。カレンダーのピッカーは、閉鎖要求行為の対象となりうる。

type属性値=date

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 年月日入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • 可能な限り広い入力値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な年月日（「yyyy-mm-dd」書式。年部分は4桁以上で1以上。その他は2桁。例：0001-01-01）かどうかチェック。条件に違反する文字列の場合は、自動的に値を空に変換する。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：日本人が対象の日本語のブラウザで、「2018年7月1日」と表示されていても、送信値は「2018-07-01」である。
  • グレゴリオ暦導入前の年月日の入力において、ユリウス暦に基づく入力を先発グレゴリオ暦に変換する機能をサポートする義務はない（ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる）。
意味・用法

所定書式（「yyyy-mm-dd」書式。年部分は4桁以上で1以上。その他は2桁。例：0001-01-01）の年月日入力コントロールを表す。

送信値は、先発グレゴリオ暦を前提とする。

グレゴリオ暦導入前の年月日の入力に、これを用いることは推奨されない。

私見・補足

入力補助としてカレンダーが表示されることが期待されるかもしれない。カレンダーのピッカーは、閉鎖要求行為の対象となりうる。

type属性値=month

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 年月入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • 可能な限り広い入力値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な年月（「yyyy-mm」書式。年部分は4桁以上で1以上。月部分は2桁。例：0001-01）かどうかチェック。条件に違反する文字列の場合は、自動的に値を空に変換する。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：日本人が対象の日本語のブラウザで、「2018年7月」と表示されていても、送信値は「2018-07」である。
  • グレゴリオ暦導入前の年月の入力において、ユリウス暦に基づく入力を先発グレゴリオ暦に変換する機能をサポートする義務はない（ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる）。
意味・用法

所定書式（「yyyy-mm」書式。年部分は4桁以上で1以上。月部分は2桁。例：0001-01）の年月入力コントロールを表す。

送信値は、先発グレゴリオ暦を前提とする。

グレゴリオ暦導入前の年月の入力に、これを用いることは推奨されない。

私見・補足

入力補助としてカレンダーが表示されることが期待されるかもしれない。カレンダーのピッカーは、閉鎖要求行為の対象となりうる。

type属性値=week

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 週入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • 可能な限り広い入力値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な週指定（「yyyy-Www」書式。年部分は4桁以上で1以上。週部分は2桁。「W」は大文字。例：0001-W01）かどうかチェック。条件に違反する文字列の場合は、自動的に値を空に変換する。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：日本人が対象の日本語のブラウザで、「2018年第1週」と表示されていても、送信値は「2018-W01」である。
  • グレゴリオ暦導入前の週の入力において、ユリウス暦に基づく入力を先発グレゴリオ暦に変換する機能をサポートする義務はない（ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる）。
意味・用法

所定書式（「yyyy-Www」書式。年部分は4桁以上で1以上。週部分は2桁。「W」は大文字。例：0001-W01）の週入力コントロールを表す。

送信値は、先発グレゴリオ暦を前提とする。

週の始まりは月曜日。当該年の最初の木曜日を含む週が当該年の第1週となり、その前週が前年の最終週となる。

グレゴリオ暦導入前の週の入力に、これを用いることは推奨されない。

私見・補足

入力補助としてカレンダーが表示されることが期待されるかもしれない。カレンダーのピッカーは、閉鎖要求行為の対象となりうる。

type属性値=time

属性
WAI-ARIA
  • roleは指定不可。
  • roleがtextboxであったとしたら許容されるaria-*属性も指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 時刻入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • 可能な限り広い入力値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な時刻（「hh:mm:ss」書式。秒部分は2桁で、小数点以下も3桁まで可。その他は2桁。なお、秒部分はなくてもよい。例：00:00:00）かどうかチェック。条件に違反する文字列の場合は、自動的に値を空に変換する。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：日本人が対象の日本語のブラウザで、「17時35分25秒」と表示されていても、送信値は「17:35:25」である。
意味・用法

タイムゾーン情報を伴わない所定書式（「hh:mm:ss」書式。秒部分は2桁で、小数点以下も3桁まで可。その他は2桁。なお、秒部分はなくてもよい。例：00:00:00）の時刻入力コントロールを表す。

送信値は、24時間制の協定世界時（それができる前の時期においては、世界時1型）に基づくタイムゾーン情報を伴わない時刻を前提とする。

私見・補足

送信値にタイムゾーンオフセットはつかないので、タイムゾーンを問題としない時刻、又は、ユーザーのローカルタイムもしくは文脈から推定されるローカルタイムを前提とすることになると思われる。あるいは、タイムゾーンを入力・選択するフォームコントロールを前後に用意するか、タイムゾーンをプログラムで自動的に判定して前後に用意したtypeがhiddenのinput要素の送信値にセットするか。

入力補助として時計やスピンボタンが表示されることが期待されるかもしれない。時計のピッカーは、閉鎖要求行為の対象となりうる。

type属性値=number

属性
WAI-ARIA
  • デフォルトroleは、spinbutton。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 数値入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分。
  • field-sizingプロパティの適用が期待される。
  • field-sizingプロパティの計算値がcontentの場合は、現に表示されている数値の文字幅がデフォルトの推奨表示幅となる。
  • 前項に該当しない場合は、可能な限り広い数値の表示幅がデフォルトの推奨表示幅となる。
制約検証
  • 入力値が妥当な浮動小数点数かどうかチェック。条件に違反する文字列の場合は、自動的に値を空に変換する。
準拠チェッカーに対する規定
  • typeがnumberのinput要素に間違ってmaxlength属性やsize属性が指定されていても、エラーとはせずに警告にとどめることが許容される。
ユーザーエージェントに対する特記事項
  • 入力コントロールのユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例：「1,000」と表示されていても、送信値は「1000」である。
意味・用法

数値入力コントロールを表す。

クレジット番号や郵便番号のようなものの入力には不適合。

私見・補足

入力補助としてスピンボタンが表示されることが期待されるかもしれない。

潜在的にもしくは明示的に計算されうる数値、又は、潜在的にもしくは明示的に大小関係が問題になりうる数値などの入力に適合だろう。クレジット番号や郵便番号のようなものの入力には不適合というのは、そういう意味合いかと思われる。

type属性値=range

属性
WAI-ARIA
  • デフォルトroleは、slider。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • スライダー式入力コントロール（横書き方式の場合は、水平スライダー式入力コントロール。縦書き方式の場合は、垂直スライダー式入力コントロール）を、inline-blockボックスで表示。
  • 横書き方式の場合は、最低値はコントロールの左端（ただし、当該要素の書字方向が右から左の場合は、右端）。縦書き方式の場合は、最低値はコントロールの上端（ただし、当該要素の書字方向が右から左の場合は、下端）。
  • list属性がある場合は、候補となる値はスライダー上に目盛として示され、かつ、その目盛で止めることができるようにする。
制約検証
  • 入力値が妥当な浮動小数点数かどうかチェック。条件に違反する文字列の場合は、自動的に値をデフォルトに変換する。
意味・用法

数値入力コントロールを表す。ただし、正確な値は重要ではない旨を示唆するため、単純なユーザーインターフェースをとる。

私見・補足

ユーザー側の主観としては、厳密な数値ではなく大雑把な分量を入力するということ。実際の送信値は、きちんとした数値であるが。

type属性値=color

属性
WAI-ARIA
視覚系ブラウザにおいて期待されるレンダリング
  • ボタンを表示。
  • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスには、何も入らない。
  • 匿名ボタン内容ボックスの背景色は、当該要素の送信値をヒントとして決定。
  • ボタンの動作時には、色が選択可能なカラーピッカーを表示。
  • list属性がある場合は、候補となる色はカラーピッカーに表示される。
制約検証
  • 入力値が妥当な所定方式カラーコードかどうかチェック。
意味・用法

色入力コントロールを表す。

私見・補足

カラーピッカーは、閉鎖要求行為の対象となりうる。

type属性値=checkbox

属性
WAI-ARIA
  • デフォルトroleは、checkbox。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、button、menuitemcheckbox、option、switchを指定可。
  • aria-checked属性を指定してはならない。
視覚系ブラウザにおいて期待されるレンダリング
  • ラベルを伴わない単独のチェックボックスコントロールを、inline-blockボックスで表示。
意味・用法

チェック状態を表すチェックボックスコントロールを表す。

私見・補足

単体ではユーザーにとっては意味不明なので、label要素でラベルをつけるべきである。

type属性値=radio

属性
WAI-ARIA
  • デフォルトroleは、radio。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、menuitemradioを指定可。
  • aria-checked属性を指定してはならない。
視覚系ブラウザにおいて期待されるレンダリング
  • ラベルを伴わない単独のラジオボタンコントロールを、inline-blockボックスで表示。
制約検証
  • ラジオボタングループのうちどれかにrequired属性が指定されている場合は、ラジオボタングループのうちのどれかがチェック状態になっていれば、制約検証の制約条件を満たす。
意味・用法

ラジオボタンコントロールを表す。

同一name属性値をもつ複数のラジオボタンコントロールが1個のラジオボタングループを構成し、そのうち1個だけがチェック状態を保持できる。

ラジオボタングループは、1個だけのラジオボタンコントロールで構成されていてはならない（同一のname属性値をもつ複数のラジオボタンコントロールが存在しなければならないということ）。

初期状態でどのラジオボタンコントロールもチェック状態にないラジオボタングループは、避けることが推奨される。

私見・補足

value属性のデフォルト値であるonがフォーム送信されてしまうと、ラジオボタングループとしてはほとんど無意味なので、value属性値は指定すべきであろう。

単体ではユーザーにとっては意味不明なので、label要素でラベルをつけるべきである。

type属性値=file

属性
WAI-ARIA
視覚系ブラウザにおいて期待されるレンダリング
  • 下記を含むinline-blockボックスを表示。
    1. ファイルが選択された場合は、そのファイル名のテキスト。
    2. 上記に続いて、ボタン。
  • ボタンは、下記のとおり。
    • ボタンを表示。
    • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
    • ボタン内部の匿名ボタン内容ボックスに入るテキストは、ユーザーエージェントの（地域設定・言語設定に基づく）デフォルトによる（一般的には、「choose file」を意味する単語）。
    • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
    • ボタンの動作時には、ファイルを選択するピッカーを表示。
  • field-sizingプロパティが適用されてもよい。
  • field-sizingプロパティの計算値がcontentの場合は、「::file-selector-button疑似要素の幅」＋「選択されたファイル名のテキストの文字幅」がデフォルトの推奨表示幅となる。
ユーザーエージェントに対する特記事項
  • accept属性の指定で受入れ可能とした形式以外のファイルを選択できないようにすべきである。
意味・用法

ファイルを選択するフォームコントロールを表す。

私見・補足

ファイルをフォーム送信するform要素では、method属性値はpost、enctype属性値はmultipart/form-dataに指定しておく。

多くのブラウザでは、ファイルを選択するピッカーは、閉鎖要求行為に応答する。

type属性値=submit

属性
WAI-ARIA
  • デフォルトroleは、button。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkbox、combobox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、separator、slider、switch、tab、treeitemを指定可であるが、これらを指定することは推奨されない。
視覚系ブラウザにおいて期待されるレンダリング
  • ボタンを表示。
  • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合はユーザーエージェントの（地域設定・言語設定に基づく）デフォルトによる（一般的には、「submit」を意味する単語）。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
意味・用法

フォームの送信ボタンを表す。

アクセシビリティ関連
  • 誤ってフォーム送信したら取り返しがつかないような場合は、ユーザーがフォーム送信を続行するか中断するかを選択できる何らかの確認方法をとるべきである（Techniques for WCAG 2.1 : G168, G155, G98）。
私見・補足

value属性値は、フォームの機能にふさわしいものにすべきだろう。

type属性値=image

属性
WAI-ARIA
  • デフォルトroleは、button。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、separator、slider、switch、tab、treeitemを指定可であるが、これらを指定することは推奨されない。
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された画像を表示。この場合は、置換要素となる。
  • height属性値及びwidth属性値をレンダリングのヒントとして用いる。
  • 指定された画像が無効な場合で、alt属性がある場合は、指定された代替テキストをラベルとするボタンを表示。高さは一行分かつ幅は代替テキストを表示するに足る分。この場合は、置換要素となる。
  • 指定された画像が無効な場合で、alt属性がない場合（非準拠）は、ボタンを表示。この場合は、置換要素となる。
意味・用法

フォームの送信ボタンとなるイメージボタンを表す。

送信値は画像のクリック位置のx座標・y座標（x座標は送信用名前文字列「name属性値.x」、y座標は送信用名前文字列「name属性値.y」にセットされてフォーム送信される）。

アクセシビリティ関連
私見・補足

画像であるとともにフォームコントロールでもあるという妙な要素となる。

type属性値=reset

属性
WAI-ARIA
  • デフォルトroleは、button。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkbox、combobox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、separator、slider、switch、tab、treeitemを指定可であるが、これらを指定することは推奨されない。
視覚系ブラウザにおいて期待されるレンダリング
  • ボタンを表示。
  • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合はユーザーエージェントの（地域設定・言語設定に基づく）デフォルトによる（一般的には、「reset」を意味する単語）。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • 制約検証の対象から除外。
意味・用法

フォームのリセットボタンを表す。

アクセシビリティ関連
  • 誤ってリセットしたら多大なやり直しが生じるような場合は、ユーザーがリセットを続行するか中断するかを選択できる何らかの確認方法をとるべきである（Techniques for WCAG 2.1 : G168）。
私見・補足

送信ボタンの近くにリセットボタンがあると誤ってクリックしがちなので、設置する場合は送信ボタンから充分に離すべきだろう。

type属性値=button

属性
WAI-ARIA
  • デフォルトroleは、button。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkbox、combobox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、separator、slider、switch、tab、treeitemを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • ボタンを表示。
  • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合（非準拠）は空文字列。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • 制約検証の対象から除外。
意味・用法

デフォルトの動作を持たない汎用ボタンを表す。

私見・補足

通例としては、クリックイベント等にスクリプトを設定して利用する。

表示確認

現在、Google Chrome 56以上で、すべてのtypeに対応してる模様。

list属性使用時の表示については、datalist要素を参照。

ソース１

  <form action="/cgi_bin/input.cgi">
    <div>typeがhiddenなので見えないよ→<input name="hidden" type="hidden" value="typeがhidden" /></div>
    <div><label>typeがtext→<input name="text" type="text" value="typeがtext" /></label></div>
    <div><label>typeがsearch、required指定→<input name="search" type="search" placeholder="検索キーワード" required="required" /></label></div>
    <div><label>typeがtel→<input name="tel" type="tel" placeholder="090-0000-0000" /></label></div>
    <div><label>typeがurl→<input name="url" type="url" placeholder="http://example.com/" /></label></div>
    <div><label>typeがemail→<input name="email" type="email" placeholder="example@example.jp" /></label></div>
    <div><label>typeがpassword→<input name="password" type="password" value="typeがpassword" /></label></div>
    <div><label>typeがdatetime-local→<input name="datetimelocal" type="datetime-local" step="1" /></label></div>
    <div><label>typeがdate→<input name="date" type="date" /></label></div>
    <div><label>typeがmonth→<input name="month" type="month" /></label></div>
    <div><label>typeがweek→<input name="week" type="week" /></label></div>
    <div><label>typeがtime→<input name="time" type="time" step="1" /></label></div>
    <div><label>typeがcolor→<input name="color" type="color" /></label></div>
    <div><label>typeがnumber→<input name="number" type="number" placeholder="1" max="10" min="1" /></label></div>
    <div><label>typeがrange→<input name="range" type="range" max="10" min="1" /></label></div>
    <div><label>typeがcheckbox→<input name="checkbox" type="checkbox" value="typeがcheckbox" /></label></div>
    <div>typeがradio→<label><input name="radio" type="radio" value="typeがradioその1" checked="checked" />その1</label><label><input name="radio" type="radio" value="typeがradioその2" />その2</label></div>
    <div><label>typeがfile→<input name="file" type="file" /></label></div>
    <div><label>typeがsubmit→<input type="submit" name="submit" /></label></div>
    <div><label>typeがimage→<input type="image" name="image" alt="typeがimage" src="./sample/input-type-image.gif" /></label></div>
    <div><label>typeがimage（画像がない場合）→<input type="image" name="noimage" alt="typeがimage（画像なし）" src="./sample/nai.gif" title="nai.gifは存在しない" /></label></div>
    <div><label>typeがreset→<input type="reset" /></label></div>
    <div><label>typeがbutton（スクリプトで文字色を赤に）→<input type="button" value="typeがbutton" onclick="document.getElementsByTagName('form')[0].style.color='red'" /></label></div>
  </form>
表示結果１
typeがhiddenなので見えないよ→
typeがradio→
ソース２：disabled属性を指定

  <form action="/cgi_bin/input.cgi">
    <div><label>typeがtext→<input disabled="disabled" name="text" type="text" value="typeがtext" /></label></div>
    <div><label>typeがdatetime-local→<input disabled="disabled" name="datetimelocal" type="datetime-local" step="1" value="2018-01-01T12:01:01" /></label></div>
    <div><label>typeがtime→<input disabled="disabled" name="time" type="time" step="1" value="12:01:01" /></label></div>
    <div><label>typeがcolor→<input disabled="disabled" name="color" type="color" /></label></div>
    <div><label>typeがnumber→<input disabled="disabled" name="number" type="number" value="1" max="10" min="1" /></label></div>
    <div><label>typeがrange→<input disabled="disabled" name="range" type="range" max="10" min="1" /></label></div>
    <div><label>typeがcheckbox→<input disabled="disabled" name="checkbox" type="checkbox" value="typeがcheckbox" /></label></div>
    <div>typeがradio→<label><input disabled="disabled" name="radio" type="radio" value="typeがradioその1" checked="checked" />その1</label><label><input disabled="disabled" name="radio" type="radio" value="typeがradioその2" />その2</label></div>
    <div><label>typeがfile→<input disabled="disabled" name="file" type="file" /></label></div>
    <div><label>typeがimage→<input disabled="disabled" type="image" name="image" alt="typeがimage" src="./sample/input-type-image.gif" /></label></div>
    <div><label>typeがreset→<input disabled="disabled" type="reset" /></label></div>
    <div><label>typeがsubmit、disabledは指定してない→<input disabled="disabled" type="submit" name="submit" /></label></div>
  </form>
表示結果２
typeがradio→
ソース３：readonly属性を指定

  <form action="/cgi_bin/input.cgi">
    <div><label>typeがtext→<input readonly="readonly" name="text" type="text" value="typeがtext" /></label></div>
    <div><label>typeがdatetime-local→<input readonly="readonly" name="datetimelocal" type="datetime-local" step="1" value="2018-01-01T12:01:01" /></label></div>
    <div><label>typeがtime→<input readonly="readonly" name="time" type="time" step="1" value="12:01:01" /></label></div>
    <div><label>typeがnumber→<input readonly="readonly" name="number" type="number" value="1" max="10" min="1" /></label></div>
    <div><label>typeがsubmit、readonlyは指定してない→<input type="submit" name="submit" /></label></div>
  </form>
表示結果３