在HTML中,多选框和单选框可以分别通过<input>标签的不同type属性来定义。多选框使用type=”checkbox”,而单选框使用type=”radio”。
下面是一个简单的多选框和单选框示例:
<fieldset>
<legend>选择你喜欢的食物:</legend>
<label><input type="checkbox" name="food" value="pizza">披萨</label>
<label><input type="checkbox" name="food" value="hamburger">汉堡</label>
<label><input type="checkbox" name="food" value="hotdog">热狗</label>
</fieldset>
<fieldset>
<legend>你喜欢的动物是:</legend>
<label><input type="radio" name="animal" value="cat">猫</label>
<label><input type="radio" name="animal" value="dog">狗</label>
<label><input type="radio" name="animal" value="hamster">仓鼠</label>
</fieldset>
上述代码中,<fieldset>标签用于把多选框和单选框分组,并使用<legend>标签来定义组的标题。每个选项使用一个<label>标签来包裹<input>标签,这样用户在点击标签时也可以触发选项的选择。
每个选项的name属性相同,这样可以把它们分组在一起,方便一次性获取用户的选择结果。value属性定义了选项的值,这个值在表单提交时会作为参数值。
下面是一个更加完整的示例,包括了上述属性的使用:
<fieldset>
<legend>选择你喜欢的运动:</legend>
<label><input type="checkbox" name="sport" value="football" checked>足球</label>
<label><input type="checkbox" name="sport" value="basketball">篮球</label>
<label><input type="checkbox" name="sport" value="tennis">网球</label>
</fieldset>
<fieldset>
<legend>你喜欢的颜色是:</legend>
<label><input type="radio" name="color" value="red">红色</label>
<label><input type="radio" name="color" value="green">绿色</label>
<label><input type="radio" name="color" value="blue" checked>蓝色</label>
</fieldset>
在这个示例中,多选框的第一个选项使用了checked属性,表示默认选中。单选框的第三个选项也使用了checked属性,表示默认选中。这些属性可以让表单的初始状态更加符合用户的预期。
正文完