表單中的選擇功能

在之前的學(xué)習(xí)中，老師帶領(lǐng)大家學(xué)習(xí)了有關(guān)表單的一些常識。雖然不難，但還是具有一定的操作性。今天，老師將帶領(lǐng)大家學(xué)習(xí)表單中的選擇功能。

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

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

1. 如何在表達(dá)中添加選擇功能

在前面的 HTML 標(biāo)簽學(xué)習(xí)過程中有仔細(xì)課下研究過的同學(xué)們不難發(fā)現(xiàn)，其實選擇功能的實現(xiàn)，在網(wǎng)頁中大多數(shù)就是依賴這個常見的 HTML 標(biāo)簽 – select 標(biāo)簽。

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

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

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

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

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

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

以上就是我們設(shè)置 select 標(biāo)簽的選項，并且為 select 選擇框設(shè)置它的其他屬性。

3. 小結(jié)

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

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

本節(jié)知識點的難點是：學(xué)會為 select 標(biāo)簽設(shè)置選項并且設(shè)置其他屬性。