SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのoptionタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:03動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03HTMLタグ編の四十三本目は、オプションタグです。
  4. 0:06オプションは、ドロップダウンのリストに並ぶ、一つ一つの選択肢を作るためのタグです。
  5. 0:12たとえば講座を選ぶ欄で、エイチティーエムエル入門、シーエスエス入門と並んでいる項目、
  6. 0:16あれが一つずつオプションで作られています。
  7. 0:20大きな特徴は、画面に表示する名前と、フォームで実際に送信する値を別々にできることです。
  8. 0:26今回は基本の書き方から、値、初期選択、無効化といった専用属性まで、順に確認していきます。
  9. 0:31身近なフォームを思い浮かべながら聞いてみてください。
  10. 0:35どんな場面で使うのかを整理します。
  11. 0:37代表例は、申し込みフォームで都道府県を選ぶ、講座やプランを選ぶ、といったドロップダウンです。
  12. 0:44利用者に文章を自由に打たせるのではなく、あらかじめ用意した候補の中から選んでもらうことで、
  13. 0:49表記のばらつきや入力ミスを防げます。
  14. 0:53ここで役割を分けて考えてください。
  15. 0:56選ぶ欄全体の入れ物がセレクトタグで、その中身の一つ一つの候補がオプションタグです。
  16. 1:02候補を増やしたいときは、オプションを一行追加するだけです。
  17. 1:06まずはこの親と子の関係を押さえておきましょう。
  18. 1:10選ぶ操作は、入力する操作よりもずっと手軽で、利用者の負担も小さくなります。
  19. 1:15基本の書き方を確認します。
  20. 1:17オプションの開始タグと終了タグで、表示したい名前を囲みます。
  21. 1:22この教材では、終了タグを省略せず、はっきり書くことにします。
  22. 1:26大切なのは配置です。
  23. 1:27オプションは単独では使えず、必ずセレクトタグなどの親要素の中に置きます。
  24. 1:33画面の例では、セレクトの中に二つのオプションを並べているので、ブラウザーでは二つの候補を持つドロップダウンとして表示されます。
  25. 1:42逆に、セレクトの外にオプションだけを置いても、選択肢としては機能しません。
  26. 1:47親の中に子を並べる、この構造が基本です。
  27. 1:50書き方自体はとても短いので、まずはこの形を手で打って覚えてしまいましょう。
  28. 1:56記事の活用例を、自分の言葉でたどってみましょう。
  29. 2:00講座を選ぶセレクトボックスです。
  30. 2:02セレクトには、アリアラベルで講座という説明を付け、この欄が何を選ぶ場所なのかを伝えています。
  31. 2:10中には二つのオプションが入り、最初のエイチティーエムエル入門には、バリューとセレクテッドが付いています。
  32. 2:18つまり、最初からこれが選ばれた状態で表示され、送信されるときは入門という長い名前ではなく、
  33. 2:24エイチティーエムエルという短い値が送られます。
  34. 2:29表示と送信を分ける実例として、次のセクションから属性を一つずつ見ていきます。
  35. 2:35小さな例ですが、属性の働きがすべて詰まった、実務でもよく見る形です。
  36. 2:41中心となるバリュー属性を解説します。
  37. 2:44バリューは、その選択肢が選ばれたときにフォームで送信される値です。
  38. 2:49画面の例では、利用者の目にはエイチティーエムエル入門と見えますが、プログラムが受け取るのはエイチティーエムエルという短い文字列です。
  39. 2:58人にとって分かりやすい表示と、処理しやすい値を分けられるのが利点です。
  40. 3:04なお、バリューを省略した場合は、タグの中に書いた表示文字そのものが値として使われます。
  41. 3:10省略できるからといって任せきりにせず、受け取る側で扱いやすい値を意識して指定するのがおすすめです。
  42. 3:17この分離があるおかげで、表示名をあとから自由に直せるのも実務上の利点です。
  43. 3:23セレクテッド属性は、その選択肢を最初から選ばれた状態にするためのものです。
  44. 3:29これは真偽属性と呼ばれるタイプで、属性を書いてあるかどうかだけで決まります。
  45. 3:34よく選ばれる項目や、前回の条件などを初期値にしたいときに使います。
  46. 3:39注意点が二つあります。
  47. 3:41一つ目は、単一選択のセレクトでは、複数のオプションにセレクテッドを付けないことです。
  48. 3:48初期選択は原則一つに絞ります。
  49. 3:50二つ目は、セレクテッドが決めるのはページを開いた直後の状態だということです。
  50. 3:56利用者が選んだあとの現在の値は、ジャバスクリプトでは親のセレクトのバリューなどから調べます。
  51. 4:03初期値が適切だと、利用者は何も選ばずにそのまま送信することもできます。
  52. 4:08ディセーブルド属性は、その選択肢を選べなくするためのものです。
  53. 4:13たとえば募集が終わった講座や、準備中のコースなど、存在は知らせたいけれど今は選ばせたくない項目に使います。
  54. 4:20無効にした項目は、選べないだけでなく、フォームの送信対象にもなりません。
  55. 4:26ここでも真偽属性の落とし穴に注意してください。
  56. 4:29ディセーブルド、イコール、フォルスと書いても無効化は解除されません。
  57. 4:34属性が付いている時点で有効とみなされるためです。
  58. 4:37選び直せるようにしたいときは、値を書き換えるのではなく、属性そのものを取り除いてください。
  59. 4:44選べない理由が伝わるよう、準備中などの補足を文字に含めておくと親切です。
  60. 4:49ラベル属性は、選択肢の表示名を短くしたいときに使う属性です。
  61. 4:54タグの中には詳しい名前を書いておき、ラベル属性に短い名前を指定すると、ブラウザーによっては一覧でその短い名前のほうが優先して表示されます。
  62. 5:04ただし、表示の扱いはブラウザーごとに差があるため、ラベルに頼らなければ意味が伝わらない書き方は避け、
  63. 5:10中の文章だけでも内容が分かるようにしておくのが安全です。
  64. 5:16もう一つ混同注意です。
  65. 5:18このラベル属性は、入力欄に説明を付けるラベル要素とはまったくの別物です。
  66. 5:23名前が同じでも、役割を取り違えないようにしましょう。
  67. 5:27共通属性のアイディーやクラスも併用でき、スタイル調整にも利用できます。
  68. 5:32オプションが登場する親は、セレクトだけではありません。
  69. 5:38選択肢が多いときは、オプトグループタグで意味の近いオプションをグループにまとめ、
  70. 5:44見出しを付けて探しやすくできます。
  71. 5:50画面の例では、ウェブ制作というグループの中にエイチティーエムエル入門を入れています。
  72. 5:59もう一つの親がデータリストです。
  73. 6:03こちらではオプションが、文字入力欄に対する入力候補として使われ、候補以外の文字を打つことも禁止されません。
  74. 6:14同じオプションでも、親がセレクトなら選ぶ項目、データリストなら候補の提示と、
  75. 6:20役割が少し変わる点を覚えておいてください。
  76. 6:27候補が増えてきたら、構造を工夫するだけで使い勝手は大きく変わります。
  77. 6:34ブラウザー互換性を確認します。
  78. 6:36記事が参照するエムディーエヌの記録では、オプションタグはクロームが一以降、
  79. 6:42エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
  80. 6:47今回扱ったバリュー、セレクテッド、ディセーブルド、ラベルといった属性についても、
  81. 6:51同じく最初期からの対応が記録されています。
  82. 6:56ウェブのごく初期からある要素なので、対応を理由に使用をためらう場面はまずありません。
  83. 7:01ただし、ラベル属性の表示のされ方のように細部にはブラウザー差があるため、
  84. 7:06実際の表示は手元の環境でも一度確認しておくと安心です。
  85. 7:10スマートフォンでのプルダウン表示も含めて、公開前に確認しておきましょう。
  86. 7:15最後にまとめです。
  87. 7:17オプションタグは、セレクトなどの親の中に置く、一つ一つの選択肢でした。
  88. 7:22ポイントは三つです。
  89. 7:23一つ目、入れ物がセレクト、候補がオプションという親子の構造を守ること。
  90. 7:29二つ目、バリュー属性で、利用者に見せる名前と送信する値を分けられること。
  91. 7:34三つ目、セレクテッドで初期選択を決め、ディセーブルドで選べなくし、ラベルで短い表示名を補えることです。
  92. 7:42練習として、好きな講座を三つ並べ、一つにセレクテッド、一つにディセーブルドを付けたドロップダウンを作ってみてください。
  93. 7:51表示と送信の違いが見えれば、理解は十分です。
  94. 7:55まずは小さなセレクトボックスから、自分の手で試してみてくださいね。
  95. 8:00お疲れさまでした。
  96. 8:01次回もお楽しみに。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

optionタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。選択肢。表示名と送信する value を分けられます。

解説記事・サンプルコードを読む：HTMLのoptionタグとは？属性・使い方・ブラウザー互換性と活用例 →