html單選按鈕默認選中怎么做？input標簽的單選按鈕實例

篇文章主要的向大家介紹了關于html input標簽的單選按鈕的使用方法，還有關于HTML input標簽的單選默認按鈕的做法。接下來我們一起來看看這篇文章吧

首先我們介紹的是在html input標簽中的單選按鈕的做法：

<input> 標簽用于搜集用戶信息。根據不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

話不多說，上代碼實例：

> <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>

這個的效果很容易看到，我們還是先看看瀏覽器中的顯示效果吧：

這個效果一眼就能看到，很簡單的一個代碼

還有種是很多網站上都是經常見到的，比如：單選性別，這個基本上都是用這種單選框去制作的。代碼如下：

HTML中的單選按鈕實現男女性別選擇，不讓男女同是都能都能選擇，實現方法：在按鈕的屬性里寫一個name屬性，并且把name的值設置成相同的

> <input id="man" type="radio" checked="checked" name="1" />男
> 
> <input id="woman" type="radio" name="1"/>女

這個就不給圖了，比上面那個還簡單，就兩個單選框，我們經常遇到的這個。

現在來說說HTML單選框按鈕怎么默認選中：

首先我們先把第一個實例拿出來繼續說，我們只需要在其中加一個屬性，如下：

> <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>

效果依舊很明顯，看效果圖：

這上面我沒做任何的點擊，自己出現在那上面的，刷新過后還能看到在單選2上面。

我們就可以看到，這樣就把單選框給默認選中了，大家可以自己試試，多敲敲代碼。

好了，以上就是這篇關于html input標簽做單選按鈕的文章了，有問題的可以在下方提問。

以上就是html單選按鈕默認選中怎么做？input標簽的單選按鈕用法實例的詳細內容，更多請關注我！！！

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

輯導語：如何針對具體場景選擇合適的組件，是web表單設計中的常見問題。那么，你知道開關、單選、復選框等組件的適用場景該如何選擇嗎？本篇文章里，作者就該問題做了詳細解答，一起來看一下吧。

在web表單設計中，我們會經常遇到在開關、單選、復選框三個組件的選擇使用上糾結，特別是只有兩種狀態下，比如開啟/關閉、啟用/關閉、顯示/隱藏、同意/不同意、默認/自定義……

我們發現使用Switch開關、Radio單選和Checkbox復選這三個組件好像也都是可以的，這時應該選擇哪個組件更合適呢？

本文主要探討這三個組件的基本特點，以?及在web表單設計中，這三個組件使用上有什么區別，以及常見的場景如何去選擇。

文章概覽

一、Switch 開關?它就像是滅霸的響指

1. 簡要了解開關

開關作為仿照物理開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。它就像生活中控制燈泡的開關，點擊燈泡立即亮起。所以它的意符也必須明確，不然用戶都不知道，即將要啟動/關閉什么。

2.開關組件的特點

對象標簽名稱須傳達清晰，能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么；
主體標簽信息和按鈕是分離的，兩個視覺焦點；
一般點擊后會立即反饋；
沒有hovering效果，有動作效果，更適合手指操作；
非W3C組織官方html標記，極端情況不支持 Javascript。

3. 蘋果公司對開關組件的設計規范

蘋果的「Human Interface Guidelines」有著這么一份對于開關組件的使用規范定義，我們不妨可以借鑒。

1) 避免使用開關控制局部細節或者次要的設置。開關的視覺權重比較高，所以用它控制內容較多更為合適，比如可以將它作為總開關打開或關閉一組設置。

2) 通常不要用開關替代復選框。如果我們的規范中定義了復選框，則盡可能保持一致的使用規范。

4. 開關使用場景舉例

通過上述對開關組件特點，結合蘋果組件的規范，我們基本可以梳理出以下幾條主要主要使用場景：

1）開關的標簽意符需傳達清晰

和單選、復選框不一樣的是，因為開關主體的信息和按鈕是分離的。用戶在點擊開關按鈕前，必須清晰告知用戶點擊后會發生什么，甚至有時我們需要通過增加副標題來加以說明。

2）一般只為立即生效的場景使用開關按鈕

在表單填寫時，往往最終會有「提交」按鈕作為結束態，開關作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕。

3）有風險，需著重提醒用戶

開關的視覺權重較高，在復雜的表單信息中，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。

4）避免大面積使用開關，使用它控制局部細節或者次要設置

開關在視覺感知上它和按鈕上有些接近，所以盡可能避免在表單中大量使用開關來控制局部層級內容，這時推薦使用復選框來替代開關作為局部。

5）把它作為高層級內容控制或信息設置

把它用來作為總控制來顯示更高層級內容，避免web表單中大面積的使用開關按鈕，會和其他的基本組件造成視覺干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單的效率。

5. 小結

開關按鈕就像是滅霸的戒指，視覺突出且反應快。用戶瀏覽表單、填寫內容組之間，一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大，開關往往給用戶造成過大的視覺干擾，反而阻礙用戶瀏覽表單的效率。

二、Checkbox 復選框? 它是一個機器小能手

1. 簡要了解復選框

讓用戶在兩個布爾值之間進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。以下內容主要討論單個復選框的使用情況。

2.復選框的特點

1）為了便于用戶快速理解，一般復選框的標簽內容是一句話，不會用逗號去作隔開。

2）作為單選狀態時，操作對象和標簽主體內容視覺焦點是不分開的，選擇后就知道它被選中了。

3）可直接表示標簽內容的開啟、關閉。

3. 場景舉例分析

