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

选按钮

单选按钮主要是让网页浏览者在一组选项里只能选择一个。代码格式如下。

其中type="radio"定义单选按钮；name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；value属性定义单选按钮的值，在同一组中域值必须是不同。

（1）编写代码如下图所示，在<body>标签中加入以下代码。

（2）在浏览器中打开文件，预览效果图如下所示，即可看到5个单选按钮，用户只能同时选择其中一个。

复选框

复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立的元素，都必须有唯一的一个名称。代码格式如下。

其中type="checkbox"定义复选框；name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。

（1）编写代码如下图所示，在<body>标签中加入以下代码。

（2）在浏览器中打开文件，预览效果图如下所示，即可看到5个复选框，其中【人生大事】和【广告专区】复选框被选中。

TML 背景

设置背景颜色<body bgcolor="#000000">

设置背景图片<body background="bg.jpg">

设置页面文字颜色<body text="#cccccc">

颜色属性值有三种值的格式

1，英文单词，比如 red , yellow ,green …

2, 十六进制表示方式，#开头，6个十六进制的字符或数字组合

比如：#FFFFFF，#000000，#CCCAAA，#22BCAD

十六进制： 0-9 和 a-f

3, RGB模式，红 0-255，绿 0-255，蓝 0-255

比如： RGB(120,33,234)

HTML 表单

表单是一个包含表单元素的区域。

表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。

表单使用标签（<form>）定义。

表单用于向服务器传输数据。

表单的结构

用户名：<input type="text" name="uname" />

密码：<input type="password" name="passwd" />

</form>

属性说明

name表单的名称

action表单提交地址

method表单数据提交的方式（get ,post）

enctypeMIME类型

target打开方式

input标签

属性说明

typeinput元素类型

nameinput 元素的名称

valueinput 元素的值

sizeinput 元素的宽度

readonly是否只读

maxlength输入字符的最大长度

disabled是否禁用

1.文本框

2.密码框

3.单选按钮

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

4.复选框

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐

<input type="checkbox"name="love" value="movie"/> 看电影

<input type="checkbox"name="love" value="game"/> 玩游戏

5.按钮

6. 隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

7. 上传文件

注：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

<textarea> 多行文本框

属性说明

name元素的名称

rows指定文本框的高度

cols指定文本框的宽度

select下拉列表框

<option value="0">请选择</option

</select>

属性说明

name下拉列表框的名称

size下拉列表框的显示行数

multiple是否多选

disabled是否禁用

selected设置默认选中的选项

value选项的值

optgroup标签

optgroup 元素用于组合选项。

属性说明

label指定组合选项名称

fieldset标签

fieldset 标签作用是把表单中元素组合起来

<legend></legend> length为字符长度

</fieldset>

label标签

lable 标签的作用是将输入项或选项及其标签文字关联起来。

在线咨询

上一篇：HTML DOM Blockquote 对象
下一篇：html基础必备-分隔标记，前端小白一看就会

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html单选按钮默认选中怎么做？input标签的单选按钮实例

首先我们介绍的是在html input标签中的单选按钮的做法：

话不多说，上代码实例：

效果依旧很明显，看效果图：

选按钮

复选框

您的项目需求