如何使用＆lt; select＆gt;如何創建下拉列表。 and＆lt;選項＆gt; 標籤？-html教學-PHP中文網

如何使用

在HTML中創建下拉列表涉及使用<select></select>和<option></option>標籤。 <select></select>元素充當下拉菜單的容器，而每個<option></option>元素代表下拉列表中的一個項目。

這是有關如何創建基本下拉列表的分步指南：

從<select></select>標籤開始：
<select></select>標籤是定義下拉列表的最外部元素。它可以具有各種屬性，例如name ，該屬性用於提交表單數據。
```
 <code class="html"><select name="fruits">  </select></code>
```
登入後複製
登入後複製
在<select></select>中添加<option></option>標籤：
每個<option></option>代表下拉菜單中的一個可選項目。您可以指定具有值屬性的值，該value屬性是在提交表單時發送的。如果省略了value屬性，則將發送<option></option>的文本內容。
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
登入後複製

（可選）設置默認選定選項：
要設置默認的選定選項，您可以在要預選的<option></option>上使用selected屬性。

 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="cherry">Cherry</option> </select></code>

登入後複製

這種基本結構使您可以創建一個功能下拉列表，用戶可以與之交互以選擇其首選選項。

我可以在下拉列表中添加多個選擇嗎？

是的，您可以使用<select></select>標籤上的multiple屬性在下拉列表中啟用多個選擇。當存在此屬性時，用戶可以從列表中選擇多個選項。

這是實現多選擇下拉列表的方法：

將multiple屬性添加到<select></select>標籤：

 <code class="html"><select name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

登入後複製

可選，指定大小：
要一次顯示多個選項，您可以在<select></select>標籤上設置size屬性。如果size大於1，則下拉列表將成為一個列錶框，顯示許多選項而無需滾動。
```
 <code class="html"><select name="fruits" multiple size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
登入後複製

使用multiple屬性，用戶可以在單擊選項時按住Ctrl （Windows）或Cmd （Mac）鍵來選擇多個選項。提交表單時，選定的值將作為具有相同名稱屬性的數組提交。

如何設置下拉列表以匹配我的網站的設計？

可以通過CSS實現匹配網站設計的下拉列表。由於下拉列表是表單元素，因此某些屬性不是直接風格的，但是仍然有很多方法可以自定義其外觀。

這是有關如何樣式下拉列表的指南：

<select></select>標籤的基本樣式：

您可以為<select></select>元素本身定型以調整其大小，字體，邊框和背景。
```
 <code class="css">select { width: 200px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') 96% / 15% no-repeat #eee; }</code>
```
登入後複製
注意appearance: none刪除默認瀏覽器樣式，以及用於下拉指示器的自定義箭頭映像。
樣式<option></option>元素：

樣式<option></option>元素更有限。您可以更改一些屬性，但是由於安全限制，目前無法在所有瀏覽器中進行完整的自定義。
```
 <code class="css">option { font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; padding: 0px 2px 1px; }</code>
```
登入後複製

選擇時樣式：

您可以在焦點或選擇選項時樣式<select></select>元素。

 <code class="css">select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); }</code>

登入後複製

響應設計：

您可以使用媒體查詢來調整不同屏幕尺寸的樣式。
```
 <code class="css">@media (max-width: 600px) { select { width: 100%; } }</code>
```
登入後複製

請記住，瀏覽器兼容性可能會有所不同，因此請務必在不同的瀏覽器和設備上測試您的樣式下拉菜單。

可以將幾個屬性與<select></select>標籤一起使用，以控制其行為並提供其他信息。這是一些最常見的：

姓名：
指定控件的名稱，該控件的名稱在提交表單時將帶有表單數據。
```
 <code class="html"><select name="fruits">  </select></code>
```
登入後複製
登入後複製

多種的：
允許用戶選擇多個選項。

 <code class="html"><select name="fruits" multiple> <!-- Options go here --> </select></code>

登入後複製

尺寸：
定義下拉列表中可見選項的數量。如果size大於1，則將成為列錶框而不是下拉列表。
```
 <code class="html"><select name="fruits" size="3">  </select></code>
```
登入後複製

禁用：
禁用選擇元素，以防止用戶交互。

 <code class="html"><select name="fruits" disabled> <!-- Options go here --> </select></code>

登入後複製

必需的：
指定用戶必須在提交表單之前選擇一個選項。

 <code class="html"><select name="fruits" required> <option value="">Select a fruit</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select></code>

登入後複製

自動對焦：
當頁面加載時，會自動將焦點設置為<select></select>元素。
```
 <code class="html"><select name="fruits" autofocus>  </select></code>
```
登入後複製