目次に戻る

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

概要

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

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

  • グローバル属性
  • typehiddentextsearchtelurlemailpassworddatetime-localdatemonthweektimenumberrangecolorcheckboxradiofilesubmitimageresetbuttonデフォルトは、text
  • name送信用名前文字列属性値isindexを指定してはならない。
  • value送信値(のデフォルト)を指定する。改行文字を含んではならない。
  • srcイメージボタンの画像を指定するURL
  • altイメージラベルに代わる代替テキストラベルを指定。
  • acceptaudio/*音声ファイル)、video/*動画ファイル)、image/*画像ファイル)、妥当なMIME type、ピリオド付拡張子。カンマ区切りで複数指定可。サーバーが受入れ可能なファイル形式を指定。同じファイル形式について、MIME type拡張子の両方で指定することが推奨される。
  • autocompleteonoffその他デフォルトは、所属フォームの設定値、それがない場合は、on自動補完機能の設定。
  • checkedブーリアン属性チェック状態にするときに指定。
  • 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
    • 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属性を指定すべきである。
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;}

  

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

typeが「hiddenimage」以外の場合は、

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

アクセシビリティ関連

私見・補足

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

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

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

私見・補足

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

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

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

私見・補足

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

type属性値=tel

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

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

私見・補足

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

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

type属性値=url

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

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

私見・補足

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

type属性値=email

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

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

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

私見・補足

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

type属性値=password

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

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

私見・補足

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

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

type属性値=datetime-local

属性
WAI-ARIA
  • roleは指定不可。
  • roletextboxであったとしたら許容される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型)に基づくローカルタイムの時刻を前提とする。

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

私見・補足

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

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

type属性値=date

属性
WAI-ARIA
  • roleは指定不可。
  • roletextboxであったとしたら許容される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は指定不可。
  • roletextboxであったとしたら許容される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は指定不可。
  • roletextboxであったとしたら許容される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は指定不可。
  • roletextboxであったとしたら許容される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型)に基づくタイムゾーン情報を伴わない時刻を前提とする。

私見・補足

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

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

type属性値=number

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

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

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

私見・補足

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

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

type属性値=range

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

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

私見・補足

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

type属性値=color

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

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

私見・補足

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

type属性値=checkbox

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

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

私見・補足

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

type属性値=radio

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

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

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

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

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

私見・補足

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

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

type属性値=file

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

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

私見・補足

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

type属性値=submit

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

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

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

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

type属性値=image

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

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

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

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

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

type属性値=reset

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

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

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

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

type属性値=button

属性
WAI-ARIA
  • デフォルトroleは、buttonデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkboxcomboboxlinkmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • ボタンを表示。
  • inline-size計算値autoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスに入るテキストは、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→
ソース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