整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

一篇文章我们说了单行文本框和多行文本框,今天呢我们继续看一下表单的其它控件:单选框、复选框、下拉框。

(1)单选框和复选框

在我们表单页面中,经常会有选择性别或者选择爱好这类的内容,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

使用语法:

单选框:<input type="radio" value="值" name="名称" checked="checked"/>

复选框:<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解:

1、type: 当 type="radio" 时,控件为单选框;当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序使用)

3、name:为控件命名,这里要注意同一组的单选按钮,name 取值一定要一致(具体可见下边的参考练习)。

4、checked:当设置 checked="checked"(也可以直接简写成checked) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含姓别(男、女)选择的单选框,默认选中男以及爱好(唱歌、打游戏、绘画、旅游)选择的多选框,默认选中唱歌。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

(2)下拉框

下拉框也是我们常用的一个表单控件,多用于选择城市地区等。

使用语法:

<select>

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解:

1、option:option为select下拉子元素,可以有一个或多个,写法类似ul和li,其中的value内容为提交数据到服务器的值(后台程序使用)

2、selected:当设置 selected="selected"(也可以直接简写成selected) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含一个城市的下拉框,下拉框中有北京、上海、天津这三个城市,其中默认选中天津。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

好了,本篇文章就先给大家介绍这几个表单控件的语法以及使用,下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示,记得平时要多加练习才是王道。

每日金句:做人要像竹子一样每前进一步,都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

猪脚本(原飞猪脚本)以按键精灵教学为主,涉及UiBot,Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚本以及网赚脚本等各个领域。想学习按键精灵的朋友可以添加金猪脚本粉丝交流群:554127455 学习路上不再孤单,金猪脚本伴你一同成长.

1.什么是网页元素特征字符串?

请参考网页特征字符串详解;

2.Html系列命令

2.1.HtmlSelect命令

1)HtmlSelect命令只能够根据Select项的值来进行选择,注意这里不是显示在Select项上的文字,而是该项的value。

一个典型的下拉框HTML代码如下:

<select name="city">

<option value="1">北京</option>

<option value="2">上海</option>

<option value="3">广州</option>

</select>

这里如果要选择上海,需要选择值为2的项;

2)级联的下拉列表组合。

在有的网页中,会有几个级联的下拉列表,后一个下拉框会随前一个框的值变化而发生变化,典型的有注册页面上的省份城市选择,HtmlSelect命令能够触发Onchange事件,会导致后一个下拉框值发生变化,但是如果执行脚本太快,而导致后一个未能选中正确的值,可以在前一个HtmlSelect后加上适当的延时;

3)多选表单中的列表控件;有的列表支持多选,在有一些个求职网站中,职业是可以多选的,这时候可以用%将多个需要选择的值连接起来传递给HtmlSelect命令实现多选;

2.2.HtmlExists命令

HtmlExists命令,能够判断指定特征的元素是否存在,并能够返回具备该特征的元素的个数。这个命令能够用来判断某个元素是否存在,如果为0证明不存在;

2.3.HtmlGet命令

HtmlGet命令比较复杂,但是功能也非常强大,该命令具备两个参数,第一个参数为获取类型,目前支持的值如下所示:

序号 值 适用对象

1 text 得到指定元素的文本值,对应DOM属性innerText

2 html 得到指定元素内部的HTML代码,对应DOM属性innerHTML

3 outerHtml 得到元素整体的HTML代码,对应DOM属性的outerHTML

4 value 得到元素的Value值,用于获取表单元素内部的值

5 src 得到图像元素的src属性,用于IMG标签对象

6 href 得到链接元素的链接地址,用于A标签

7 …其他名称 其他属性,如果您使用的是合法的属性名称,就能够返回对应的值。如何才是合法的属性?请参阅HTML标准。

第二个参数为特征字符串,如果匹配多个,只能返回第一个元素的值;

例如,获得淘宝货物价格:

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

获取某个表单文本的值

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

2.4.RunJS命令

RunJS命令提供了直接运行Javascript的功能,如果您对JS非常熟悉,就能够极大的扩展WQM的功能。

RunJS命令支持两中执行方式,第一个参数设置为0时,能够执行一段没有返回值的Javascript,

例如:

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

第一个参数设置为1时,能执行一段js并返回由return语句返回的值,返回值为字符串类型;

例如:返回Html文档的title;

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

如果您分析到网页中某个按钮实际上就是执行了一个函数,例如

<input type="Button" … />

您就可以直接调用

RunJS(0,"dosomething();")

JQuery的支持,网页按键精灵集成了Jquery1.3.2,为了不与其他JQ的库发生冲突,使用了wqmjq来代替$操作符,如果您需要直接使用JQ来操作网页,可使用wqmjq来执行Jquery语句:

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