EduCoder-Web程序设计基础-html5— 对表单元素分组-第2关：对表单元素分组

最新推荐文章于 2022-11-27 16:06:10 发布

weixin_51402180

最新推荐文章于 2022-11-27 16:06:10 发布

阅读量600

点赞数

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/weixin_51402180/article/details/121745314

版权

本教程介绍了如何使用HTML的fieldset和legend元素来对表单进行分组，以提高用户界面的可读性和可用性。示例中展示了如何创建一个名为'健康档案'的分组，并在其中添加了'身高'和'体重'的输入字段。同时，还演示了如何创建一个名为'请选择个人爱好'的分组，包含三个复选框供用户选择兴趣爱好。

摘要由CSDN通过智能技术生成

任务描述

本关任务：对表单进行分组。

编程要求

仿照上面的示例，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在之间添加legend标签为表单的分组添加题目；
2.在之间添加边框标题的设置，标题文字为“请选择个人爱好”；
3.在legend之后添加3个复选框。其name属性统一设置为“hobby”

预期输出
表单分组2

测试说明

补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

越努力越幸运，祝你成功！

代码示例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单分组</title>
 </head>
<body>
    <form>
        <!-- ********* Begin ********* -->
          <fieldset>
              <legend>请选择个人爱好</legend>
              <input  type="checkbox" name="hobby">音乐
              <input type="checkbox" name="hobby">体育
              <input type="checkbox" name="hobby">其它
          </fieldset>
        <!-- ********* End ********* -->
    </form>
</body>
</html>

weixin_51402180

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EduCoder-Web程序设计基础-html5— 对表单元素分组-第2关：对表单元素分组

目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务：对表单进行分组。相关知识为了完成本关任务，你需要掌握fieldset与legend元素来进行表单的分组。对表单进行分组fieldset为表单的一个子容器将所包含的内容以边框环绕方式显示。legend为fieldset边框添加相关的标题示例如下：健康档案身高体重界面效果如下：表单分组编程要求仿照上面的示例，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
复制链接

扫一扫