HTML中select標簽的使用方法

發(fā)布時間：2020-08-29 13:57:18 來源：億速云閱讀：380 作者：小新欄目：web開發(fā)

這篇文章主要介紹HTML中select標簽的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們首先來看一下什么是select標簽？

select標簽是用于創(chuàng)建選擇框的標簽。當(dāng)你希望用戶從下拉菜單項中進行選擇時可以使用select標簽。

你可以將select標簽用作表單的一部分，也可以使用JavaScript獲取所選項的值。

如何使用select標簽？

要使用select標簽，可以通過在select標簽之間添加option標簽來創(chuàng)建下拉菜單。

<select name="name" id="name">
  <option value="name1">張三</option>
  <option value="name2">李四</option>
  <option value="name3">王二</option>
</select>

select標簽復(fù)雜的使用方法

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body>
<label>億速云視頻課程選擇：
  <select name="program" multiple size="4">
    <optgroup label="application">
      <option value="wordpress">前端視頻課程</option>
      <option value="webapp">php視頻教程</option>
      <option value="laravel">bootstrap視頻課程</option>
    </optgroup>
    <optgroup label="mobile">
      <option value="iphone">iPhone</option>
      <option value="android">Android</option>
      <option value="unity">Unity</option>
    </optgroup>
  </select>
</label>
</body>
</html>

說明：

如果指定多個屬性，則可以使用多個選項。如果未指定，則僅進行一個選擇。

由于size屬性指定為size =“4”，因此只能顯示4行。

您還可以通過滾動顯示所有選項。

無法選擇<optgroup>指定的標簽本身，但可以將其顯示為分組標簽。

我們最后再來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <form action="#" method="GET">
      <select name="name" id="name">
        <option value="who">發(fā)消息給誰？</option>
        <option value="name1">張三</option>
        <option value="name2">李四</option>
        <option value="name3">王二</option>
        <option value="name4">陳五</option>
        <option value="name5">趙六</option>
      </select>
      <input type="submit" name="submit" value="發(fā)送" />
    </form>
  </body>
</html>

瀏覽器上效果如下：

HTML中select標簽的使用方法

以上是HTML中select標簽的使用方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

HTML中select標簽的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