HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹

一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：單選框、復(fù)選框、下拉框。

（1）單選框和復(fù)選框

在我們表單頁面中，經(jīng)常會(huì)有選擇性別或者選擇愛好這類的內(nèi)容，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

使用語法：

單選框：<input type="radio" value="值" name="名稱" checked="checked"/>

復(fù)選框：<input type="checkbox" value="值" name="名稱" checked="checked"/>

詳細(xì)講解：

1、type: 當(dāng) type="radio" 時(shí)，控件為單選框；當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

3、name：為控件命名，這里要注意同一組的單選按鈕，name 取值一定要一致（具體可見下邊的參考練習(xí)）。

4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡寫成checked）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含姓別（男、女）選擇的單選框，默認(rèn)選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認(rèn)選中唱歌。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

（2）下拉框

下拉框也是我們常用的一個(gè)表單控件，多用于選擇城市地區(qū)等。

使用語法：

<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>

</select>

詳細(xì)講解：

1、option：option為select下拉子元素，可以有一個(gè)或多個(gè)，寫法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡寫成selected）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含一個(gè)城市的下拉框，下拉框中有北京、上海、天津這三個(gè)城市，其中默認(rèn)選中天津。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

好了，本篇文章就先給大家介紹這幾個(gè)表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示，記得平時(shí)要多加練習(xí)才是王道。

每日金句：做人要像竹子一樣每前進(jìn)一步，都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

節(jié)課，我們實(shí)現(xiàn)表單中的單選和多選功能。

對(duì)于所有人而言，每天都會(huì)面臨各種各樣的選擇。例如：1000W和北大錄取通知書我該選哪一個(gè)？我是去考研還是去工作？地上有一張50元和一張100元，我要撿哪一張？

在HTML中如何實(shí)現(xiàn)單選和多選呢?

我們可以通過在 form 標(biāo)簽里，嵌入 input 標(biāo)簽，通過設(shè)置 input 標(biāo)簽的 type 屬性值來實(shí)現(xiàn)單選和多選。

單選，type 的取值為 radio，radio 是收音機(jī)的意思，因?yàn)槲覀兪章牴?jié)目只能調(diào)到一個(gè)波段，因此用它來表示單選按鈕，就是讓用戶在有限的選擇中只選擇一個(gè)。

多選，type 取值為 checkbox，譯為復(fù)選框，也叫多選框，讓用戶在有限的選擇中選擇更多的選項(xiàng)。

我們來實(shí)現(xiàn)一個(gè)單選和多選的功能。

打開編輯器，新建一個(gè) radio_checkbox.html 文件，自動(dòng)補(bǔ)全基礎(chǔ)代碼，在body標(biāo)簽內(nèi)部編寫一個(gè) form 表單標(biāo)簽，在 form 標(biāo)簽里面添加文本 選擇性別： (冒號(hào)讀出來) ，緊接著添加一個(gè) input 標(biāo)簽，設(shè)置標(biāo)簽的 type 屬性值為 radio，后面添加文本 "男"，回車換行。

使用同樣的方法，再添加一個(gè) input 標(biāo)簽，設(shè)置標(biāo)簽的 type 屬性值為 radio，后面添加文本 "女"。保存。

用瀏覽器打開頁面，一組性別選擇的單選框顯示在頁面中。使用鼠標(biāo)點(diǎn)擊單選控件，這時(shí)你會(huì)發(fā)現(xiàn)單選框出現(xiàn)了問題，性別居然能選擇多個(gè)?

在這里需要提醒大家的是：

單選框控件必須成組使用才有意義，并且每組至少需要兩個(gè)單選框。

而“組”是通過 name 屬性來建立的，凡是 name 值相同的就是一組。

同組的單選框，只有一個(gè)會(huì)處在選中狀態(tài)，其他的會(huì)自動(dòng)呈現(xiàn)為未選中狀態(tài)。

因此，如果沒有給單選框設(shè)置 name 屬性，默認(rèn)每個(gè)單選框自成一組，一旦選中這個(gè)單選框，要想通過點(diǎn)擊來解除選中狀態(tài)就做不到了。

回到編輯器，為兩個(gè) input 單選框定義 name 屬性，值設(shè)置為 gender。保存。

回到瀏覽器，刷新。當(dāng)我們?cè)俅吸c(diǎn)擊性別選框的時(shí)候，單選的效果實(shí)現(xiàn)了。

返回編輯器，在單選框結(jié)尾處添加一個(gè) br 標(biāo)簽?；剀嚀Q行。

輸入文本：前端基礎(chǔ)包括：在文本后輸入 input 中括號(hào) type 等于 checkbox，input[type=checkbox] 按下 tab 鍵，創(chuàng)建三個(gè)多選框控件。

分別在每一個(gè) input 復(fù)選框后面添加文本 HTML、CSS、JavaScript。保存。

回到瀏覽器，刷新，包含三個(gè)選項(xiàng)的復(fù)選框做好了。鼠標(biāo)點(diǎn)擊復(fù)選框，出現(xiàn)了對(duì)鉤，表示已經(jīng)選中，再次點(diǎn)擊選中的復(fù)選框，取消選擇。

我們?cè)偎⑿乱幌马撁妫l(fā)現(xiàn)單選框和多選框在默認(rèn)情況下，都沒有選中。能不能在打開頁面的時(shí)候，性別的男和前端基礎(chǔ)的HTML，默認(rèn)選中呢？

單選框和多選框默認(rèn)選中效果，都可以通過定義 checked 屬性來實(shí)現(xiàn)，它的值只要不為空，任何字符都可以，通常我們會(huì)使用 checked 字符串作為它的值。另外，選中和取消選中只有兩個(gè)狀態(tài)，所以也可以不用定義值，只定義一個(gè)屬性名就可以了。

返回編輯器，給第一個(gè)單選控件添加 checked 屬性，再給第一個(gè)多選控件添加 checked 屬性。保存。

回到瀏覽器，刷新。性別和HTML默認(rèn)選中了。點(diǎn)擊其他控件，單選多選的功能依然有效。

單選框和多選選框我們就講完了，快自己實(shí)現(xiàn)一下吧。

文章配套視頻鏈接點(diǎn)我「鏈接」

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(gè)登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個(gè)新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時(shí)間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會(huì)返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網(wǎng)頁中使用窗口框架

在線咨詢

上一篇：wxpython入門第六步（高級(jí)組件）
下一篇：html中網(wǎng)頁中如何插入音頻和視頻？