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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 在表單中添加密碼框

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

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

建立好空白表單后，我們?cè)冱c(diǎn)擊右側(cè)面板的密碼，可以看到圖中出現(xiàn)了一個(gè) password 和一個(gè)帶有輸入功能的輸入框，我們?cè)谳斎肟蛑袊L試輸入文字，可以看到輸入的文字都被加密成為了*這種星形符號(hào)。

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

4. 小結(jié)

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