目次に戻る

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

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル
属性

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

  • グローバル属性
  • typehiddentextsearchtelurlemailpassworddatetime-localdatemonthweektimenumberrangecolorcheckboxradiofilesubmitimageresetbuttonデフォルトは、text
  • name送信用名前文字列属性値isindexを指定してはならない。
  • value送信値(のデフォルト)を指定する。入力コントロールが一行形式なので、属性値は、改行なしで記載する。
  • srcイメージボタンの画像を指定するURL
  • altイメージラベルに代わる代替テキストラベルを指定。
  • acceptaudio/*音声ファイル)、video/*動画ファイル)、image/*画像ファイル)、妥当なMIME type、ピリオド付拡張子。カンマ区切りで複数指定可。サーバーが受入れ可能なファイル形式を指定。同じファイル形式について、MIME type拡張子の両方で指定することが推奨される。
  • autocompleteonoffその他デフォルトは、関連付けられているform要素の設定値、それがない場合は、onオートコンプリート機能の設定。
  • checkedブーリアン属性チェック状態にするときに指定。
  • dirname送信値書字方向値をフォーム送信するときにセットとなる送信用名前文字列
  • disabledブーリアン属性。指定されたフォームコントロールは無効となる(操作・入力できなくなり、送信値フォーム送信されない)。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
  • formactionフォーム送信先のURLを指定。form要素の指定より優先される。
  • formenctype→値は下記のとおり。フォームのデータ形式を指定。form要素の指定より優先される。
    • application/x-www-form-urlencoded→すべての文字をURLエンコード形式でフォーム送信
    • multipart/form-dataバイナリーデータ形式でフォーム送信ファイルの場合はこれを指定する)。
    • text/plainプレーンテキスト形式でフォーム送信
  • formmethodフォーム送信形式を指定。form要素の指定より優先される。
    • getURLの一部としてフォーム送信URL末尾に、「?」の後に、「&」区切りで、「送信用名前文字列=送信値」を列挙)。
    • postHTTP通信の本体データとしてフォーム送信
    • dialog→直近の祖先dialog要素の返し値にセットして、ダイアログボックスを閉じる。
  • formnovalidateブーリアン属性フォーム送信時の制約検証をしない場合に指定する。form要素の指定より優先される。
  • formtarget→値は下記のとおり。フォーム送信の結果を表示する場所を指定する場合に指定する。form要素の指定より優先される。
    • _blank別ウィンドウ又は別タブ
    • _top入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先閲覧文脈
    • _parent入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈閲覧文脈
    • _self→当該要素が現在属している閲覧文脈
    • その他妥当な閲覧文脈名→「_」(アンダースコア)で始まらない一文字以上の文字列。当該要素が現在属している入れ子閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ(もしくは別タブ)に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • list→同一HTML文書内にあるdatalist要素id属性値サジェストリストを指定する。
  • max入力値の最大値を指定。
  • min入力値の最小値を指定。
  • maxlength入力値の最大データ容量を、非負整数の文字数で指定。
  • minlength入力値の最小データ容量を、非負整数の文字数で指定。
  • multipleブーリアン属性。指定された場合は、複数の値を入力できる。
  • pattern入力値制約条件ジャバスクリプト正規表現で指定。全部一致で判定される。
  • placeholder→当該入力コントロール入力値のヒントとなるテキスト。これはラベルの代わりに用いられるべきものではない。
  • readonlyブーリアン属性。指定されれば、当該フォームコントロールは操作・入力はできなくなるが、送信値フォーム送信される。この状態は、スクリプトを用いないと解除できない。
  • requiredブーリアン属性。その項目の入力が必須の場合に指定。
  • size→0を除く非負整数入力時にユーザーに見せる文字数(基本的に半角英数換算の文字数)を指定する。これを超えると入力値の最初の方が見えなくなる。デフォルトは、20
  • step→0より大きい浮動小数点数か、any(指定なし)のいずれか。入力可能な数値の最小単位を指定する。デフォルトtypeによって異なる。
  • widthpx単位の幅を指定する非負整数。単位はつけない。イメージボタンの幅を指定。
  • heightpx単位の高さを指定する非負整数。単位はつけない。イメージボタンの高さを指定。
  • maxminvalueの各属性属性値を指定する場合においては、指定されているtypeにそれに対応する制約検証がある場合は、原則としてその条件に一致する値でなければならない。ただし、datetime-localでは日付と時刻の区切り文字として「T」のほか半角スペースも可であり、colorの場合は英文字が大文字でも可である(とはいうものの、ブラウザの実装はあやしいので、条件に厳密に従った方が無難)。
  • 周期的な値でない限り、max属性値は、min属性値より小さくてはならない。
  • minlength属性値は、maxlength属性値以下でなければならない。
  • pattern属性がある場合は、title属性値は、当該pattern属性が指定する検証パターンを説明する記述を値としなければならない。
  • pattern属性がある場合は、指定する検証パターンを説明するtitle属性を指定すべきである。
  • W3C : HTML5.3pattern属性がある場合は、指定する検証パターンを説明すべきであり、そのためにtitle属性を指定することができるとされていた(title属性の使用は、説明するためのいくつかの方法のうちの一つにすぎない)。
  • W3C : HTML5.3name属性値isindexを指定してはならないとはされてなかった。
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい(/>)。
WAI-ARIA
視覚系ブラウザデフォルトとして期待されるCSS

  input {
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: initial;
  }

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

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

  input:is([type=button i],[type=reset i],[type=submit i],[type=color i]) {
    display: inline-block;
  }

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

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

  input[dir=auto i]:is([type=text i],[type=search i],[type=tel i],[type=url i],[type=email i]) {
    unicode-bidi: plaintext;
  }
  /* [type=text i]は、typeデフォルトtextの場合も含む。 */
  
