如何在HTML5中停用下拉列表?


下拉列表定義了使用者選擇的可用選項列表。我們在日常工作中訪問許多網站,在這些網頁上,我們會發現一個或多個導航中下拉列表中有多種選項來訪問該特定網頁。例如,大型網站上的下拉選單可以透過讓使用者跳過一到兩個級別來訪問他們正在尋找的資訊,從而幫助使用者節省時間。本文中使用的示例將解釋如何建立停用此類下拉列表的HTML5程式碼。

視覺化表示

語法

<select>……
<option> list1 </option>
<option> list2 </option>
<option> list3 </option>
</select>

select標籤用於建立下拉列表,而option標籤定義要選擇的列表值。

示例

在這個例子中,我們將首先使用h1標籤設定問題陳述的主標題,使用p標籤設定關於下拉列表的一些資訊。要停用下拉列表,它將使用select標籤中的關鍵字disabled,並在網頁上顯示結果。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
</head>
<body>
   <h1>Central Board of Secondary Education</h1>
   <p style="color: #000fff"><b>The example to display non-disable dropdown list</b></p>
   <p>The Courses offer for intermediate science student</p>
   <select>
      <option value="physics">Physics</option>
      <option value="chemistry">Chemistry</option>
      <option value="biology">Biology</option>
      <option value="math">Math</option>
      <option value="Social Science">Social Science</option>
   </select>
   <br><br><br><br><br><br>
   <p style="color: #000fff"><b>The example to display disable dropdown list</b></p>
   <h3>The Courses offer for intermediate commerce student</h3>
   <select disabled>
      <option value="physics">Business Mathematics</option>
      <option value="chemistry">Economics</option>
      <option value="biology">Accountancy</option>
      <option value="math">English</option>
      <option value="Social Science">Tally</option>
   </select>
</body>
</html>

使用下拉列表的優點

  • 它有助於避免滾動網頁。

  • 非常容易訪問內容。

  • 對於電子商務網頁來說,這有助於過濾特定的產品部分。

結論

我們瞭解了透過停用下拉列表的下拉列表示例。上面的輸出顯示了停用和未停用下拉列表之間的區別。當管理員想要保護特定網頁時,停用選項可能很有用,因為它會變得不活動且無響應。

更新於:2023年5月15日

2K+瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.