HTML复选框是一种用于让用户选择多个选项的控件,在HTML中,可以使用<input>
标签来创建复选框,以下是一个简单的示例:
<!DOCTYPE html> <html> <head> <title>复选框示例</title> </head> <body> <h1>请选择一个水果:</h1> <form> <input type="checkbox" id="apple" name="fruit" value="苹果"> <label for="apple">苹果</label><br> <input type="checkbox" id="banana" name="fruit" value="香蕉"> <label for="banana">香蕉</label><br> <input type="checkbox" id="orange" name="fruit" value="橙子"> <label for="orange">橙子</label><br> <input type="checkbox" id="grape" name="fruit" value="葡萄"> <label for="grape">葡萄</label><br> <input type="checkbox" id="watermelon" name="fruit" value="西瓜"> <label for="watermelon">西瓜</label><br> </form> </body> </html>
在这个示例中,我们使用<input>
标签创建了5个复选框,分别表示苹果、香蕉、橙子、葡萄和西瓜,每个复选框都有一个唯一的id
属性,以及一个name
属性,用于在表单提交时识别选中的复选框,我们还为每个复选框添加了一个<label>
标签,以便用户在点击复选框时能够看到对应的选项。
除了基本的复选框,还可以使用CSS来自定义复选框的外观,可以设置边框、背景颜色等样式,还可以使用JavaScript来处理复选框的状态变化,例如当用户选中或取消选中复选框时执行某些操作。