html使用css在列表项中添加复选框或单选框

80次阅读
没有评论

在HTML中,您可以使用<input>元素来添加复选框或单选框到列表项中。以下是一个示例HTML页面,其中包含一个带有复选框和单选框的列表:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Checkbox and Radio Button List Example</title>
</head>
<body>
<h1>Checkbox and Radio Button List Example</h1>
<p>This is an example of a list with checkboxes and radio buttons.</p>
<h2>Checkbox List</h2>
<ul>
    <li><input type="checkbox" id="item1" name="item1" value="item1"><label for="item1">Item 1</label></li>
    <li><input type="checkbox" id="item2" name="item2" value="item2"><label for="item2">Item 2</label></li>
    <li><input type="checkbox" id="item3" name="item3" value="item3"><label for="item3">Item 3</label></li>
</ul>
<h2>Radio Button List</h2>
<ul>
    <li><input type="radio" id="option1" name="options" value="option1"><label for="option1">Option 1</label></li>
    <li><input type="radio" id="option2" name="options" value="option2"><label for="option2">Option 2</label></li>
    <li><input type="radio" id="option3" name="options" value="option3"><label for="option3">Option 3</label></li>
</ul>
</body>
</html>

在这个示例中,我们在每个列表项中添加了一个<input>元素,并将其类型分别设置为checkbox和radio。我们还为每个<input>元素添加了一个唯一的id属性,并将name属性设置为相同的值,以便这些复选框或单选框可以被分组。 最后,我们使用<label>元素将标签文本和<input>元素关联起来,使其可以被选中。请注意,<label>元素的for属性应设置为相应<input>元素的id属性。

正文完
 
评论(没有评论)