简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLのオプションタグ

HTMLのオプションタグ

WBOY
WBOYオリジナル
2024-09-04 16:24:571080ブラウズ

オプション タグは HTML で最も便利な要素であり、選択リストから特定のユーザー設定を選択するためにドロップダウン リスト内で使用されます。一度に 1 人のユーザーが、指定されたリストから 1 つ以上のオプションを選択できます。これが HTML のオプション タグの主な利点です。 要素は常に タグは

内で使用されます。タグ。

構文と例

Web ページまたは HTML 内でオプション タグが正確にどこに定義されるかを決定するのに役立つ構文を次に示します。

構文:

<select>
<option value=""> option1 </option>
<option value=""> option2 </option>
<option value=""> option3 </option>
<option value=""> option4 </option>
</select>

上記の構文に示すように、データリストを作成するために使用されるタグです。

CSS を使用すると、選択リストに効果を与え、相対位置、絶対位置などの位置を設定したり、幅を設定したり、その他多くの機能を実行したりできます。ドロップダウン リストの位置は 2 つの値で定義されます。相対位置は、リストの選択ボタンのすぐ下にリストの内容を表示するために使用されます。位置の助けを借りて: 絶対;

例:

これにより、ユーザーは選択リストから 1 つのオプションを選択することが制限されます。

<select name="State">
<option value="MH">Maharashtra</option>
<option value="GJ"> Gujarat </option>
<option value="MP"> Madhya Pradesh </option>
<option value="RJ">Rajasthan </option>
<option value="AP">Andhra Pradesh </option>
</select>

同様に、選択リストの選択肢に応じて複数のオプションを選択できることは誰もが知っています。

構文: 

<select multiple>
<option value=""> option1 </option>
<option value=""> option2 </option>
<option value=""> option3 </option>
<option value=""> option4 </option>
</select>

同じ構文の例は次のとおりです: 

<select name="laptops" multiple>
<option value="hp">HP</option>
<option value="dell">Dell</option>
<option value="lv">Lenovo</option>
<option value="sony">Sony </option>
</select>

HTMLのオプションタグの属性

タグは次のような特定の属性をサポートします:

  • disabled: この属性は、true および false の形式でブール値を設定することによって使用されます。 true に設定されている場合、リストのオプションは無効になります。それ以外の場合は false です。
  • label: テキストをラベルとして指定したいとします。オプション タグに含めることができます。その要素の値として考慮されます。
  • selected: Web ページのデザインでは、表示ビューですでに選択されているオプションを表示したい場合があります。したがって、選択した属性をオプションに設定すると、選択したオプションをリストに表示できます。リストから選択したアイテムを 1 つだけ表示できます。
  • value: 選択リストのオプションに値を設定することもできます。

HTML の オプション タグの例

以下は HTML のオプション タグのさまざまな例です:

例 #1

これは

コード:

<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>List of IIT colleges in INDIA</h4>
<form>
<select name = "dropdown">
<option value = "im" >IIT Madras</option>
<option value = "id" >IIT Delhi</option>
<option value = "ib" >IIT Bombay </option>
<option value = "ikh" >IIT  Kharagpur</option>
<option value = "ikn">IIT Kanpur</option>
<option value = "ir" >IIT Roorkee</option>
<option value = "ig" >IIT Guwahati</option>
<option value = "ih">IIT Hyderabad </option>
<option value = "ii">IIT Indore</option>
<option value = "ib">IIT Bhubaneswar</option>
<option value = "it" >IIT Tirupati</option>
<option value = "ib">IIT Bhilai</option>
<option value = "ig">IIT Goa</option>
<option value = "ij" >IIT Jammu</option>
<option value = "idb">IIT Dhanbad </option>
<option value = "ip">IIT Palakkad</option>
<option value = "idhe">IIT Dharwad, Est</option>
</select>
</form>
</body>
</html>

出力:

HTMLのオプションタグ

例 #2

の表示例selected、disabled、

などの値を使用するタグ

コード:

<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>Select your favourite Bakery product from the list</h4>
<form>
<select name = "dropdown">
<optgroup label="Cakes">
<option value = "BS" >Butterscotch Cake</option>
<option value = "DC" >Dark Chocolate Cake</option>
<option value = "FC" >Fruit Cake</option>
<option value = "RC" >Rasmali Cake</option>
</optgroup>
<option value = "cc">Cupcakes</option>
<option value = "vp" required>Veg Puff</option>
<option value = "ap" disabled>Anda Puff</option>
<option value = "cb">Crunchy Biscuits </option>
<option value = "cob">Chocolate Biscuits</option>
<option value = "clc">Choco Lava Cake</option>
<option value = "wb" >White Bread</option>
<option value = "bb">Brown Bread</option>
<option value = "mf" selected>Muffin</option>
<option value = "br" >Bread Roll</option>
<option value = "bw">Brownie </option>
<option value = "ps">Pastry</option>
<option value = "vgs">Veg Grill Sandwich</option>
</select>
</form>
</body>
</html>

出力:

HTMLのオプションタグ

例 #3

この例では、データリストから複数のオプションを選択します。

コード:

<!DOCTYPE html>
<html>
<body>
<h2>Top IT training Institutes in Pune </h2>
<form id="multidd">
<select id="multiselectopt">
<option> ABCIS Learning </option>
<option> MindScripts Technologies </option>
<option> Sysap technologies </option>
<option> IclassPune</option>
<option>  IIHT</option>
<option> Magneto Academy </option>
<option> Certification Guru </option>
<option> I Cert Global </option>
<option> Technogeeks </option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p>
<script>
function multipleFunc() {
document.getElementById("multiselectopt").multiple = true;
}
</script>
</body>
</html>

出力:

HTMLのオプションタグ

結論

上記のすべての情報から、 に分割できます。要素。

以上がHTMLのオプションタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html Boolean define if for select include restrict Attribute this display position
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML ナビゲーション要素次の記事：HTML ナビゲーション要素

関連記事

続きを見る