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

（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） 时，该选项被默认选中

使用练习：

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

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

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

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

选框也是input标签中的一个类型，如果看过前面的几篇教程应该很容易理解。

直接贴代码

效果图

这个和前面的单选框一样 可以通过 checked属性来设置默认选中

多行文本框

假如一个地方需要输入很多文字的话，以前介绍的文本框，用户体验明显是不好的。

这就需要用到多行文本框标签了 <textarea>

代码

效果图

解释一下属性 cols 代表文本框每行可以容纳多少字符， rows 代表可以容纳多少行数

接下来讲一个比较特别的控件--重置控件

代码

效果图

一个按钮，会将表单域中输入的信息全部清空，回到默认属性，具体效果大家自己下去测试

天一个网友问小编，说他在用tp5提交多选框的时候获取不到多选框的值，小编今天就对这个问题写出解决方法。

我的html代码如下：

小编在测试上面代码的过程中发现，如果用官方提供的 input 助手函数去获取多选框 test 的值确实获取不到，后面仔细看了一下官方文档，发现原来如果要获取的数据为数组的话，就要加上 /a 修饰符才能正确获取到：

小编在加上修饰符后就获取到数据了，也不知道这算不算是一个BUG，下面顺便附上一些修饰符说明：

s强制转换为字符串类型

d强制转换为整型类型

b强制转换为布尔类型

a强制转换为数组类型

f强制转换为浮点类型

谢谢你的阅读，如果你有更好的方法或在应用过程中遇到问题可以在评论区提问或者直接私信我，我会定期回复，码农刘小桥与你一起学习，共同进步。