select要素

2024 5/24

2023.10.28 2024.05.24

記事の内容

概要

select要素は、フォーム要素の内でドロップダウンリストを作成するために使用される要素です。

select要素

記法

<form action=”送信先URL” method=”送信方式”>
　<select name=”送信クエリ名”>
　　<option value=”送信クエリ値”>表示文字</option>
　</select>
　<button type=”submit”>ボタンラベル名</button>
</form>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age">
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

属性

autocomplete

autocompleteは、フォームなどの入力欄へ入力するときに過去に入力したことのある文言やブラウザに登録してある情報を入力候補として表示するブラウザの機能になります。

autocomplete属性

記法

<select name=”送信クエリ名” autocomplete=”ON or OFF”>
　<option value=”送信クエリ値”>表示文字</option>
</select>
・ON:オートコンプリートを行いませす
・OFF:オートコンプリートを行いません

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(autocomplete属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age" autocomplete="ON">
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <select name="job" autocomplete="OFF">
          <option value="">選択してください</option>
          <option value="公務員">公務員</option>
          <option value="経営者・役員">経営者・役員</option>
          <option value="会社員">会社員</option>
          <option value="自営業">自営業</option>
          <option value="専業主婦">専業主婦</option>
          <option value="パート・アルバイト">パート・アルバイト</option>
          <option value="学生">学生</option>
          <option value="その他">その他</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

disabled

disabled属性は、プルダウンメニューの選択を無効にします。

disabled属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(disabled属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age" disabled>
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

required

required属性は、プルダウンメニューの選択を必須項目にします。

required属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(required属性)に関して</title>
  </head>
  <body>
    <p>選択なしで送信ボタンを押してください。</p>
    <form action="URL" method="post">
      <select name="age" required>
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

選択なしで送信ボタンを押してください。

multiple

multiple属性は、ドラックやCtrlキーを押しながら複数の選択が可能になる属性になります。
※カンマ区切りでクエリ値を取得

multiple属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(multiple属性)に関して</title>
  </head>
  <body>
    <p>ドラックやCtrlキーを押しながら選択してください。</p>
    <form action="URL" method="post">
      <select name="age" multiple>
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

ドラックやCtrlキーを押しながら選択してください。

size

size属性は、リストメニューの縦表示の数を指定できます。

size属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(size属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age" size="2">
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3">30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <select name="job" size="4">
        <option value="">選択してください</option>
        <option value="公務員">公務員</option>
        <option value="経営者・役員">経営者・役員</option>
        <option value="会社員">会社員</option>
        <option value="自営業">自営業</option>
        <option value="専業主婦">専業主婦</option>
        <option value="パート・アルバイト">パート・アルバイト</option>
        <option value="学生">学生</option>
        <option value="その他">その他</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

selected

selected属性は、初期状態で選択されている項目を指定する属性になります。

selected属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(selected属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age">
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2">20代</option>
        <option value="3" selected>30代</option>
        <option value="4">40代</option>
        <option value="5">50代</option>
        <option value="6">60代</option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果

label

label属性は、option要素内のテキストよりも優先されます。

label属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select要素(label属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <select name="age">
        <option value="">選択してください</option>
        <option value="1">10代</option>
        <option value="2" label="20〜29歳">20代</option>
        <option value="3" label="30〜39歳"></option>
      </select>
      <button type="submit">送信</button>
    </form>
  </body>
</html>

出力結果