HTMLでプルダウンメニューの作成の仕方:お問い合わせなどに使用

Programming

今回はHHTMLでお問い合わせフォームなどに良くある、都道府県など複数の項目の中から1つを選択するプルダウンメニュー(ドロップダウンメニュー)の作成の仕方を紹介します。

HTMLでプルダウンメニューの作成の仕方

ここで言う「プルダウンメニュー」下記の様なクリックすると選択項目が表示されるものです。



プルダウンメニューを作成する際には、以下のHTMLを使用します。

<select name=”送信時の名前”>プルダウンメニュー
<option value=”送信される値”>選択時のテキスト</option>プルダウンメニューの項目

プルダウンメニューは<select>タグと、その子要素として<option>タグを組み合わせて作成します。
プルダウンメニューを正しく動作させるには<select>タグにname属性、<option>タグにvalue属性を付ける必要があります。
また<option>タグにはselected属性をつけることが出来ます。この属性はページが表示された時に選択された状態になります。

プルダウンメニューのHTMLの基本構造は以下です。

<label for="">ラベル</label><br>
      <select name="送信時の名前">
        <option value="" selected>
          選択して下さい
        </option>
        <option value="送信される値1">
          選択肢1
        </option>
        <option value="送信される値2">
          選択肢2
        </option>
      </select>

先程の「都道府県」のプルダウンメニューのHTMLは以下の様になっています。

HTML

<label for="">都道府県</label><br>
      <select name="">
        <option value="" selected>
          選択して下さい
        </option>
        <option value="1">
          北海道
        </option>
        <option value="2">
          青森県
        </option>
        <option value="3">
          岩手県
        </option>
        <option value="4">
          宮崎県
        </option>
        <option value="5">
          秋田県
        </option>
        <option value="6">
          山形県
        </option>
        <option value="7">
          福島県
        </option>
        <option value="8">
          茨城県
        </option>
        <option value="9">
          栃木県
        </option>
        <option value="10">
          群馬県
        </option>
        <option value="11">
          栃木県
        </option>
        <option value="12">
          埼玉県
        </option>
      </select>

以上が「HTMLでプルダウンメニューの作成の仕方:お問い合わせなどに使用」でした。

現場では、良くお問い合わせの項目で使用します。ほとんどの案件で使用するのでしっかりと覚えておきましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

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