制約検証
  • typeが「hiddenresetbutton」以外なら、原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
  • readonly属性があれば、制約検証の対象から除外。
  • required属性があれば、必須の入力がなされてるかどうかチェック。
  • pattern属性があれば、入力値が指定されたパターンに合致するかどうかチェック。合致しない場合は、ユーザーエージェントは、検証パターンを説明するものとして、title属性値を提示してもよい。
  • minlength属性があれば、入力値のデータ量が指定値を下回ってないかどうかチェック。
  • maxlength属性があれば、入力値のデータ量が指定値をオーバーしてないかどうかチェック。
  • min属性があれば、入力値が指定値を下回ってないかどうかチェック。
  • max属性があれば、入力値が指定値を上回ってないかどうかチェック。
  • step属性があれば、入力値が指定値によるルールに合致するかどうかチェック。合致しない場合においては、ユーザーエージェントは、入力値を近似の妥当値に変更してもよい。
  • multiple属性がなければ、複数の値が入力されてないかどうかチェック。
ユーザーエージェントに対する特記事項
  • pattern属性制約検証に抵触した場合でなくても、検証パターンを説明するものとして、title属性値を提示してもよい。
  • 当該入力コントロールフォーカスが当たってなくて、かつ、当該入力コントロール送信値の場合は、placeholder属性値を提示すべきである。この扱いにおいては、autofocus属性フォーカスが当たってしまった場合も、フォーカスが当たってないものとみなす。
  • ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。
  • W3C : HTML5.3autocomplete属性に基づいてオートコンプリート機能を動作させる前に、当該入力コントロールが表示領域内に表示されていることを確認すべきであるとされていた。
HTML extension

HTML Form HTTP Extensionsでは、name属性値が下記に指定されたときは、下記のような特別な扱い。

  • isindextypetextで、当該入力コントロールフォームの最初のフォームコントロールで、フォーム送信データ形式がapplication/x-www-form-urlencodedの場合は、送信値は当該入力コントロール送信値のみとなる。HTML Living Standardでは、この属性値は許容されない。
  • _charset_HTML Living Standardの規定と重複。hiddenを参照。
  • _username_typetext又はemailで、ユーザーエージェントがこの値をサポートしており、フォームAuthorizationリクエストヘッダが含まれてない場合は、HTTP認証名前付きパラメータとして使用される。
  • _password_typepasswordで、ユーザーエージェントがこの値をサポートしており、フォームAuthorizationリクエストヘッダが含まれてない場合は、HTTP認証名前付きパラメータとして使用される。
  • _logout_typehiddenで、フォーム送信に成功した場合は、ユーザー認証情報がクリアされる。value属性は省略されなければならない。

