单选、多选和-Web前端开发入门（css 多选框）

100人浏览 2024-09-15 11:45:07

在Web开发时候，为了避免用户输入错误，或者是规范用户输入，往往会设置单选、多选等组件，这样可以使用户提交有固定格式的结果，本文给大家先介绍一下单选和多选框。

单选框

单选框指的是有一组多个选项，但是只能选一个结果，如下图所示：

每个Web页面可以有多组单选框，每组单选框的name值是一样的，具体代码如下：

<input type="radio" name="danxuan1" value="是">是
<input type="radio" name="danxuan1" value="否">否
<br>
<input type="radio" name="danxuan2" value="选项1">选项1
<input type="radio" name="danxuan2" value="选项2">选项2
<input type="radio" name="danxuan2" value="选项3">选项3
<input type="radio" name="danxuan2" value="选项4">选项4

其中的 value 后面的值是传给后端处理数据的，input后面的是显示的值，这两个值可以不一样，例子为了方便理解写成一样的了