プルダウンメニューの作成。

初めに!

  • 学習した内容をアウトプットして学習効率の向上に努めます。

  • 初学者にもわかりやすく説明していきます。

完成図

コード

<dl>
    <dt><label for="area"></label>お住まい</dt>
    <dd><select name="area" >
      <option value="" selected>選択してください</option>
      <option value="niigata">新潟</option>
      <option value="toyama">富山</option>
      <option value="ishikawa">石川</option>
    </select></dd>
  </dl>

コードの説明

  • 説明リストをしようして記述する。

  • dt要素内にはlabel要素と内容である"お住まい”と記述。

  • dd要素内にはselect要素とoption要素を挿入する。またselect要素の中にoption要素を挿入する。

<select name="area" >
      <option value="" selected>選択してください</option>
      <option value="niigata">新潟</option>
      <option value="toyama">富山</option>
      <option value="ishikawa">石川</option>
    </select>

  • labelタグのfor=""には"area"と記述。

  • selectタグのname属性には"area"を記述。

  • 一番上のoptionタグのvalue属性には空欄を、selectedを記述。selectedを記述されたoptionはデフォルトで初期値として表示される。

  • 他のvalueには選択肢の名前をローマ字入力する。

まとめ

  • プルダウンメニューはselectタグにoptionタグを挿入することで作成できる。

  • 表示したい内容が書いてあるoptionタグ内にselectedを記述することで初期値としてデフォルト表示できる。