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

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

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

使用語(yǔ)法：

單選框：<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"（也可以直接簡(jiǎn)寫成checked） 時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

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

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

（2）下拉框

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

使用語(yǔ)法：

<select>

<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁(yè)顯示的內(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"（也可以直接簡(jiǎn)寫成selected） 時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

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

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

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

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

選框也是input標(biāo)簽中的一個(gè)類型，如果看過(guò)前面的幾篇教程應(yīng)該很容易理解。

直接貼代碼

效果圖

這個(gè)和前面的單選框一樣 可以通過(guò) checked屬性來(lái)設(shè)置默認(rèn)選中

多行文本框

假如一個(gè)地方需要輸入很多文字的話，以前介紹的文本框，用戶體驗(yàn)明顯是不好的。

這就需要用到多行文本框標(biāo)簽了 <textarea>

代碼

效果圖

解釋一下屬性 cols 代表文本框每行可以容納多少字符， rows 代表可以容納多少行數(shù)

接下來(lái)講一個(gè)比較特別的控件--重置控件

代碼

效果圖

一個(gè)按鈕，會(huì)將表單域中輸入的信息全部清空，回到默認(rèn)屬性，具體效果大家自己下去測(cè)試

天一個(gè)網(wǎng)友問(wèn)小編，說(shuō)他在用tp5提交多選框的時(shí)候獲取不到多選框的值，小編今天就對(duì)這個(gè)問(wèn)題寫出解決方法。

我的html代碼如下：

小編在測(cè)試上面代碼的過(guò)程中發(fā)現(xiàn)，如果用官方提供的 input 助手函數(shù)去獲取多選框 test 的值確實(shí)獲取不到，后面仔細(xì)看了一下官方文檔，發(fā)現(xiàn)原來(lái)如果要獲取的數(shù)據(jù)為數(shù)組的話，就要加上 /a 修飾符才能正確獲取到：

小編在加上修飾符后就獲取到數(shù)據(jù)了，也不知道這算不算是一個(gè)BUG，下面順便附上一些修飾符說(shuō)明：

s強(qiáng)制轉(zhuǎn)換為字符串類型

d強(qiáng)制轉(zhuǎn)換為整型類型

b強(qiáng)制轉(zhuǎn)換為布爾類型

a強(qiáng)制轉(zhuǎn)換為數(shù)組類型

f強(qiáng)制轉(zhuǎn)換為浮點(diǎn)類型

謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過(guò)程中遇到問(wèn)題可以在評(píng)論區(qū)提問(wèn)或者直接私信我，我會(huì)定期回復(fù)，碼農(nóng)劉小橋與你一起學(xué)習(xí)，共同進(jìn)步。