formmethod属性値に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • connectconnectメソッドフォーム送信
  • tracetraceメソッドフォーム送信
  • tracktrackメソッドフォーム送信

属性に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • payload→値は下記のとおり。フォーム及び送信ボタンによる指定を無視して、当該要素送信値フォーム送信形式を指定する。
    • _actionURLの一部としてフォーム送信
    • _headerHTTP通信のヘッダデータとしてフォーム送信
    • _bodyHTTP通信の本体データとしてフォーム送信

属性に下記を追加。詳細は、HTML Media Captureを参照。

  • capture→値は下記のとおり。メディアキャプチャメカニズムに使うデバイスの向きを指定する(フォーム送信する画像・動画等データを撮影しているカメラ等が、ユーザーに向いているカメラ等であるのか、ユーザー以外の周辺に向いているカメラ等であるのか。なお、このカメラ等はユーザーエージェントに内臓又は接続している)。デフォルトは、ユーザーエージェントによる。typefileで、accept属性が指定されている場合にのみ、指定可能。
    • user→ユーザー向き。
    • environment→周辺向き。

W3C : HTML5.3capture属性は、HTML仕様本体にも規定。

アクセシビリティ関連

私見・補足

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

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

type別詳細

type属性値=hidden

属性

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

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

W3C : HTML5.3autocomplete属性値として、on及びoffの指定は禁止されてはいなかった(指定しても無意味ではあったが)。

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

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

私見・補足

表示されない。

type属性値=textデフォルト値

属性
WAI-ARIA
  • list属性がない場合は、
    • デフォルトroleは、textboxデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、comboboxsearchboxspinbuttonを指定可。
  • list属性がある場合は、
    • デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • size属性がある場合は、表示幅のヒントとして用いる。
意味・用法

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

私見・補足

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

属性
WAI-ARIA
  • list属性がない場合は、デフォルトroleは、searchboxデフォルトroleは、role属性値に指定すべきでない。
  • list属性がある場合は、デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • size属性がある場合は、表示幅のヒントとして用いる。
意味・用法

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

私見・補足

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

旧式ブラウザは未対応だけど、未対応だからといって支障はないだろう。

type属性値=tel

属性
WAI-ARIA
  • list属性がない場合は、デフォルトroleは、textboxデフォルトroleは、role属性値に指定すべきでない。
  • list属性がある場合は、デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • size属性がある場合は、表示幅のヒントとして用いる。
意味・用法

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

私見・補足

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

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

旧式ブラウザは未対応だけど、未対応だからといって大して支障はないだろう。

type属性値=url

属性
WAI-ARIA
  • list属性がない場合は、デフォルトroleは、textboxデフォルトroleは、role属性値に指定すべきでない。
  • list属性がある場合は、デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • size属性がある場合は、表示幅のヒントとして用いる。
制約検証
  • 入力値が妥当な絶対URLかどうかチェック。絶対URLの前後に半角スペースなどがある場合は、自動的に消去する。
意味・用法

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

私見・補足

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

旧式ブラウザは未対応。

type属性値=email

属性
WAI-ARIA
  • list属性がない場合は、デフォルトroleは、textboxデフォルトroleは、role属性値に指定すべきでない。
  • list属性がある場合は、デフォルトroleは、comboboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • list属性がある場合は、入力動作時に選択肢が表示される。
  • size属性がある場合は、表示幅のヒントとして用いる。
制約検証
  • 入力値が妥当なメールアドレスかどうかチェック。メールアドレスの前後に半角スペースなどがある場合は、自動的に消去する。
意味・用法

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

複数のメールアドレスが入れられる場合は、カンマ区切りで指定する。

私見・補足

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

旧式ブラウザは未対応。

