组框：<fieldset> 标签

最新推荐文章于 2025-04-07 19:43:00 发布
原创 最新推荐文章于 2025-04-07 19:43:00 发布 · 542 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#fieldset

本文介绍如何利用HTML中的fieldset元素对表单中的相关元素进行分组，并通过实例展示了如何定义fieldset及其标题legend，帮助改善表单的可读性和用户体验。

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

这个标签很少用到，不过实际运用中可以得到意想不到的效果，如：


定义和用法

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

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

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
 
<body>
 
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>
 
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
 
</body>
</html>

实例效果：


HTML ＜fieldset＞ 标签
玄链教育
06-13 1176
fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 标签没有必需的或唯一的属性。
fieldset的用法
甜筒八部 的专栏
08-17 1561
CSS中fieldset legend标签的用法，这个几乎被网页设计师遗忘的标签…… fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。 fieldset：对表单进行分组，一个表单可以有多个fieldset。fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。
HTML 标签
faunjoe的专栏
09-02 396
fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 标签没有必需的或唯一的属性。 标签为 fieldset 元素定义标题。定义和用法legend 元素为 fieldset 元素定义标题（c
fieldset边框样式无效解决方案
行云流水
10-08 6705
问题重现原因分析 浏览器版本太旧了 由于bootstrap重写了fieldset和其中的legend，那么样式就会变成了”标题”下面一条分割线 解决方案在使用到该fieldset的时候加上下面样式 <style> fieldset { padding: .35em .625em .75em; margin: 0 2px;
html中fieldset边框样式设置
热门推荐
qq_42926749的博客
09-03 1万+
fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。 fieldset元素元素是块元素。 并且需要关闭标签，即必须成对出现。 form#staff_info fieldset { background: rgba(255,255,255,.3); ...
在 HTML 中，＜fieldset＞和＜legend＞标签的组合使用有什么意义，在表单布局中有何优势？
最新发布
前端大白话
04-07 1203
在 HTML 表单里， 和 标签就像是一对好搭档，能让表单的结构更清晰、更有条理。咱们先说说它们各自是干啥的，再看看它们组合起来有啥厉害的地方。 标签就像一个小盒子，它能把表单里相关的元素都装在一起。比如，在一个注册表单里，你可以用 把所有和个人信息相关的输入框都框起来，这样一眼看上去就很清楚。 标签则像是这个小盒子的标签，它会给这个 区域起个名字。你在 标签里写的内容，就会显示在这个区域的左上角，让用户一下子就知道这个区域是干啥的。下面是一个例子，我在每句代码上面都加了注释，你一看就明白啦： 组合
html 隐藏整个fieldset,HTML: <fieldset> 标签
weixin_39955938的博客
06-03 815
在线示例对表单中的相关元素进行分组：示例html>HTML5fieldset标签的使用(基础教程网nhooo.com)客户资料(nhooo.com)名称:地址:电话号码:测试看看 ‹/›运行后效果如下：浏览器兼容性IEFirefoxOperaChromeSafari所有主流浏览器都支持 标签。标签定义及使用说明 标签可以将表单内的相关元素分组。 标签会在相关表单元素周围绘制边框。...
＜fieldset＞ 标签
YNanzhi的博客
03-16 1748
<fieldset> 标签可以将表单内的相关元素分组。 <fieldset> 标签会在相关表单元素周围绘制边框。 <legend> 标签为 <fieldset> 元素定义标题。 属性： disabled 值：disabled 描述：规定该组中的相关表单元素应该被禁用。 2.form 值：form_id 描述：规定 fieldset 所属的一个或多个表单。 3.name 值：text 描述：规定 fieldset 的名称。 ...
HTML文本与选择控件标签详解：<textarea>, <select>, <option>
- `<legend>`：用于定义`<fieldset>`标签组的标题，通常配合`<fieldset>`一起使用，提供对表单字段的分组说明。 HTML与XHTML的区别： - HTML和XHTML都是标记语言，但XHTML更加规范，要求严格的结构和语法，推荐...
<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码：</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码：</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别：</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历：</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称：</label><input type="text"> <br></br> <label>所学专业：</label><input type="text"> <br></br> <label>在校时间：</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称：</label><input type="text"> <br></br> <label>工作描述：</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议：</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
04-03
<label for="name">姓名：</label> <input id="name" type="text" required> <!-- 添加必填验证 --> <!-- 密码字段应包含模式验证 --> <input type="password" pattern=".{8,}" title="至少8位字符"> ``` $\...
<fieldset>是什么意思
05-19
<fieldset>是一个 HTML 标签，用于将一组相关的表单元素放在一个框中，以便将这些元素视为单独的单元。这个标签通常与<legend>标签一起使用，<legend>标签用于提供与<fieldset>相关的标题或说明。使用<fieldset>和...
<form action="xxx.jsp" method="post" > <table width="500"> <style> body { display: grid; place-content: center; min-height: 100vh; margin: 20px; font-family: 'Microsoft YaHei', sans-serif; font-size: 16px; } table { border-spacing: 10px; } </style> <tr> <td><b style="font-size: 16px;">性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </fieldset> </form>
04-01
1. 多余的</fieldset>闭合标签，而没有对应的开始标签。 2. 图片缺少alt属性。 3. 性别选项的id拼写问题（women应为woman）。 4. <style>标签放置在表格内部，不符合最佳实践。 5. 生日下拉菜单的选项不完整，可能...
fieldset 标签样式自定义
草巾冒小子的博客
08-22 1万+
&amp;amp;amp;lt;fieldset&amp;amp;amp;gt;标签标签样式自定义 混搭bootstrap框架，开发网站后台管理系统，结合简单实例，系统界面，截图演示H5标签fieldset、legend的使用效果！ 注意：删除代码中的注释部分，就是fieldset单独使用的效果 ！ 效果预览 代码如下： &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;
使用<fieldset>标签，为表单添加边框
Duke的博客
05-06 6233
<div> <div style="width: 600px"> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> ...
完成以下页面（需要了解fieldset标签的用法）
gfh
04-21 1711
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .expa{ width: 800px;;} &lt;/style&gt; &lt;/hea
URL地址重写
三千弱水的专栏
09-22 3433
URL重写就是首先获得一个进入的URL请求然后把它重新写成网站可以处理的另一个URL的过程。举个例子来说，如果通过浏览器进来的URL是“UserProfile.aspx?ID=1”那么它可以被重写成 “UserProfile/1.aspx”，这样的URL，这样的网址可以更好的被网站所阅读。 如果浏览器不支持Cookie或用户阻止了所有Cookie，可以把会话ID附加在HTML页面中所有的
DMZ区，这是个什么东东
三千弱水的专栏
09-19 1708
DMZ是英文“demilitarized zone”的缩写，中文名称为“隔离区”，也称“非军事化区”。它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题，而设立的一个非安全系统与安全系统之间的缓冲区，这个缓冲区位于企业内部网络和外部网络之间的小网络区域内，在这个小网络区域内可以放置一些必须公开的服务器设施，如企业Web服务器、FTP服务器和论坛等。另一方面，通过这样一个DMZ区域，更加有
session中的地址重写
三千弱水的专栏
09-22 969
地址重写，主要是为了防止有些浏览器,为了提高安全性,禁止了Cookie的功能，而session的ID恰好是保存在web容器中和客户端的内存当中的。所以一旦禁用了cookie,session也会无法使用.所以url重写技术就诞生了.像以前的新浪邮箱就没有采用url地址重写,导致了禁用cookie的时候，是无法进行操作的.  Java代码   import java.io.IOExce
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值