20230322

HTML5の属性とinput要素について

HTML5には数十～100近い数の属性が定義されている。

各属性は「指定の対象となる要素」ごとに「値の意味」「指定可能な値」がそれぞれ異なる。

すべての要素を対象として指定できる属性をグローバル属性と呼ぶ。グローバル属性は、以下の15種類が定義されている。

1. class
2. id
3. lang
4. title
5. style
6. dir
7. tabindex
8. accesskey
9. hidden
10. translate
11. spellcheck
12. contenteditable
13. contextmenu
14. draggable
15. dropzone

なお、同じ名称の属性でもグローバル属性の場合とそうでない場合がある。

例えば、title属性はグローバル属性であってもなくても(つまり「指定の対象となる要素」を問わず)「指定可能な値」がテキストである点は変わりはない。

しかし、title属性の「値の意味」は「指定の対象となる要素」によって異なる。

• もし、「指定の対象となる要素」が「すべての要素」(つまりグローバル属性)の場合は「補足情報」を意味する。
• もし、「指定の対象となる要素」が「abbr、dfn」の場合は「略語の略していない状態の言葉」を意味する。
• もし、「指定の対象となる要素」が「input」の場合は「(pattern属性とともに使用した場合)パターンに関する説明」を意味する。

さらに、同じ名称の属性であって、グローバル属性でない場合でも、「指定の対象となる要素」ごとに「値の意味」「指定可能な値」がそれぞれ異なる場合がある。

例えば、type属性やvalue属性がその例である。

type属性の場合、以下のように7通りになる。

• もし、「指定の対象となる要素」が「a、area、link」の場合は「リンク先のMIMEタイプ」を意味する。「指定可能な値」は「MIMEタイプ」となる。
• もし、「指定の対象となる要素」が「button」の場合は「ボタンの種類」を意味する。「指定可能な値」は「type="submit"またはtype="rest"またはtype="button"」となる。
• もし、「指定の対象となる要素」が「embed、object、script、source、style」の場合は「組み込むデータの種類」を意味する。「指定可能な値」は「MIMEタイプ」となる。
• もし、「指定の対象となる要素」が「input」の場合は「フォーム部品の種類」を意味する。「指定可能な値」は「フォーム部品の種類((おそらく)22種類)をあらわすキーワード(text,password,search,email,url,tel,number,range,checkbox,radio,submit,reset,button,image,file,color,date,month,week,time,datetime-local,hiddenの(おそらく)22種類のうちのいずれか)」となる。
• もし、「指定の対象となる要素」が「menu」の場合は「メニューの種類」を意味する。「指定可能な値」は「type="context"」となる。
• もし、「指定の対象となる要素」が「menuitem」の場合は「メニュー内の項目の種類」を意味する。「指定可能な値」は「type="command"またはtype="checkbox"またはtype="radio"」となる。
• もし、「指定の対象となる要素」が「ol」の場合は「マーカー(行頭の数字)の種類」を意味する。「指定可能な値」は「type="1"またはtype="a"またはtype="A"またはtype="ⅰ"またはtype="Ⅰ"」となる。

なお、input要素は、type属性で指定したキーワードによってさまざまな種類の入力・選択用部品となる要素である。

(上述のtype属性の説明で、【もし、「指定の対象となる要素」が「input」の場合は「フォーム部品の種類」を意味する】と記述したことと一体の説明)

HTML5のinput要素に指定できる属性は約30定義されている。type、accept、autocomplete、form、width、height、name、pattern、placeholder、valueなどである。