HTML中的单选按钮与复选框

HTML中的单选按钮与复选框是用来收集用户输入的两种常见方式，它们属于表单元素的范畴。本文将介绍如何在HTML中使用单选按钮与复选框。

单选按钮

单选按钮是用来从多个选项中选择单一选项的表单元素。它们也被称为单选框或单选项。

基本语法

以下是单选按钮的基本语法：

<input type="radio" name="选择项的名称" value="选择项的值">选择项的标签

其中，type属性必须设置为radio，name属性为单选按钮组的名称，所有同一组内的单选按钮必须有相同的名称。value属性为该单选按钮的值。选择项的标签则为该单选按钮的标签，用于显示在页面上。

示例代码

以下示例代码演示了如何创建两个单选按钮，它们从相同的选项中选择不同的值：

<form>
    <input type="radio" name="gender" value="male">男性
    <input type="radio" name="gender" value="female">女性
</form>

属性

单选按钮还有其他常用的属性：

• checked属性：如果设置为checked，则该单选按钮一开始就会被选中。
• disabled属性：如果设置为disabled，则该单选按钮被禁用，用户无法选中它。
• required属性：如果设置为required，则该单选按钮为必填项。

复选框

复选框是用来从多个选项中选择多个选项的表单元素。

基本语法

以下是复选框的基本语法：

<input type="checkbox" name="选择项的名称" value="选择项的值">选择项的标签

其中，type属性必须设置为checkbox，name属性为复选框组的名称，所有同一组内的复选框必须有相同的名称。value属性为该复选框的值。选择项的标签则为该复选框的标签，用于显示在页面上。

示例代码

以下示例代码演示了如何创建两个复选框，它们从相同的选项中选择不同的值：

<form>
    <input type="checkbox" name="hobby" value="reading">阅读
    <input type="checkbox" name="hobby" value="music">音乐
</form>

属性

复选框还有其他常用的属性：

• checked属性：如果设置为checked，则该复选框一开始就会被选中。
• disabled属性：如果设置为disabled，则该复选框被禁用，用户无法选中它。
• required属性：如果设置为required，则至少要选中其中一个复选框才能提交表单。

总结

本文介绍了HTML中的单选按钮与复选框的基本语法和常用属性。开发者可以根据自己的需求，在表单中灵活运用这两种表单元素，以便收集用户输入。