整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要的向大家介紹了關于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前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
HTML中使用 <select> 和 <option> 元素創建選擇框。而 <select> 元素對應的是 HTMLSelectElement 接口，<option> 元素對應的是 HTMLOptionElement 接口。這兩個接口都是通過 HTMLElement 接口從其他 HTML 元素共享所有屬性和方法。
先從 <select> 元素對應的 HTMLSelectElement 接口開始介紹專屬的屬性和方法。
下面介紹一下<select> 元素根據不同選中狀態下的value屬性的值：
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>當選中選項框中的第一項時，<select> 元素的 value 值為 "Sunnyvale, CA"；而選中第四項時，<select> 元素的 value 值為 ""，因為該項的 value 屬性是空字符串；選中最后一項，則 value 值為 "Australia"，因為該 <option> 元素沒有指定 value 屬性。
因此，根據以上的例子，<select> 元素的value屬性根據以下規則獲取值：
再介紹 <option> 元素對應的 HTMLOptionElement 接口專屬屬性和方法。
這里強調一下，<select> 元素的 change 事件與其它表單字段是不一樣的。其它表單字段會在自己的值改變后觸發 change 事件，然后字段失去焦點。而 <select> 會在選中一項時立即觸發 change 事件。
對于只允許選擇一項的 <select> 元素，獲取選項最簡單的方式是使用 <select> 元素的 selectIndex 屬性，如下面的例子：
let selectedOption = selectbox.options[selectbox.selectedIndex];獲取到 <option> 元素后，就可以根據 <option> 元素的屬性和方法獲取想要的信息。
對于允許多選的 <select> 元素，selectedIndex 屬性就像只允許選擇一項一樣。設置 selectedIndex 會移除所有選項，只選擇指定的項，而獲取 selectedIndex 只會返回選中的第一項的索引。
選項還可以通過取得選項的引用并將其 selected 屬性設置為 true 來選中。例如，以下代碼會選中 <select> 的第一項：
selectbox.options[0].selected = true;與 selectedIndex 不同，設置選項的 selected 屬性不會在多選時移除其他選項，從而可以動態選擇任意多個選項。如果修改單選框中選項的 selected 屬性，則其他選項會被移除。要注意的是，把 selected 屬性設置為 false 對單選框沒有影響。
通過 selected 屬性可以確定選擇框中哪個選項被選中。要取得所有選中項，需要循環選項集合逐一檢測 selected 屬性，比如：
function getSelectedOptions(selectbox){
let result = new Array();
for (let option of selectbox.options) {
if (option.selected) {
result.push(option);
}
}
return result;
}可以使用 JavaScript 動態創建選項并將它們添加到選擇框。首先，可以使用 DOM 方法，如下所示：
let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);以上代碼創建了一個新的<option>元素，使用文本節點添加文本，設置其 value 屬性，然后將其添加到選擇框。添加到選擇框之后，新選項會立即顯示出來。
瀏覽器原生提供 Option() 構造函數創建 HTMLOptionElement 實例：
new Option(text, value, defaultSelected, selected) : HTMLOptionElement來看案例：
let newOption = new Option("Option Text", "Option Value", true);創建之后，需要將該實例添加到 HTML 的 <select> 元素中，這里有兩種添加方法：
這里詳細介紹下 add() 方法：
add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;如果想要符合所有瀏覽器的規范，可以傳入 undefined 作為第二個參數。
let newOption = new Option("Option text", "Option value", true);
selectbox.add(newOption, undefined);這里注意一下 defaultSelected 和 selected 兩個參數，有時候容易弄混。selected 屬性為 true 時，該 <option> 當前狀態處于已選擇狀態。defaultSelected 屬性為 true 時，表示 <option> 在默認情況下為已選擇狀態，但不代表 <option> 的當前狀態是已選擇狀態。當頁面重置時，selected 屬性值為 true 的 <option> 可能會變成未選擇狀態，而 defaultSelected 屬性值為 true 的 <option> 則一定會變成已選擇狀態。
移除 <option> 元素的方法也不止一種，下面列舉的方法都可以實現：
要清除選擇框的所有選項，需要迭代所有選項并逐一移除它們，如下面例子所示：
function clearSelectbox(selectbox) {
for (let index = 0; index < selectbox.options.length;) {
selectbox.remove(0);
}
}使用 DOM 操作中的 appendChild() 方法實現從一個 <select> 元素中將 <option> 移到另一個 <select> 元素中，這種實現方法會將 <option> 元素先從其父元素中移除，然后再插入指定位置。如下所示：
let selectbox1 = document.getElementById("selLocations1");
let selectbox2 = document.getElementById("selLocations2");
selecbox2.appendChild(selectbox1.options[0]);移動選項和移除選項都會導致每個 <option> 的 index 屬性重置。
重排 <option> 的話，使用 DOM 操作中的 insertBefore() 方法，而移到最后位置，還是使用 appendChild() 方法較為方便。
下面的代碼演示了將一個 <option> 在 <select> 中前移一個位置：
let optToMove = selectbox.options[1];
selectbox.insertBefore(optToMove, selectbox.options[optionToMove.index-1]);這個例子首先獲得要移動 <option> 的索引，然后將其插入之前位于它前面的 <option> 之前，其中第二行代碼適用于除第一個 <option> 之外的所有 <option>。下面的代碼則可以將<option>向下移動一個位置：
let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,
selectbox.options[optionToMove.index+2]);<select> 和 <option> 是在 HTML 頁面布局時，經常使用的表單控件，學會使用與之對應的 HTMLSelectElement 和 HTMLOptionElement 接口中的屬性和方法會很容易的操控 <select> 和 <option> 元素。借助于 DOM 操作 <select> 和 <option> 也較為方便。
前端開發中，CSS樣式經常需要覆蓋默認樣式以實現定制化的視覺效果。有時我們需要使用CSS穿透（穿透CSS）來實現這一點，特別是當我們需要修改內置元素的默認樣式時，例如select下拉菜單。下面是一個關于如何使用CSS穿透覆蓋默認樣式并實現自定義原生select控件樣式的教程。
首先，讓我們來看看如何使用CSS穿透覆蓋默認樣式。CSS穿透是一種通過在CSS中使用偽元素和子元素選擇器來覆蓋默認樣式的技術。以下是一個示例代碼：
css
復制代碼
select {
background: transparent;
border: none;
outline: none;
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
