網頁中的表單的進階使用

在上一節中，大家學習了表單的入門知識，我們要在上節知識點勤加練習的基礎上，才能更好地適應本節知識點的學習。表單在網頁設計和交互中的重要性不言而喻，在今天的網頁設計中，網頁中無大大小小用到表單的地方不計其數。表單中的內容也越來越豐富。只學習了上一節當中的圖像按鈕，文本域是遠遠不夠的。因此，這節老師還要帶領大家學習一些表單中新的元素。具體包括表單中的單選按鈕，復選框，密碼框元素。這些元素的使用將再一次極大地豐富了我們構建的 web 網頁。

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

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

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

首先，我們先創建一個空白的 HTML 文檔。

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

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

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

2. 在表單中添加復選框

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

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

創建完表單后去右側的面板中尋找復選框選項。點擊之后可以看到屏幕上會不斷的出現　ｃｈｅｃｋｂｏｘ，這個就是復選框的英文名字。

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

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

3. 在表單中添加密碼框

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

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

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

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

4. 小結

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