整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
篇文章主要的向大家介紹了關(guān)于html input標(biāo)簽的單選按鈕的使用方法，還有關(guān)于HTML input標(biāo)簽的單選默認按鈕的做法。接下來我們一起來看看這篇文章吧
<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
> <form action="form_action.asp" method="get">
>
> <input type="radio" name="radio" value="1">單選1
>
> <input type="radio" name="radio" value="2">單選2
>
> <input type="radio" name="radio" value="3">單選3
>
> <input type="radio" name="radio" value="4">單選4
>
> </form>這個的效果很容易看到，我們還是先看看瀏覽器中的顯示效果吧：
這個效果一眼就能看到，很簡單的一個代碼
還有種是很多網(wǎng)站上都是經(jīng)常見到的，比如：單選性別，這個基本上都是用這種單選框去制作的。代碼如下：
HTML中的單選按鈕實現(xiàn)男女性別選擇，不讓男女同是都能都能選擇，實現(xiàn)方法：在按鈕的屬性里寫一個name屬性，并且把name的值設(shè)置成相同的
> <input id="man" type="radio" checked="checked" name="1" />男
>
> <input id="woman" type="radio" name="1"/>女這個就不給圖了，比上面那個還簡單，就兩個單選框，我們經(jīng)常遇到的這個。
現(xiàn)在來說說HTML單選框按鈕怎么默認選中：
首先我們先把第一個實例拿出來繼續(xù)說，我們只需要在其中加一個屬性，如下：
> <form action="form_action.asp" method="get">
>
> <input type="radio" name="radio" value="1">單選1
>
> <input type="radio" name="radio" value="2" checked>單選2
>
> <input type="radio" name="radio" value="3">單選3
>
> <input type="radio" name="radio" value="4">單選4
>
> </form>這上面我沒做任何的點擊，自己出現(xiàn)在那上面的，刷新過后還能看到在單選2上面。
我們就可以看到，這樣就把單選框給默認選中了，大家可以自己試試，多敲敲代碼。
好了，以上就是這篇關(guān)于html input標(biāo)簽做單選按鈕的文章了，有問題的可以在下方提問。
以上就是html單選按鈕默認選中怎么做？input標(biāo)簽的單選按鈕用法實例的詳細內(nèi)容，更多請關(guān)注我！！！
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
輯導(dǎo)語：如何針對具體場景選擇合適的組件，是web表單設(shè)計中的常見問題。那么，你知道開關(guān)、單選、復(fù)選框等組件的適用場景該如何選擇嗎？本篇文章里，作者就該問題做了詳細解答，一起來看一下吧。
在web表單設(shè)計中，我們會經(jīng)常遇到在開關(guān)、單選、復(fù)選框三個組件的選擇使用上糾結(jié)，特別是只有兩種狀態(tài)下，比如開啟/關(guān)閉、啟用/關(guān)閉、顯示/隱藏、同意/不同意、默認/自定義……
我們發(fā)現(xiàn)使用Switch開關(guān)、Radio單選和Checkbox復(fù)選這三個組件好像也都是可以的，這時應(yīng)該選擇哪個組件更合適呢？
本文主要探討這三個組件的基本特點，以?及在web表單設(shè)計中，這三個組件使用上有什么區(qū)別，以及常見的場景如何去選擇。
開關(guān)作為仿照物理開關(guān)的映射，提供了兩種最為簡單、直接的對立選項，比如開/關(guān)、啟動/禁用等。它就像生活中控制燈泡的開關(guān)，點擊燈泡立即亮起。所以它的意符也必須明確，不然用戶都不知道，即將要啟動/關(guān)閉什么。
蘋果的「Human Interface Guidelines」有著這么一份對于開關(guān)組件的使用規(guī)范定義，我們不妨可以借鑒。
1) 避免使用開關(guān)控制局部細節(jié)或者次要的設(shè)置。開關(guān)的視覺權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。
2) 通常不要用開關(guān)替代復(fù)選框。如果我們的規(guī)范中定義了復(fù)選框，則盡可能保持一致的使用規(guī)范。
通過上述對開關(guān)組件特點，結(jié)合蘋果組件的規(guī)范，我們基本可以梳理出以下幾條主要主要使用場景：
1）開關(guān)的標(biāo)簽意符需傳達清晰
和單選、復(fù)選框不一樣的是，因為開關(guān)主體的信息和按鈕是分離的。用戶在點擊開關(guān)按鈕前，必須清晰告知用戶點擊后會發(fā)生什么，甚至有時我們需要通過增加副標(biāo)題來加以說明。
2）一般只為立即生效的場景使用開關(guān)按鈕
在表單填寫時，往往最終會有「提交」按鈕作為結(jié)束態(tài)，開關(guān)作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕。
3）有風(fēng)險，需著重提醒用戶
開關(guān)的視覺權(quán)重較高，在復(fù)雜的表單信息中，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。
4）避免大面積使用開關(guān)，使用它控制局部細節(jié)或者次要設(shè)置
開關(guān)在視覺感知上它和按鈕上有些接近，所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容，這時推薦使用復(fù)選框來替代開關(guān)作為局部。
5）把它作為高層級內(nèi)容控制或信息設(shè)置
把它用來作為總控制來顯示更高層級內(nèi)容，避免web表單中大面積的使用開關(guān)按鈕，會和其他的基本組件造成視覺干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單的效率。
開關(guān)按鈕就像是滅霸的戒指，視覺突出且反應(yīng)快。用戶瀏覽表單、填寫內(nèi)容組之間，一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大，開關(guān)往往給用戶造成過大的視覺干擾，反而阻礙用戶瀏覽表單的效率。
讓用戶在兩個布爾值之間進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關(guān)閉…” 等問題。以下內(nèi)容主要討論單個復(fù)選框的使用情況。
1）為了便于用戶快速理解，一般復(fù)選框的標(biāo)簽內(nèi)容是一句話，不會用逗號去作隔開。
2）作為單選狀態(tài)時，操作對象和標(biāo)簽主體內(nèi)容視覺焦點是不分開的，選擇后就知道它被選中了。
3）可直接表示標(biāo)簽內(nèi)容的開啟、關(guān)閉。
1) 用戶基本清楚會發(fā)生什么，使用復(fù)選框
如果使用開關(guān)或者單選框，我們會發(fā)現(xiàn)視覺干擾特別嚴重，一般表單內(nèi)容不需要特別去強調(diào)每一個字段的開啟狀態(tài)。當(dāng)然如果排版限制，我們也是可以將復(fù)選框放到標(biāo)簽的右側(cè)（放右側(cè)復(fù)選框需對齊）。
2）表單中的復(fù)選框生效，需要配合提交按鈕
一般情況下，表單填寫中，復(fù)選框不會像開關(guān)點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。
（Ps. 在設(shè)置頁，復(fù)選框可單獨作為設(shè)置且立即生效。）復(fù)選框的主體標(biāo)簽信息和復(fù)選按鈕在一起，特別是對于批量填寫或設(shè)置一批字段，使用復(fù)選框效率更高。
3）用復(fù)選框來控制表單局部細節(jié)
如上述，如果控制對象的功能是表單的一個局部，或信息內(nèi)容不是很多，用戶也清楚知道選擇后會是什么，這時候復(fù)選框更適合。
這時我們不需要過重地給用戶強調(diào)什么，用復(fù)選框會比使用開關(guān)讓整個表單的結(jié)構(gòu)內(nèi)容更清晰。
復(fù)選框就像是一個機器小能手，它的應(yīng)用拓展性比開關(guān)更強，它既可以作為層級內(nèi)容使用，又可以作為設(shè)置項，點擊后并立即生效。
在表單中，作為局部、或者細節(jié)內(nèi)容控制，使用復(fù)選框更合適。它也不會像單選按鈕閱讀有信息阻斷的問題，不會像開關(guān)有強視覺干擾，它會讓我們的視覺焦點更集中表單信息上。
單選按鈕最早的設(shè)計模型，來源于收音機切換頻道的按鍵，當(dāng)我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態(tài)。單選按鈕可謂是涇渭分明，有你不能有我。
單選按鈕的優(yōu)點是，將所有信息條件暴露給到用戶，它不像開關(guān)在使用上帶有去猜測、探索的必要。
1）每個選擇都非常直觀，如果希望用戶閱讀完所有選項，用它再好不過了。
2）拓展性更強，相較于開關(guān)、復(fù)選框的布爾值，單選能承載兩個或兩個以上選擇。
3）必須提供默認值，且默認值可以承載內(nèi)容。
1）需要讓用戶明確知道兩者的區(qū)別，甚至需要強調(diào)兩個選項的不同
如果采用復(fù)選框，用戶需要在兩個差距較大的選項中去作思考。
2）開啟/關(guān)閉的單選狀態(tài)，使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，使用復(fù)選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關(guān)閉的狀態(tài)，推薦使用復(fù)選框
3）每個選項都關(guān)聯(lián)內(nèi)容時，使用單選按鈕
我們知道，如果默認選項設(shè)計的好，會讓很多人保持選擇默認選項。
下圖這個案例，如果采用復(fù)選框或者開關(guān)，用戶就不得不去探索思考開啟后是什么，還要擔(dān)心理解開啟/關(guān)閉后帶來的影響，而對于絕大多數(shù)用戶來說，這邊的報名設(shè)置系統(tǒng)默認內(nèi)容無需改動。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。
4）較長需隱藏拆分的內(nèi)容情況，使用單選按鈕
在表單設(shè)計中，如果遇到的內(nèi)容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔，也能夠提高用戶的瀏覽效率。
5）垂直排列單選，信息閱讀更佳
如果字段名稱較長，需要添加副標(biāo)題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉(zhuǎn)動幅度最小，信息獲取體驗更佳。如果標(biāo)簽文字較少，也可以橫排不至于占用太多的垂直空間。
單選按鈕就是白天和黑夜，互不干擾的條件，希望用戶閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的默認選項，提供的要是絕大多數(shù)用戶需要的，且是安全方便的，如果單選按鈕標(biāo)簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。
1）開關(guān)更像是一個滅霸的戒指閃閃發(fā)光，不過在表單結(jié)構(gòu)、各種控件內(nèi)容較多，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數(shù)個戒指閃亮中表單中。
2）復(fù)選框它更像是一個機器小能手，適用和拓展性極強，即可以單獨作為設(shè)置，不用配合其他提交按鈕，也可以作為表單填寫的一部分。當(dāng)我們猶豫使用哪個組件時，選擇它一般不會錯。
3）單選按鈕就像是白天和黑夜，完全不見彼此。單選條件承載的信息也較多，如果希望用戶對比感知到兩者信息的不同，那么使用單選按鈕。
4）最后理論永遠只是指導(dǎo)實踐的一部分，上述內(nèi)容可能只是在用戶認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析。
參考文獻
Nielsen Norman Group
Human Interface Guidelines
http://www.woshipm.com/pd/374314.html
http://www.woshipm.com/ucd/1267601.html
本文由 @小高雜談 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
制表單中的單選按鈕
<html>
<head>
<title>單選項</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
padding:2px; margin:0px;
}
-->
</style>
<script language="javascript">
function getChoice(){
var oForm = document.forms["myForm1"];
var aChoices = oForm.camera;
for(i=0;i<aChoices.length;i++) //遍歷整個單選項表
if(aChoices[i].checked) //如果發(fā)現(xiàn)了被選中項則退出
break;
alert("您使用的相機品牌是："+aChoices[i].value);
}
function setChoice(iNum){
var oForm = document.forms["myForm1"]; //獲取表單的節(jié)點
oForm.camera[iNum].checked = true; //設(shè)置某選項被選中
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.php">
您使用的相機品牌：
<p>
<input type="radio" name="camera" id="canon" value="Canon">
<label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
<label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony" checked>
<label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="olympus" value="Olympus">
<label for="olympus">Olympus</label>
</p>
<p>
<input type="radio" name="camera" id="samsung" value="Samsung">
<label for="samsung">Samsung</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Pentax">
<label for="pentax">Pentax</label>
</p>
<p>
<input type="radio" name="camera" id="others" value="其它">
<label for="others">others</label>
</p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
<p><input type="button" value="檢測選中對象" onclick="getChoice();">
<input type="button" value="設(shè)置為Canon" onclick="setChoice(0);"></p>
</form>
</body>
</html>設(shè)置復(fù)選框(全選、全不選、反選):
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
