網(wǎng)頁中的表單的進階使用

在上一節(jié)中，大家學(xué)習(xí)了表單的入門知識，我們要在上節(jié)知識點勤加練習(xí)的基礎(chǔ)上，才能更好地適應(yīng)本節(jié)知識點的學(xué)習(xí)。表單在網(wǎng)頁設(shè)計和交互中的重要性不言而喻，在今天的網(wǎng)頁設(shè)計中，網(wǎng)頁中無大大小小用到表單的地方不計其數(shù)。表單中的內(nèi)容也越來越豐富。只學(xué)習(xí)了上一節(jié)當(dāng)中的圖像按鈕，文本域是遠遠不夠的。因此，這節(jié)老師還要帶領(lǐng)大家學(xué)習(xí)一些表單中新的元素。具體包括表單中的單選按鈕，復(fù)選框，密碼框元素。這些元素的使用將再一次極大地豐富了我們構(gòu)建的 web 網(wǎng)頁。

1. 在表單中添加單選按鈕

單選按鈕，顧名思義，就是在一堆相似的按鈕中你只能點擊選擇一個。按鈕的形狀可以是空心圓點狀，可以是空心正方形等等，還可以是其他的自定義形狀，這就有賴大家在生活中電腦上或者手機端網(wǎng)頁中多多尋找，多多觀察，肯定能發(fā)現(xiàn)不少這樣的選項按鈕。

那么我們今天要講的并不是單選按鈕的具體實現(xiàn)原理。而是如何通過我們主要描述的 Dreamweaver CC 2018 來設(shè)置單選按鈕。下面就請跟隨老師的操作步驟，來看一下在 Dreamweaver CC 2018 中操作設(shè)置一個單選按鈕有多么的方便和神奇吧？

首先，我們先創(chuàng)建一個空白的 HTML 文檔。

第二步：我們還是去右邊的面板中把 HTML 切換為表單，這樣下方的彈出列表中就都是與表單相關(guān)的元素了。我們切換完成后，可以看到里面有很豐富的內(nèi)容。

我們滑動鼠標(biāo)滾輪向下滑，就能看到一個單選按鈕的選項。沒錯，點擊它，我們可以看到如下圖一樣的效果，隨著你反復(fù)的點擊單選按鈕選項，出現(xiàn)了一個接一個的單選按鈕，同時，代碼視圖中也出現(xiàn)了響應(yīng)的變化。觀察變化，我們可以總結(jié)到單選按鈕代碼的寫法。

好了，以上就是我們應(yīng)該掌握的單選按鈕的插入方法。是不是似曾相識并且很簡單？我們只要緊跟老師的操作，相信大家都能夠很好地掌握的。

2. 在表單中添加復(fù)選框

復(fù)選框，這個在網(wǎng)頁中的表單也十分常見，它和上面的單選按鈕能夠形成一個鮮明的對比。鮮明的對比就在于一個是只能選一個，一個則能選擇多個按鈕，實現(xiàn)了最終的復(fù)選。下面就跟隨老師的操作步驟來看一下復(fù)選的設(shè)置：

方法和之前的單選按鈕設(shè)置基本完全相同。我們首先還是要創(chuàng)建一個空白的　ＨＴＭＬ　文檔來承載這個表單。

創(chuàng)建完表單后去右側(cè)的面板中尋找復(fù)選框選項。點擊之后可以看到屏幕上會不斷的出現(xiàn)?。悖瑁澹悖耄猓铮?，這個就是復(fù)選框的英文名字。

試著去點選復(fù)選框，我們可以發(fā)現(xiàn)，每一個復(fù)選框都可以選中。具體的效果就和下面的這張動圖一樣：

以上就是復(fù)選框的設(shè)置思路，相比單選框，復(fù)選框提供給用戶選擇的機會更多，更充分。

3. 在表單中添加密碼框

密碼框可謂表單填寫中一個不可缺少的輸入框。它和普通文本輸入框最大的區(qū)別就是用它輸入的鍵盤文字在屏幕上會隱藏顯示，正如它的名字一樣，密碼，隱秘的編碼。是不能讓人看到的。因此，密碼框的使用在 web 網(wǎng)頁中是十分常見并且普遍的。

首先，我們先打開 DW，創(chuàng)建一個空白的 HTML 文檔，然后新建一個表單。

建立好空白表單后，我們再點擊右側(cè)面板的密碼，可以看到圖中出現(xiàn)了一個 password 和一個帶有輸入功能的輸入框，我們在輸入框中嘗試輸入文字，可以看到輸入的文字都被加密成為了*這種星形符號。

以上就是表單中密碼框的設(shè)置方法。有木有很簡單？其實 Dreamweaver CC 2018 中的很多操作都可以抽象為一個操作模式，重點在于理解各種元素在網(wǎng)頁設(shè)計和交互中的作用。然后才是學(xué)習(xí)工具的使用。而 Adobe Dreamweaver CC 2018 只是給我們網(wǎng)頁設(shè)計便利化搭建了一個充分的平臺，要想利用好，還得理論和實踐相結(jié)合的去操作。

4. 小結(jié)

本節(jié)知識點操作性較強，多數(shù)都是一些步驟操作，但所涉及的步驟大體相似，不用大家很費勁的去開拓去尋找什么新的按鈕，屬于舊酒裝新瓶。我們只要多多練習(xí)，就能夠輕松的掌握。
本節(jié)知識點的重點是：密碼框的理解與使用。
本節(jié)知識點的難點是：單選按鈕和復(fù)選框的使用和操作。