type属性値=password

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 一行プレーンテキスト入力コントロールを、inline-blockボックスで表示。
  • line-heightの計算値が1.0未満の場合は、表示は1.0に強制される。
  • size属性がある場合は、表示幅のヒントとして用いる。
  • 入力された文字列は覆い隠されて表示される。
ユーザーエージェントに対する特記事項
  • ユーザー以外が入力値を見ることができないように、入力値を覆い隠すべきである。
意味・用法

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

私見・補足

最近は、ユーザーの操作でパスワードを一時的に見えるようにする機能をスクリプト等で用意するウェブページも見受けられる。

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

type属性値=datetime-local

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • ローカルタイム年月日時刻入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分かつ幅は必要な分にて表示。
制約検証
  • 入力値が妥当な年月日時刻(「yyyy-mm-ddThh:mm:ss」書式。年部分は4桁以上で1以上。秒部分は2桁で、小数点以下も3桁まで可。その他は2桁。「T」は大文字。なお、秒部分はなくてもよい。例:0001-01-01T00:00:00)かどうかチェック。年月日と時刻の区切り文字が半角スペースである場合は、大文字の「T」に自動的に変換する。

W3C : HTML5.3:年は、4桁に限定されていた。

ユーザーエージェントに対する特記事項
  • 入力コントロールユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例:日本人が対象の日本語のブラウザで、「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型)に基づくローカルタイムの時刻を前提とする。

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

W3C : HTML5.3:年は、4桁に限定されていた。

私見・補足

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

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

旧式ブラウザは未対応。

type属性値=date

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 年月日入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分かつ幅は必要な分にて表示。
制約検証
  • 入力値が妥当な年月日(「yyyy-mm-dd」書式。年部分は4桁以上で1以上。その他は2桁。例:0001-01-01)かどうかチェック。

W3C : HTML5.3:年は、4桁に限定されていた。

ユーザーエージェントに対する特記事項
  • 入力コントロールユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例:日本人が対象の日本語のブラウザで、「2018年7月1日」と表示されていても、送信値は「2018-07-01」である。
  • グレゴリオ暦導入前の年月日の入力において、ユリウス暦に基づく入力先発グレゴリオ暦に変換する機能をサポートする義務はない(ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる)。
意味・用法

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

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

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

W3C : HTML5.3:年は、4桁に限定されていた。

私見・補足

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

旧式ブラウザは未対応。

type属性値=month

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 年月入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分かつ幅は必要な分にて表示。
制約検証
  • 入力値が妥当な年月(「yyyy-mm」書式。年部分は4桁以上で1以上。月部分は2桁。例:0001-01)かどうかチェック。

W3C : HTML5.3:年は、4桁に限定されていた。

ユーザーエージェントに対する特記事項
  • 入力コントロールユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例:日本人が対象の日本語のブラウザで、「2018年7月」と表示されていても、送信値は「2018-07」である。
  • グレゴリオ暦導入前の年月の入力において、ユリウス暦に基づく入力先発グレゴリオ暦に変換する機能をサポートする義務はない(ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる)。
意味・用法

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

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

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

W3C : HTML5.3:年は、4桁に限定されていた。

私見・補足

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

旧式ブラウザは未対応。

type属性値=week

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 週入力コントロールを、inline-blockボックスで表示。
  • 高さは一行分かつ幅は必要な分にて表示。
制約検証
  • 入力値が妥当な週指定(「yyyy-Www」書式。年部分は4桁以上で1以上。週部分は2桁。「W」は大文字。例:0001-W01)かどうかチェック。

W3C : HTML5.3:年は、4桁に限定されていた。

ユーザーエージェントに対する特記事項
  • 入力コントロールユーザーインターフェースにおいて、送信値に要求される形式とユーザーに対する表示形式は無関係である。表示形式は、ブラウザ等の設定でセットされている「地域」又は「使用言語」の慣例に従うことが推奨される。例:日本人が対象の日本語のブラウザで、「2018年第1週」と表示されていても、送信値は「2018-W01」である。
  • グレゴリオ暦導入前の週の入力において、ユリウス暦に基づく入力先発グレゴリオ暦に変換する機能をサポートする義務はない(ユーザーは、先発グレゴリオ暦に基づく入力を要求されることとなる)。
