HTMLのオプションタグ

オプション タグは HTML で最も便利な要素であり、選択リストから特定のユーザー設定を選択するためにドロップダウン リスト内で使用されます。一度に 1 人のユーザーが、指定されたリストから 1 つ以上のオプションを選択できます。これが HTML のオプション タグの主な利点です。 要素は常に 内に含まれます。 選択>タグ。または、タグ e= は、。単一のオプションの場合、 を使用できます。一方、複数のオプションを選択する場合は、ユーザーがスクリプトを通じて datalist を呼び出す場合、またはサーバーにデータを送信する場合は常に、 と呼ばれる HTML の属性の 1 つを使用できます。その後、タグは

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

構文と例

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

構文:

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

上記の構文に示すように、データリストを作成するために使用されるタグです。 select タグで囲まれたタグは、選択リストの属性値です。値は、天気オプションが選択されているか、無効になっているか、またはその他のプロパティを示すために使用されます。オプション 1,2…が名前になります。

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

これは を含む選択リストの簡単な例です。タグ。

コード:

<title>Option tag in HTML</title>


<h4 id="List-of-IIT-colleges-in-INDIA">List of IIT colleges in INDIA</h4>

IIT Madras IIT Delhi IIT Bombay IIT  Kharagpur IIT Kanpur IIT Roorkee IIT Guwahati IIT Hyderabad IIT Indore IIT Bhubaneswar IIT Tirupati IIT Bhilai IIT Goa IIT Jammu IIT Dhanbad IIT Palakkad IIT Dharwad, Est

出力:

例 #2

の表示例selected、disabled、

などの値を使用するタグ

コード:

<title>Option tag in HTML</title>


<h4 id="Select-your-favourite-Bakery-product-from-the-list">Select your favourite Bakery product from the list</h4>

Butterscotch Cake Dark Chocolate Cake Fruit Cake Rasmali Cake Cupcakes Veg Puff Anda Puff Crunchy Biscuits Chocolate Biscuits Choco Lava Cake White Bread Brown Bread Muffin Bread Roll Brownie Pastry Veg Grill Sandwich

出力:

例 #3

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

コード:

<h2 id="Top-IT-training-Institutes-in-Pune">Top IT training Institutes in Pune </h2>

ABCIS Learning MindScripts Technologies Sysap technologies IclassPune   IIHT Magneto Academy Certification Guru I Cert Global Technogeeks

Multiple options can be selected here. Press ctrl key and select multiple option from the list.

<script> function multipleFunc() { document.getElementById("multiselectopt").multiple = true; } </script>

出力:

結論

上記のすべての情報から、 は、選択リストまたはデータリスト内のタグは、ユーザーの選択に従ってオプションを選択する責任があります。ドロップダウン リストから 1 つ以上のオプションを選択できます。リストに複数のオプションが含まれている場合は、それを に分割できます。要素。

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