整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：單選框、復(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)頁中的顯示效果就如下圖所示：
下拉框也是我們常用的一個(gè)表單控件，多用于選擇城市地區(qū)等。
使用語法：
<select>
<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í)。
多選框（checkbox）用于可多選的情況，單選框（radio）則只能選擇一個(gè)。在普通的HTML中，checkbox、radio在和<label>等標(biāo)簽配合時(shí)會(huì)出現(xiàn)對(duì)齊的問題，Bootstrap很好地解決了這個(gè)問題，代碼如下：
單選框和多多選框效果圖
實(shí)現(xiàn)代碼
上面的代碼中我們將input標(biāo)簽都包含在了label中，強(qiáng)制其在一行，但是很多情況下我們不建議這么做。一般一個(gè)<label>中包含一個(gè)元素，如果遇到多個(gè)<label>標(biāo)簽則會(huì)垂直顯示內(nèi)容。Bootstrap中提供了幾個(gè)樣式類，如class="checkbox-inline"、class="radio-inline"，可以使checkbox和radio顯示在一行，代碼如下：
現(xiàn)效果
代碼：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
