1、实现表单单选框的功能
代码：
结果：
这里要注意几个点：
（1）这里的input标签里的type的属性值是“radio”这是选框的属性值，
（2）如果想让这一组的选择只能选择一个，要在这一组中，每一个input加上name，而且属性值相同，才能是单选选项。
单选框也可以实现点中文字选择，代码如下：
实现的代码是，将内容放在一个label的标签里，然后让这个标签指向id为1的标签，这里我们就需要给input标签加上一个id选择器，好让这个label标签指向自己，两句代码加起来的含义是：当点击非常满意时，这个标签就执行指向的标签也就是input标签。
当然，也可以实现默认情况下选择的一个值，就要用到checked属性
代码：
结果：
想让谁是默认值，可以在它input标签上加上checked=“checked”这个属性，当然当属性和属性值相同的时候，可以省略属性值，直接写一个checked就可以生效。
2、实现表单复选框的功能
代码：
结果;
复选框也就是多选，用的type属性值是“checkbox”，其他的和单选框的属性差不多，一定要写name这个属性，一组选项的name值是相同的，要想选择文字即可选中，就加上label标签，想默认选中某些值，就在input里加上checked属性即可。
3、实现上传文件和隐藏字段的功能
①实现上传文件的功能
代码：
结果：
将type的属性值改为file即可上传文件，在结果中直接点击选择文件即可上传。
有些选项不能选，是禁用的，见下图：
有些网页上不满意和非常不满意的选项是被禁用的，不能选择，这个功能怎么实现的呢，看下面：
结果：
这个结果选择不了，是禁用的状态，disabled也可以省略属性值，还有一个readonly只读功能，也是不能修改的。
②隐藏字段的功能：
input type=“image”和type=“hidden”的属性见视频：（因为不常用这里就不详细介绍了）
097-表单进阶-上传文件和隐藏字段_哔哩哔哩_bilibili
4、实现下拉菜单的功能
代码：
结果：
通过select和option联合使用，出现下拉菜单的效果
select的属性：（1）size （2）muitiple
属性一：size：含义是显示几个选项在眼前，默认是只显示一个
代码：
原来没设置size时，选项只显示一个在眼前，效果如下：
设置了size=“3”，选项显示三个在眼前，效果如下：
代码：
如果想多选，就要用到muitiple这个属性：
代码：
结果：
直接加上muitiple属性就行了，没有属性值，按住ctrl或者shift都可以实现多选。
option属性值介绍：（1）value （2）selected
value属性，这个属性一定要写，这个属性是写给后端看的，写了这个属性后端才知道你选择了那个值，例如：
selected属性，指的是默认选中的是哪个值，没有属性值，直接在option里面写上这个属性就可以
5、文本域（可以多行输入的文本框）
代码：
结果：
这里用到的文本域标签就是textarea，它有的属性看上面代码，cols控制的是文本域的列能输入几个字符宽度，rows控制的是行能输入几行，因为这个能输入多少个字符受字体大小和字体类型影响，所以我们一般不这么设置行和列，我们一般是用css设置，还有一个属性是placeholder，就是文本域提示符，属性值不是真实存在在文本域中的。还有文本域宽和高的设置，默认是宽和高都可以拉右下角变大，怎么设置它们的宽高固定呢，看下面代码：
结果：
放大前：
放大后：
即使用css固定了文本域的宽和高，它的大小也是可以通过拉右下角变大的，如果想控制宽和高固定，需要用到resize 是个属性，有四个属性值：vertical、horizontal、both、none；resize是重新设置大小的意思，vertical是设置垂直方向上的，当设置了这个属性值，就可以扩大垂直方向上的大小，而水平方向上固定大小，horizontal是扩大水平方向上的大小，高度固定，both是两个都可以扩大，也是默认值；none是都不能扩大，都固定。
还有一个value值，textarea标签的value值是写在标签内部的，也就是内容部分，所以当你标签像下面这个放的时候，其实文本域中就多了一个空行，代码如下：
正常是这样放的：
但是有些喜欢将标签上下对齐放：
这样其实结果文本域中就多了一个空行，，，
6、字段集
看上面这张图，发现最外面有一个边框而且边框上还有一个小的缺口放了文字，这个效果是怎么实现的呢，看下面代码：
结果：
有了fleldset就有了外面的边框，接着看下面的代码：
结果：
在fleldset里面加上legend就可以在边框上加上一个小缺口文字，然后我们再在里面加上我们的选项标签：
结果：
