HTML 中的選項標籤

選項標籤是 HTML 中最有用的元素，它在下拉清單中用於從選擇清單中選擇特定的使用者首選項。一次，一個使用者可以從給定清單中選擇一個或多個選項。這是 HTML 中選項標籤的主要好處。 元素始終包含在 內選擇>標籤。或標籤 e= 也稱為 。對於單一選項，可以使用 元素，而對於多個選項選擇，我們可以使用HTML 的一個名為 的屬性，無論使用者要透過腳本呼叫datalist 或將資料傳送到伺服器，然後標籤在

中使用標籤。

語法與範例

以下語法可協助我們確定選項標籤在網頁或 HTML 中的確切定義位置。

文法：

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

如上語法所示，是用來建立資料清單的標籤。 選擇標籤中包含的標籤是選擇清單的屬性值或屬性，該值將用於顯示天氣選項被選擇、停用或具有任何其他屬性。 option1,2….將是名稱。

在CSS的幫助下，我們可以賦予我們的選擇清單效果，能夠設定相對、絕對等位置，能夠設定寬度並執行許多其他功能。下拉清單的位置定義為兩個值，相對位置用於在選擇清單按鈕正下方顯示清單內容。借助位置：絕對;

範例：

這將限制使用者從選擇清單中選擇單一選項。

<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 中 Option 標籤的屬性

;標籤支援的具體屬性如下：

• disabled: 此屬性用於設定布林值，形式為 true 和 false。如果設定為 true，則清單中的選項將被停用；否則為假。
• label: 假設我們想給一些文字作為標籤，那麼可以將其放入選項標籤中。它將被視為該元素的值。
• selected:在網頁設計中，有些情況下我們希望在顯示視圖中顯示已選取的選項。因此，透過為選項設定選定的屬性，可以在清單中顯示選定的選項。只能顯示清單中選定的一項。
• 值：也可以為選擇清單中的選項設定值。

 選項 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>

輸出：

結論

從以上所有資訊中，我們得知選擇清單中或資料清單中的標籤負責根據使用者選擇選擇選項。人們可以從下拉清單中選擇一個或多個選項。如果清單中有多個選項，我們可以將其分為 群組。元素。

以上是HTML 中的選項標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！