HTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

黄舟
リリース: 2017-07-26 09:53:57
オリジナル
3431 人が閲覧しました

HTML のドロップダウン リスト:

HTML コード HTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

<select>  
  <option value ="1">Volvo</option>  
  <option value ="2">Saab</option>  
  <option value="3">Opel</option>  
  <option value="4">Audi</option>  
</select>
ログイン後にコピー

ここで、select はドロップダウン リスト (ドロップダウン リスト) を表示すること、option はドロップダウン リスト内の項目、オプションの [テキスト コンテンツ] はドロップダウン リスト項目のページに表示される値であり、[値] は実際にサーバーに送信する必要がある値です。
表示効果は次のとおりです:


さらに複雑なドロップダウン リスト:

HTML コード HTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

<select>  
  <optgroup label="Swedish Cars">  
    <option value="1">Volvo</option>  
    <option value="2">Saab</option>  
  </optgroup>  
  <optgroup label="German Cars">  
    <option value="3">Mercedes</option>  
    <option value="4">Audi</option>  
  </optgroup>  
</select>
ログイン後にコピー

このドロップダウン リストには「項目」が含まれていますグループ」 (項目グループ) の場合、このグループは選択できません。実際に機能するのは、value 属性です。
「プロジェクト グループ」を含むこのドロップダウン リストを見てください


オプション パラメータ: selected="selected"
ページを開く必要がある場合は、デフォルトでオプションが選択されます。選択したパラメータを使用する必要があります:

HTML コード HTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3" selected="selected">Mercedes</option>  
  <option value="4">Audi</option>  
</select>
ログイン後にコピー

オプションのパラメータ:disabled="disabled"
項目を無効にする必要があるが、非表示にしたくない場合は、無効な属性

HTML コード HTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3" disabled="disabled">Mercedes</option>  
  <option value="4">Audi</option>  
</select>
ログイン後にコピー

オプションパラメータ: title
アイテム上にマウスを置いたときにプロンプ​​トを表示する必要がある場合は、title 属性

HTML コードを使用できますHTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3">Mercedes</option>  
  <option value="4" title="Audi, your best choice!">Audi</option>  
</select>
ログイン後にコピー

実際、title は他の多くの HTML タグでも使用できます。

以上がHTML でのドロップダウン リスト選択のグラフィック コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート