HTML辞典 select要素、option要素、optgroup要素、datalist要素の解説

HTML辞典 HTML辞典
この記事は約15分で読めます。

プルダウンメニューを表す<select>タグ、選択肢を表す<option>タグ、選択肢のグループを表す<optgroup>タグ、入力候補を提供する<datalist>タグの使用方法を掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
select要素
  • インタラクティブコンテンツ
  • サブミット可能なフォーム関連要素
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
  • ラベル付け可能なフォーム関連要素
  • リスト可能なフォーム関連要素
0個以上のoption要素またはoptgroup要素
option要素

なし

  • option要素がlabel属性及びvalue属性を持つ場合、空
  • option要素がlabel属性を持つがvalue属性を持たない場合、テキスト
  • option要素がlabel属性を持たない場合、要素内の空白文字ではないテキスト
optgroup要素 なし 0個以上のoption要素
datalist要素
  • フレージングコンテンツ
  • フローコンテンツ
フレージングコンテンツまたは0個以上のoption要素のいずれかを記述

グローバル属性(共通)

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

select要素 書式・概要

インラインレベル要素

<select 属性="属性値">~</select>
<!- メニュー -->
<select name="名前">
    <option value="送信値"></option>
    <option selected></option>
</select>
<!- リストボックス -->
<select size="行数" name="名前" multiple>
    <option value="送信値"></option>
    <option selected></option>
</select>

メニューを表示させるには、select要素とoption要素を使用します。メニュー全体を<select>~</select>で囲って示し、その中に選択肢を表す<option>~</option>を必要な数だけ配置します。

<option>~</option>の間に表示させるテキストを入力します。valueを省略した場合は、テキストが選択された項目として送信されます。

size属性を指定した場合は、リストボックスとして表示されます。表示しきれない場合はスクロールバーが自動的に表示されます。

使用できる属性

autofocus(オート・フォーカス)

【論理属性】

Webページが読み込まれた際に、自動的にボタンにフォーカスが移ります。

<select autofocus>~</select>

disabled(ディスエーブルド)

【論理属性】

ボタンを無効にします。

<select disabled>~</select>

form(フォーム)

任意のform要素に付与したid属性値を指定することで、関連付けを行います。対応ブラウザでは、form要素の外にボタンがあった場合でも、送信が可能です。※以前はJavaScriptで対応して部分になります。

multiple(マルチプル)

【論理属性】

選択肢の複数選択を可能にします。select要素の選択肢やアップロードするファイルを「Ctrl」キーなどを押しながらクリックすることで、負k数の対象を選択可能です。

<select multiple>~</select>

name

データが送信される際のクエリ名を設定します。

required(レクワイアド)

入力コントロールへのデータ入力や選択が必須になります。この属性が指定された入力コントロールに値がない場合、対応するブラウザーではフォームの送信が行われません。

option要素 書式・概要

使用方法

<option 属性="属性値"></option>

option要素はselect要素、datalist要素の選択肢を生成します。

使用できる属性

disabled(ディスエーブルド)

【論理属性】

ボタンを無効にします。

<option disabled>~</option >

label(ラベル)

【必須属性】

選択肢のグループにラベルを指定します。空ではない文字列を指定する必要があります。

<option label="xxxxx">~</option >

selected(セレクテッド)

【論理属性】

初期状態で選択された項目を示す。

<option selected>~</option >

value(バリュー)

【必須属性】

選択肢のグループにラベルを指定します。空ではない文字列を指定する必要があります。

<option value="xxxxx">~</option >

プルダウンメニューのサンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>selectタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <select name="area">
              <option value="">お住まいの都道府県を選択してください。</option>
              <option value="北海道">北海道</option>
              <option value="青森県">青森県</option>
              <option value="秋田県">秋田県</option>
          </select>
      </form>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル select要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル select要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル select要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル select要素のopera実行サンプル

リストメニューのサンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>selectタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <select name="area" size="4">
              <option value="">お住まいの都道府県を選択してください。</option>
              <option value="北海道">北海道</option>
              <option value="青森県">青森県</option>
              <option value="秋田県">秋田県</option>
          </select>
      </form>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル select要素、size属性のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル select要素、size属性のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル select要素、size属性のedge実行サンプル

opera 実行サンプル

基本的なサンプル select要素、size属性のoepra実行サンプル

optgroup要素 書式・概要

<optgroup label="ラベル">~</optgroup>
<option value="送信値"></option>

select要素とoption要素で作成されたプルダウンメニューにおいてメニューの選択肢をグループ化します。optgroup要素のlabel属性の値は、グループのラベル(見出し)としてメニューに表示されるものですので、必ず指定してください。

使用できる属性

disabled(ディスエーブルド)

【論理属性】

ボタンを無効にします。

<optgroup disabled>~</optgroup >

label(ラベル)

【必須属性】

選択肢のグループにラベルを指定します。空ではない文字列を指定する必要があります。

<optgroup label="xxxxx">~</optgroup >

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>selectタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <select name="area">
              <option value="">所属地域を選択してください。</option>
              <optgroup label="東北地方">
                  <option value="青森県">青森県</option>
                  <option value="秋田県">秋田県</option>
              </optgroup>
              <optgroup label="関東地方">
                  <option value="栃木県">栃木県</option>
                  <option value="茨木県">茨木県</option>
              </optgroup>
          </select>
      </form>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル optgroup要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル optgroup要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル optgroup要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル optgroup要素のopera実行サンプル

datalist要素 書式・概要

<datalist 属性="属性値">~</datalist>

datalist要素は閲覧者に入力候補を表示します。入力候補の選択肢はoption要素を使用します。option要素以外のテキストを入力することもできます。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>datalistタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <span>地域を入力してください。</span>
          <input type="text" name="area" list="arealist">
          <datalist id="arealist">
                  <option value="青森県">青森県</option>
                  <option value="秋田県">秋田県</option>
                  <option value="栃木県">栃木県</option>
                  <option value="茨木県">茨木県</option>
          </datalist>
      </form>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル datalist要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル datalist要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル datalist要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル datalist要素のopera実行サンプル

コメント

タイトルとURLをコピーしました