意味・用法

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

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

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

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

W3C : HTML5.3:年は、4桁に限定されていた。

私見・補足

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

旧式ブラウザは未対応。

type属性値=time

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 時刻入力コントロールを、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型)に基づくタイムゾーン情報を伴わない時刻を前提とする。

私見・補足

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

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

旧式ブラウザは未対応。

type属性値=number

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

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

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

私見・補足

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

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

旧式ブラウザは未対応。

type属性値=range

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

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

私見・補足

入力補助としてスライダーが表示されることが期待されるかもしれない。

旧式ブラウザは未対応。

type属性値=color

属性
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、{inline-size: fit-content}
  • ボタン内部の匿名ボタン内容ボックスには、何も入らない。
  • 匿名ボタン内容ボックスの背景色は、当該要素送信値をヒントとして決定。
  • ボタンの動作時には、色が選択可能なカラーピッカーを表示。
  • list属性がある場合は、候補となる色はカラーピッカーに表示される。
制約検証
  • 入力値が妥当な色指定(頭に「#」をつけた16進数RGB方式カラーコード。英文字は小文字。例:#09afc5)かどうかチェック。英文字が大文字の場合は、自動的に小文字に変換する。
意味・用法

頭に「#」をつけた16進数RGB方式カラーコード(英文字は小文字。例:#09afc5)による色入力コントロールを表す。

私見・補足

入力補助としてカラーピッカーなどが表示されることが期待されるかもしれない。

旧式ブラウザは未対応。

type属性値=checkbox

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

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

私見・補足

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

type属性値=radio

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

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

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

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

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

私見・補足

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

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

type属性値=file

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

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

私見・補足

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

type属性値=submit

属性
WAI-ARIA
  • デフォルトroleは、buttonデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、{inline-size: fit-content}
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合はユーザーエージェントの(地域設定・言語設定に基づく)デフォルトによる(一般的には、「submit」を意味する単語)。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
意味・用法

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

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

formactionformenctypeformmethodformnovalidateformtargetの各属性は、旧式ブラウザは未対応なので、注意すること。

type属性値=image

属性
WAI-ARIA
  • デフォルトroleは、buttonデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、linkmenuitemmenuitemcheckboxmenuitemradioradioswitchを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された画像を表示。
  • height属性値及びwidth属性値レンダリングのヒントとして用いる。
  • 指定された画像が無効な場合で、alt属性がある場合は、指定された代替テキストラベルとするボタンを表示。高さは一行分かつ幅は代替テキストを表示するに足る分。
  • 指定された画像が無効な場合で、alt属性がない場合は、ボタンを表示。
意味・用法

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

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

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

formactionformenctypeformmethodformnovalidateformtargetの各属性は、旧式ブラウザは未対応なので、注意すること。

type属性値=reset

属性
WAI-ARIA
  • デフォルトroleは、buttonデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、{inline-size: fit-content}
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合はユーザーエージェントの(地域設定・言語設定に基づく)デフォルトによる(一般的には、「reset」を意味する単語)。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • 制約検証の対象から除外。
意味・用法

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

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

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

type属性値=button

属性
WAI-ARIA
  • デフォルトroleは、buttonデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、linkmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、{inline-size: fit-content}
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、value属性値がある場合はその値、ない場合は空文字列
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • 制約検証の対象から除外。
意味・用法

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

私見・補足

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

表示確認

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

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

ソース1

  <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>
  
表示結果1
typeがhiddenなので見えないよ→
typeがradio→

type属性値ブラウザの未対応値が指定された場合は、通常はtextと同等のレンダリングになる。

IE6表示のスクリーンショット
IE6表示:typeのsearchからrangeまで未対応。対応してないtypeのレンダリングがtype=textと同じ。placeholderが表示されてない。

IE7からIE9も同様。

IE11表示のスクリーンショット
IE11表示:typeのdatetime-localからcolorまで未対応。対応してないtypeのレンダリングがtype=textと同じ。placeholderは表示されている。

IE10も同様。

ソース2: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>
  
表示結果2
typeがradio→
ソース3: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>
  
表示結果3