fieldset使用示例

最新推荐文章于 2025-06-15 23:10:10 发布

濮阳梦雪

最新推荐文章于 2025-06-15 23:10:10 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/zlj_blog/article/details/26564927

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用HTML中的fieldset元素对表单元素进行有效分组，并通过legend元素为各分组添加标题，以此提高表单的组织性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fieldset 元素可将表单内的相关元素分组。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性，可为fieldset设置边框，背景色等样式。<legend> 标签为 fieldset 元素定义标题，同样也可为其设置边框等样式。

使用fieldset标签，可以很方便的实现对元素的分组，同时可通过legend标签对各分组指定标题，简单描述各分组信息。

下面为一个简单的示例，运行效果如下：

页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>fieldSet测试</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<fieldset style="width:30%;width:30%;border:1px dashed #32cd32;">
    <legend style="background-color: #32cd32">*用户基本信息</legend>
      用户名：<input id="userName">
    <p>登录密码：<input id="password" type="password">
    <p>确认密码：<input id="passwordSnd">
    <p>    邮箱：<input id="email" type="password"><br>
    <p>    性别：<input type="radio" value="0">男  
         <input type="radio" value="1">女
</fieldset>
<fieldset style="width:30%;background-color: #d3d3d3">
    <legend style="background-color: #ffffff">教育背景</legend>
    学校名称：<input >
    <p>    时间：<input></p>
    <p>    专业：<input></p>
</fieldset>
</body>
</html>