表單中的選擇功能

在之前的學習中，老師帶領大家學習了有關表單的一些常識。雖然不難，但還是具有一定的操作性。今天，老師將帶領大家學習表單中的選擇功能。

具體來講，什么是表單中的選擇呢？其實就是我們常見的選擇框。這么說可能有點抽象，我們這一節知識點中，老師將通過以下兩個維度去給大家講解表單中選擇的使用。第一個維度是如何在表單中添加選擇功能。第二個維度是在表單中控制選擇的選項和其他屬性。

這一節雖然不是很難，但是選擇元素的出現卻是我們表單提交的常見元素，可以說不會選擇元素的使用，對于今后的開發和設計有點寸步難行。

1. 如何在表達中添加選擇功能

在前面的 HTML 標簽學習過程中有仔細課下研究過的同學們不難發現，其實選擇功能的實現，在網頁中大多數就是依賴這個常見的 HTML 標簽 – select 標簽。

select 標簽的使用如果講代碼層面的話，想必大家都會使用。我們今天還是終點觀察一下，如何在 Dreamweaver CC 2018 中快速便捷地插入 select 標簽。下面就來看一看：

首先，新建一個空白的 HTML 文檔。然后我們在右側的插入面板中，切換到表單元素的插入。就和上一節的操作一樣，這里老師就不再重復過多的重復性操作了，具體操作，大家可以參考前一節的描述。老師會在下面配上大致的 gif 動圖演示其插入過程。

好了，到這里我們就算學會了如何輕松便捷地在 Dreamweaver CC 2018 中插入一個選擇框的操作。那么問題來了，插入選擇框后，如何定義選擇框中的選項呢？別著急，這是咱們下一個知識點就要說到的內容。下面我們一起來看一看。

2. 在表單中控制選擇的選項和其他屬性

選擇框插入完成后了，如何編輯或者說自定義選項，才是選擇框存在的點睛之筆。在本節第一個知識點中的操作之后，我們打開代碼視圖，可以看到 select 標簽在剛剛插入后是選項空白的，那么如何為這個 select 標簽添加選項呢。最直接的辦法就是如下圖所示，我們加入 option 標簽，在 option 標簽中加上你想加入的選擇選項。這看起來并不難，下面的圖片中已經給大家做了很好的示例。

同時，我們通過下面的圖片，還為大家展示了如何為這個 select 標簽設置更多的屬性，一切屬性都在我們熟悉的屬性面板中。

以上就是我們設置 select 標簽的選項，并且為 select 選擇框設置它的其他屬性。

3. 小結

本節知識點內容不多，從新舊程度來說，本節知識點并沒有太多新，只是重點在于大家打開 Dreamweaver CC 2018 多多練習，多多研究，尤其是第二個知識點中的 select 標簽屬性，看起來多，但設置方式并不簡單。

本節知識點的重點是：在 Dreamweaver CC 2018 中插入選擇框，這里有表單和沒有表單的操作方式是完全一樣的，這個老師也必須提醒大家。

本節知識點的難點是：學會為 select 標簽設置選項并且設置其他屬性。