浏览 76
扫码
复选框(Checkbox)是 HTML 表单中的一种标签,允许用户在一组给定的选项中进行多项选择。在 HTML 5 中,复选框的语法非常简单,可以通过 <input type="checkbox">
标签来创建一个复选框。
下面是一个基本的复选框示例:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<h2>Select your favourite fruits:</h2>
<form>
<input type="checkbox" id="apple" name="fruits" value="apple">
<label for="apple">Apple</label><br>
<input type="checkbox" id="banana" name="fruits" value="banana">
<label for="banana">Banana</label><br>
<input type="checkbox" id="orange" name="fruits" value="orange">
<label for="orange">Orange</label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
在上面的示例中,我们创建了一个包含苹果、香蕉和橙子复选框的表单。每个复选框都有一个唯一的 id、name 和 value 属性。 id 属性用于与 label 元素关联, name 属性用于标识表单中的字段, value 属性表示该选项的值。
用户可以选择多个复选框,然后点击提交按钮将选择的值发送到服务器端进行处理。
在实际应用中,可以使用 JavaScript 来处理复选框的选择状态。以下是一个简单的 JavaScript 代码示例,用于检查用户是否选择了某个复选框:
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var selectedFruits = document.querySelectorAll('input[name="fruits"]:checked');
var selectedValues = [];
selectedFruits.forEach(function(fruit) {
selectedValues.push(fruit.value);
});
alert('Selected fruits: ' + selectedValues.join(', '));
});
</script>
在上面的代码中,我们首先获取了所有被选中的复选框,然后将它们的值存储在一个数组中,并最终使用 alert 函数显示用户所选择的水果。
希望这个简单的教程对您有所帮助,如果您有任何疑问,请随时询问。