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