1) 用戶基本清楚會發生什么，使用復選框

如果使用開關或者單選框，我們會發現視覺干擾特別嚴重，一般表單內容不需要特別去強調每一個字段的開啟狀態。當然如果排版限制，我們也是可以將復選框放到標簽的右側（放右側復選框需對齊）。

2）表單中的復選框生效，需要配合提交按鈕

一般情況下，表單填寫中，復選框不會像開關點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。

（Ps. 在設置頁，復選框可單獨作為設置且立即生效。）復選框的主體標簽信息和復選按鈕在一起，特別是對于批量填寫或設置一批字段，使用復選框效率更高。

3）用復選框來控制表單局部細節

如上述，如果控制對象的功能是表單的一個局部，或信息內容不是很多，用戶也清楚知道選擇后會是什么，這時候復選框更適合。

這時我們不需要過重地給用戶強調什么，用復選框會比使用開關讓整個表單的結構內容更清晰。

4. 小結

復選框就像是一個機器小能手，它的應用拓展性比開關更強，它既可以作為層級內容使用，又可以作為設置項，點擊后并立即生效。

在表單中，作為局部、或者細節內容控制，使用復選框更合適。它也不會像單選按鈕閱讀有信息阻斷的問題，不會像開關有強視覺干擾，它會讓我們的視覺焦點更集中表單信息上。

三、Radio 單選按鈕? 白天不懂夜的黑

1. 簡要了解單選按鈕

單選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態。單選按鈕可謂是涇渭分明，有你不能有我。

2. 單選按鈕的特點

單選按鈕的優點是，將所有信息條件暴露給到用戶，它不像開關在使用上帶有去猜測、探索的必要。

1）每個選擇都非常直觀，如果希望用戶閱讀完所有選項，用它再好不過了。

2）拓展性更強，相較于開關、復選框的布爾值，單選能承載兩個或兩個以上選擇。

3）必須提供默認值，且默認值可以承載內容。

3. 場景舉例分析

1）需要讓用戶明確知道兩者的區別，甚至需要強調兩個選項的不同

如果采用復選框，用戶需要在兩個差距較大的選項中去作思考。

2）開啟/關閉的單選狀態，使用復選框

復選框對于絕大多數用戶都是非常清楚，使用復選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關閉的狀態，推薦使用復選框

3）每個選項都關聯內容時，使用單選按鈕

我們知道，如果默認選項設計的好，會讓很多人保持選擇默認選項。

下圖這個案例，如果采用復選框或者開關，用戶就不得不去探索思考開啟后是什么，還要擔心理解開啟/關閉后帶來的影響，而對于絕大多數用戶來說，這邊的報名設置系統默認內容無需改動。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。

4）較長需隱藏拆分的內容情況，使用單選按鈕

在表單設計中，如果遇到的內容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔，也能夠提高用戶的瀏覽效率。

5）垂直排列單選，信息閱讀更佳

如果字段名稱較長，需要添加副標題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉動幅度最小，信息獲取體驗更佳。如果標簽文字較少，也可以橫排不至于占用太多的垂直空間。

4. 小結

單選按鈕就是白天和黑夜，互不干擾的條件，希望用戶閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的默認選項，提供的要是絕大多數用戶需要的，且是安全方便的，如果單選按鈕標簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。

四、全文總結

1）開關更像是一個滅霸的戒指閃閃發光，不過在表單結構、各種控件內容較多，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數個戒指閃亮中表單中。

2）復選框它更像是一個機器小能手，適用和拓展性極強，即可以單獨作為設置，不用配合其他提交按鈕，也可以作為表單填寫的一部分。當我們猶豫使用哪個組件時，選擇它一般不會錯。

3）單選按鈕就像是白天和黑夜，完全不見彼此。單選條件承載的信息也較多，如果希望用戶對比感知到兩者信息的不同，那么使用單選按鈕。

4）最后理論永遠只是指導實踐的一部分，上述內容可能只是在用戶認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析。

參考文獻

Nielsen Norman Group

Human Interface Guidelines

http://www.woshipm.com/pd/374314.html

http://www.woshipm.com/ucd/1267601.html

本文由 @小高雜談原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

制表單中的單選按鈕


<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) //如果發現了被選中項則退出
    break;
    alert("您使用的相機品牌是："+aChoices[i].value);
}
function setChoice(iNum){
    var oForm = document.forms["myForm1"]; //獲取表單的節點
    oForm.camera[iNum].checked = true; //設置某選項被選中
}
</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="設置為Canon" onclick="setChoice(0);"></p>
</form>
</body>
</html>

設置復選框(全選、全不選、反選):

在線咨詢

上一篇：<03>WEB基礎面試題-HTML、CSS
下一篇：css實現的立方體自動循環翻轉動畫html頁面源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html單選按鈕默認選中怎么做？input標簽的單選按鈕實例

首先我們介紹的是在html input標簽中的單選按鈕的做法：

話不多說，上代碼實例：

效果依舊很明顯，看效果圖：

文章概覽

一、Switch 開關?它就像是滅霸的響指

1. 簡要了解開關

2.開關組件的特點

3. 蘋果公司對開關組件的設計規范

4. 開關使用場景舉例

5. 小結

二、Checkbox 復選框? 它是一個機器小能手

1. 簡要了解復選框

2.復選框的特點

3. 場景舉例分析

4. 小結

三、Radio 單選按鈕? 白天不懂夜的黑

1. 簡要了解單選按鈕

2. 單選按鈕的特點

3. 場景舉例分析

4. 小結

四、全文總結

您的項目需求