整合营销服务商

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

免费咨询热线:

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

何在Axure中实现不同元件的单选选中效果?教程详解在此,请看~~

同一选填内容的不同选项,我们可以通过拖动元件库已有的“单选按钮”,编辑选项对应需要展示的文字;然后全选所有的“单选按钮”,将他们组合并取名为某一名称;最后将此名称复制到“设置单选按钮组名称”中,即可实现效果。

以我们填写个人信息中很常见的性别选择为例。

但如果你所需要呈现的原型不是单选按钮,而是类似于菜单选中或者页码切换的展示效果,那“单选按钮”就满足不了你了

这时候我们需要自定义不同元件的单选选中效果,具体的Axure操作步骤可分解为:

第一步

拖入一个矩形元件到页面中,将其调整为你想要的形状和大小,并对其进行命名

我拖入了一个矩形,将其圆角半径设置为8,将该元件名称修改为“性别”,并在该矩形内输入想要展示的文字“男性”。

第二步

设置矩形元件的交互事件(设置鼠标单击该元件时,它的选中状态为“true”)。

第三步

设置矩形元件的交互样式(点击选中,设置选中的交互样式为白色字体,填充蓝色)。

第四步

复制刚刚设置好的矩形元件,粘贴出你所需数量的单选元件,并一一修改输入你需要元件上展示的文字内容(需要保证这些元件的命名都是统一的)。

第五步

全选中这些元件,在“设置选项组名称”中输入他们(一样的)名称后,点击F5就可以看到效果了。

原型效果:http://www.wulihub.com.cn/go/Wy3R9J/start.html(附带页码单选的原型效果)

本文由 @素小白 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

节课讲了<from>表单域,和input标签

首先先根据我们以前学习的知识构建一个基本的html网页

单选框的构造还是用的是 input标签 只不过type属性是radio

这是我们初步写成的代码

网页效果

现在两个选择框都是可以选中的

现在两个选择框都是可以选中的

但是我们想要的效果是单选框,两个选择框只有一个能被选中怎么办?

将name属性设置为一样的就可以了。

代码

另外我们还想实现网页一打开选择框1就是被默认选中的怎么办?

只需要再input标签后面再添加一个属性就可以了

是不是被默认选择大家可以自己打开网页试试看