首页设置一个网页，包含单选按钮：性别:”男，女”，复选按钮:”爱好:音乐，旅游，阅读”。

设置一个网页，包含单选按钮：性别:”男，女”，复选按钮:”爱好:音乐，旅游，阅读”。

时间: 2024-12-10 09:46:45 浏览: 19

创建一个包含单选按钮和复选框的网页通常涉及HTML、CSS和JavaScript的结合使用。下面是一个简单的例子，展示了如何设置这样一个表单： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>个人信息</title> <style> .container { display: flex; justify-content: space-between; } label { margin-right: 10px; } </style> </head> <body> <form id="personalInfoForm"> <div class="container"> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="男" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女"> <label for="female">女</label> <br><br> <label for="hobbies">爱好:</label> <input type="checkbox" id="music" name="hobbies" value="音乐"> <label for="music">音乐</label> <input type="checkbox" id="travel" name="hobbies" value="旅游"> <label for="travel">旅游</label> <input type="checkbox" id="reading" name="hobbies" value="阅读"> <label for="reading">阅读</label> </div> <button type="submit">提交</button> </form> <script> // 这里可以添加一些交互逻辑，如验证或处理用户提交 </script> </body> </html> ``` 在这个例子中： - 单选按钮用于选择性别，`checked`属性使得默认选项被选中。 - 复选框允许用户选择多个爱好，它们共享相同的`name`属性。

阅读全文