整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一篇文章我們說(shuō)了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：?jiǎn)芜x框、復(fù)選框、下拉框。
在我們表單頁(yè)面中，經(jīng)常會(huì)有選擇性別或者選擇愛(ài)好這類的內(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 取值一定要一致（具體可見(jiàn)下邊的參考練習(xí)）。
4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡(jiǎn)寫(xiě)成checked） 時(shí)，該選項(xiàng)被默認(rèn)選中
使用練習(xí)：
我們創(chuàng)建一個(gè)表單，表單里邊包含姓別（男、女）選擇的單選框，默認(rèn)選中男以及愛(ài)好（唱歌、打游戲、繪畫(huà)、旅游）選擇的多選框，默認(rèn)選中唱歌。具體的代碼如下圖所示：
在網(wǎng)頁(yè)中的顯示效果就如下圖所示：
下拉框也是我們常用的一個(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è)，寫(xiě)法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）
2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡(jiǎn)寫(xiě)成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í)。
何在Axure中實(shí)現(xiàn)不同元件的單選選中效果？教程詳解在此，請(qǐng)看~~
同一選填內(nèi)容的不同選項(xiàng)，我們可以通過(guò)拖動(dòng)元件庫(kù)已有的“單選按鈕”，編輯選項(xiàng)對(duì)應(yīng)需要展示的文字；然后全選所有的“單選按鈕”，將他們組合并取名為某一名稱；最后將此名稱復(fù)制到“設(shè)置單選按鈕組名稱”中，即可實(shí)現(xiàn)效果。
以我們填寫(xiě)個(gè)人信息中很常見(jiàn)的性別選擇為例。
但如果你所需要呈現(xiàn)的原型不是單選按鈕，而是類似于菜單選中或者頁(yè)碼切換的展示效果，那“單選按鈕”就滿足不了你了
這時(shí)候我們需要自定義不同元件的單選選中效果，具體的Axure操作步驟可分解為：
拖入一個(gè)矩形元件到頁(yè)面中，將其調(diào)整為你想要的形狀和大小，并對(duì)其進(jìn)行命名
我拖入了一個(gè)矩形，將其圓角半徑設(shè)置為8，將該元件名稱修改為“性別”，并在該矩形內(nèi)輸入想要展示的文字“男性”。
設(shè)置矩形元件的交互事件（設(shè)置鼠標(biāo)單擊該元件時(shí)，它的選中狀態(tài)為“true”）。
設(shè)置矩形元件的交互樣式（點(diǎn)擊選中，設(shè)置選中的交互樣式為白色字體，填充藍(lán)色）。
復(fù)制剛剛設(shè)置好的矩形元件，粘貼出你所需數(shù)量的單選元件，并一一修改輸入你需要元件上展示的文字內(nèi)容（需要保證這些元件的命名都是統(tǒng)一的）。
全選中這些元件，在“設(shè)置選項(xiàng)組名稱”中輸入他們（一樣的）名稱后，點(diǎn)擊F5就可以看到效果了。
原型效果：http://www.wulihub.com.cn/go/Wy3R9J/start.html（附帶頁(yè)碼單選的原型效果）
本文由 @素小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
很多時(shí)候，當(dāng)我們想要填寫(xiě)信息的時(shí)候，都希望有個(gè)快熟選擇，無(wú)需手動(dòng)填寫(xiě)信息。選擇類表單元素就是能幫助我們快速選擇信息，提高效率。
標(biāo)
可以快速選擇想要的選項(xiàng)，不需要我們手動(dòng)輸入。在各大網(wǎng)站的表單里普遍使用。
下拉選擇框
單選按鈕框
可以快速選擇想要的選項(xiàng)
<select> <option>請(qǐng)選擇</option> <option>我是蘋(píng)果</option> <option>我是香蕉</option> </select>
下拉選擇框
只選其中一項(xiàng)選項(xiàng)
男:<input type="radio" name="sex" /> 女:<input type="radio" name="sex" />
單選按鈕選框
可以多選項(xiàng)目
<input type="checkbox" />蘋(píng)果 <input type="checkbox" />香蕉 <input type="checkbox"/>草莓
多選按鈕選框
思維導(dǎo)圖
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
