html表单单选框【html单选框代码怎么写】 收藏 0

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

本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法，还有关于HTML input标签的单选默认按钮的做法。接下来我们一起来看看这篇文章吧

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

<input> 标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

话不多说，上代码实例：

这个的效果很容易看到，我们还是先看看浏览器中的显示效果吧：

这个效果一眼就能看到，很简单的一个代码

还有种是很多网站上都是经常见到的，比如：单选性别，这个基本上都是用这种单选框去制作的。代码如下：

HTML中的单选按钮实现男女性别选择，不让男女同是都能都能选择，实现方法：在按钮的属性里写一个name属性，并且把name的值设置成相同的

这个就不给图了，比上面那个还简单，就两个单选框，我们经常遇到的这个。

现在来说说HTML单选框按钮怎么默认选中：

首先我们先把第一个实例拿出来继续说，我们只需要在其中加一个属性，如下：

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

这上面我没做任何的点击，自己出现在那上面的，刷新过后还能看到在单选2上面。

我们就可以看到，这样就把单选框给默认选中了，大家可以自己试试，多敲敲代码。

好了，以上就是这篇关于html input标签做单选按钮的文章了，有问题的可以在下方提问。

以上就是html单选按钮默认选中怎么做？input标签的单选按钮用法实例的详细内容，更多请关注我！！！

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

前端入门——html 表单控件使用

上篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

• 输入类控件
• 菜单类控件

此类控件有很多种类型，使用<input type=\”类型\”>语法，常见类型如下：

文本输入框和密码框

除了显示形式不一样，其它属性一样，有以下属性：

• name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
• maxlength —— 定义文本框可输入字符最大长度
• size —— 定义文本框在页面中显示的长度
• vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码：

显示效果：

HTML5 输入类型

除了以上几种类型，HTML5 还增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

如下代码：

效果如下：

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。

如下实例：

显示效果：

单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。

普通按钮、提交按钮、重置按钮

普通按钮：type = “button”，一般配合脚本使用，语法如下：

value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。

如下示例：

单击您好按钮

提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。

如刚才的登录表单，提交后会返回结果：

重置按钮：type=\”reset\”，用于清除表单数据，也是一种特殊按钮。

输入数据

点击重置按钮后，表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：

其它输入类控件

隐藏域 —— hidden文件域 —— file

如下示例：

显示效果

可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。

除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。

如下示例：

效果如下：

rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。

下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：

多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：

多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。

如下代码：

显示效果：

这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：

到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。

还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！

上篇 ：

下篇： 前端入门 —— 网页中使用窗口框架

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com