html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕實(shí)例

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

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

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

話不多說，上代碼實(shí)例：

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

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

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

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

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

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

這個(gè)就不給圖了，比上面那個(gè)還簡單，就兩個(gè)單選框，我們經(jīng)常遇到的這個(gè)。

現(xiàn)在來說說HTML單選框按鈕怎么默認(rèn)選中：

首先我們先把第一個(gè)實(shí)例拿出來繼續(xù)說，我們只需要在其中加一個(gè)屬性，如下：

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

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

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

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

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

以上就是html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕用法實(shí)例的詳細(xì)內(nèi)容，更多請關(guān)注我！！！

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

一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：單選框、復(fù)選框、下拉框。

（1）單選框和復(fù)選框

在我們表單頁面中，經(jīng)常會(huì)有選擇性別或者選擇愛好這類的內(nèi)容，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

使用語法：

單選框：<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 取值一定要一致（具體可見下邊的參考練習(xí)）。

4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡寫成checked）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含姓別（男、女）選擇的單選框，默認(rèn)選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認(rèn)選中唱歌。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

（2）下拉框

下拉框也是我們常用的一個(gè)表單控件，多用于選擇城市地區(qū)等。

使用語法：

<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>

</select>

詳細(xì)講解：

1、option：option為select下拉子元素，可以有一個(gè)或多個(gè)，寫法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡寫成selected）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含一個(gè)城市的下拉框，下拉框中有北京、上海、天津這三個(gè)城市，其中默認(rèn)選中天津。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

好了，本篇文章就先給大家介紹這幾個(gè)表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示，記得平時(shí)要多加練習(xí)才是王道。

每日金句：做人要像竹子一樣每前進(jìn)一步，都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

豬腳本（原飛豬腳本）以按鍵精靈教學(xué)為主,涉及UiBot，Python,Lua等腳本編程語言,教學(xué)包括全自動(dòng)辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁腳本,安卓腳本,IOS腳本,注冊腳本,點(diǎn)贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個(gè)領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長.

1.什么是網(wǎng)頁元素特征字符串？

請參考網(wǎng)頁特征字符串詳解；

2.Html系列命令

2.1.HtmlSelect命令

1）HtmlSelect命令只能夠根據(jù)Select項(xiàng)的值來進(jìn)行選擇，注意這里不是顯示在Select項(xiàng)上的文字，而是該項(xiàng)的value。

一個(gè)典型的下拉框HTML代碼如下：

</select>

這里如果要選擇上海，需要選擇值為2的項(xiàng)；

2）級(jí)聯(lián)的下拉列表組合。

在有的網(wǎng)頁中，會(huì)有幾個(gè)級(jí)聯(lián)的下拉列表，后一個(gè)下拉框會(huì)隨前一個(gè)框的值變化而發(fā)生變化，典型的有注冊頁面上的省份城市選擇，HtmlSelect命令能夠觸發(fā)Onchange事件，會(huì)導(dǎo)致后一個(gè)下拉框值發(fā)生變化，但是如果執(zhí)行腳本太快，而導(dǎo)致后一個(gè)未能選中正確的值，可以在前一個(gè)HtmlSelect后加上適當(dāng)?shù)难訒r(shí)；

3）多選表單中的列表控件；有的列表支持多選，在有一些個(gè)求職網(wǎng)站中，職業(yè)是可以多選的，這時(shí)候可以用%將多個(gè)需要選擇的值連接起來傳遞給HtmlSelect命令實(shí)現(xiàn)多選；

2.2.HtmlExists命令

HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個(gè)數(shù)。這個(gè)命令能夠用來判斷某個(gè)元素是否存在，如果為0證明不存在；

2.3.HtmlGet命令

HtmlGet命令比較復(fù)雜，但是功能也非常強(qiáng)大，該命令具備兩個(gè)參數(shù)，第一個(gè)參數(shù)為獲取類型，目前支持的值如下所示：

序號(hào) 值適用對(duì)象

1 text 得到指定元素的文本值，對(duì)應(yīng)DOM屬性innerText

2 html 得到指定元素內(nèi)部的HTML代碼，對(duì)應(yīng)DOM屬性innerHTML

3 outerHtml 得到元素整體的HTML代碼，對(duì)應(yīng)DOM屬性的outerHTML

4 value 得到元素的Value值，用于獲取表單元素內(nèi)部的值

5 src 得到圖像元素的src屬性，用于IMG標(biāo)簽對(duì)象

6 href 得到鏈接元素的鏈接地址，用于A標(biāo)簽

7 …其他名稱其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對(duì)應(yīng)的值。如何才是合法的屬性？請參閱HTML標(biāo)準(zhǔn)。

第二個(gè)參數(shù)為特征字符串，如果匹配多個(gè)，只能返回第一個(gè)元素的值；

例如，獲得淘寶貨物價(jià)格：

Plugin price=Web.HtmlGet("text","id:id_Price")

獲取某個(gè)表單文本的值

Plugin email=Web.HtmlGet("value","name:Email")

2.4.RunJS命令

RunJS命令提供了直接運(yùn)行Javascript的功能，如果您對(duì)JS非常熟悉，就能夠極大的擴(kuò)展WQM的功能。

RunJS命令支持兩中執(zhí)行方式，第一個(gè)參數(shù)設(shè)置為0時(shí)，能夠執(zhí)行一段沒有返回值的Javascript，

例如：

RunJS(0,"alert('hello');")

第一個(gè)參數(shù)設(shè)置為1時(shí)，能執(zhí)行一段js并返回由return語句返回的值，返回值為字符串類型；

例如：返回Html文檔的title；

RunJS(1,"var t=document.title;return t;")

如果您分析到網(wǎng)頁中某個(gè)按鈕實(shí)際上就是執(zhí)行了一個(gè)函數(shù)，例如

您就可以直接調(diào)用

RunJS(0,"dosomething();")

JQuery的支持，網(wǎng)頁按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫發(fā)生沖突，使用了wqmjq來代替$操作符，如果您需要直接使用JQ來操作網(wǎng)頁，可使用wqmjq來執(zhí)行Jquery語句：

RunJS(0,"wqmjq('#test').click();")

在線咨詢

上一篇：HTML5實(shí)現(xiàn)大文件上傳下載
下一篇：七光源標(biāo)準(zhǔn)光源對(duì)色燈箱配置

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。