1. HTML <fieldset> 标签

最新推荐文章于 2025-09-19 10:39:43 发布

转载最新推荐文章于 2025-09-19 10:39:43 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shix0909/p/11217608.html

本文详细介绍了HTML中fieldset元素的定义与用法，通过案例展示了如何使用fieldset和legend元素对表单元素进行分组，以增强表单的可读性和美观性。

定义和用法

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

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

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

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

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

案例：

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

</body>
</html>

参考：http://www.w3school.com.cn/tags/tag_fieldset.asp

转载于:https://www.cnblogs.com/shix0909/p/11217608.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ddlcdlzn20146

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML ＜legend＞标签

玄链教育

07-05

1790

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.在 XHTML 1.0 Strict DTD 中，align 属性不被支持。在 HTML 4.01 中，align 属性不被赞成使用。为 fieldset 中的标题定义对齐方式。所有浏览器都支持标签。

HTML ＜fieldset＞标签

玄链教育

06-13

1209

参与评论您还未登录，请先登录后发表或查看评论

HTML 标签

onesp的专栏

02-09

316

定义和用法fieldset 元素可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。标签没有必需的或唯一的属性。标签" href="http://writeblog.csdn.net/tags/tag_legen

HTML `＜legend＞` 标签深度解析

最新发布

2501_93104808的博客

09-19

999

HTML <legend> 标签是表单分组的重要元素，需与 <fieldset> 配合使用。作为 <fieldset> 的第一个子元素，它为表单字段组提供语义化标题，显著提升表单可读性和可访问性。屏幕阅读器会优先朗读 <legend> 内容，为视障用户提供关键上下文信息。该标签支持所有全局属性，但不支持特有属性，浏览器兼容性极佳。最佳实践包括：保持标题简明、避免交互元素、优先使用原生HTML而非ARIA、适当CSS样式化等。通过合理使用 <legend&

fieldset与legend标签

weixin_43741430的博客

11-15

1816

fieldset>标签用于对表单中的控制元素进行分组<legend>标签则必须与<fieldset>标签配套使用，作为fieldset标签的标题。

HTML <fieldset>和<legend>标签

codingmu的专栏

01-12

389

*fieldset元素可以将它所包围的元素用线框衬托出来 *legend元素可定义fieldset标题

HTML `＜fieldset＞` 标签 `form` 属性深度解析

2501_93104808的博客

09-19

1060

HTML <fieldset> 标签 form 属性解析摘要 HTML <fieldset> 标签用于分组表单控件，提高可用性和可访问性。HTML5 引入的 form 属性允许 <fieldset> 及其控件与外部 <form> 关联，即使不在表单标签内也能提交数据。该属性支持组件化开发，不影响可访问性，现代浏览器兼容良好。关键点包括：通过 form 属性指定表单 ID；与单个控件 form 属性的优先级关系；必须配合 <legend> 保持可访问

HTML中的＜fieldset＞标签元素框的使用

pan_junbiao的博客

08-15

626

HTML 提供的标签用于在表单中分组相关元素。标签为 fieldset 元素定义标题。标签会在相关元素周围绘制一个框。使用标签，显示博客信息。

HTML 基础标签——分组标签＜div＞、＜span＞和基础语义容器

Allen-

11-01

912

HTML中的分组（容器）标签用于结构化内容，将页面元素组织成逻辑区域，使页面更具可读性和易维护性。这些标签既有纯粹的结构性标签（如 `` 和 ``），也有提供语义信息的标签（如 ``、`` 和 ``）。

HTML5使用＜mark＞标签：高亮显示文本

pan_junbiao的博客

07-06

1983

mark 标签用于表示页面中需要突出显示或高亮的一段文本，这段文本对于当前用户具有参考作用。它通常在引用原文以引起读者注意时使用。标签的作用相当于使用一支荧光笔在打印的纸张上标出一些文字。它与强调不同，对于强调，我们使用标签。但是如果有一些已有的文本，并且想要让文本中没有强调的内容处于显眼的位置，可以使用标签并将其样式化为斜体等。在页面中高亮显示关键字。

jquery fieldset和legend标签特效代码

03-20

jquery fieldset和legend标签代码是一款基于jQuery实现的简单的样式代码。

fieldset标签、legend标签

cbin1013

04-09

373

在form表单中，我们可以对form中的信息进行分组归类，如注册表单的form，我们可以将注册信息分组成　　　　基本信息（一般为必填）　　　　详细信息（一般为可选）　　那我们如何更好的来实现呢？我们可考虑在表单form中加入下面两个标签：　　　　fieldset：对表单进行分组，一个表单可以有多个fieldset。　　　　legend：说明每组的内容描述。　...

fieldset、legend标签的使用及说明

kdm8866的专栏

01-21

1125

1、 fieldset、legend标签是一个组合标签，fieldset是一个容器，而legend标签只能创建在fieldset内，不然的话使用不了。 2、使用格式示例：试题详细信息 //可以设置样式其它标签块。。。。。 3、可以实现的效果：

HTML里的fieldset标签和legend标签

qq_25239021的博客

09-08

1192

filedset和legend是：fieldset是生成一个分隔框，而legend是在fieldset的生成的分隔框上，开一个口贴上标签。

Html legend标签说明

lixch2008的博客

12-09

504

legend 元素为 fieldset 元素定义标题（caption）。 <html> <body> <fieldset> <legend>健康信息：</legend> <form> <label>身高：<input type="text" /&g

<form><textarea><label><fieldset><legend><optgroup><button>标签整理

阿斯卡Asika的博客

04-22

1101

<form><textarea><label><fieldset><legend><optgroup><button>标签整理

Python中所有子图标签Legend显示详解

fenfenfen520a的博客

12-20

219

在数据可视化中，图例（legend）是一个非常重要的元素，它能够帮助读者理解图表中不同元素的含义。特别是在使用Python进行可视化时，matplotlib库是一个非常强大的工具，能够轻松创建包含多个子图的图表，并在每个子图中显示图例。本文将详细介绍如何在Python的matplotlib库中为所有

一个清新的CSS表单布局

xinkong1010的专栏

11-25

755

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" lang="zh-CN">CSS表单body {font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#666666;background:#fff;t

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <html> <head> <title> 表单处理事件 </title> <style type="text/css"> form { margin: 0 auto; background: #663399; width: 300px; height: 210px; color: white; text-align: center; } legend { color: white; font-size: 20px; font-weight: bold; text-align: center; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function checklogin() { var username = $("myname").value; var pwd = $("mypwd").value; var checkright = true; if (username == "" || pwd == "") //两者中有一个为空 { alert("请确认用户名和密码输入是否正确！！"); checkright = false; } else //不为空，再判断用户名和密码的长度合法性 { if (username.length < 8 && username.length > 21) { alert("用户名错误，至少8个字符，最多20个字符！！"); checkright = false; } else if (pwd.length < 6 && pwd.length > 8) { alert("密码长错误，至少6个字符，最多8个字符！！"); checkright = false; } } checkright; } </script> </head> <body> <form name="loginform" method="post" action="loginindex.html" onsubmit="checklogin()"> <fieldset> <legend>用户登录</legend> <br><br> <label>用户名</label> <input type="text" name="" id="myname"><br><br> <label>密码</label> <input type="password" name="" id="mypwd"><br><br><br> <input type="submit" value="提交"><input type="reset"> </fieldset> </form> </body> </html>

03-21

<think>好的，我现在需要分析用户提供的HTML代码，并找出其中的问题。首先，用户希望了解这段代码的功能以及可能存在的错误。让我仔细阅读代码，逐步检查每个部分。首先看文档结构。开头是<!doctype html>，正确声明了HTML5。接着是<html>标签，但注意到里面又嵌套了一个<html>标签在<head>之前，这明显是重复的，会导致解析错误。应该只有一个<html>标签包裹整个文档。接下来是<head>部分。里面包含了<meta charset="UTF-8">，这是正确的设置字符编码。但之后又有一个<html>标签，这应该是多余的，需要删除。然后<title>标签写的是“表单处理事件”，符合页面内容。接下来是<style>部分，定义了form和legend的样式。form的宽度和高度设置可能影响布局，但暂时没有问题。颜色和居中对齐看起来合适。然后是<script>部分，定义了两个函数：$和checklogin。$函数通过id获取元素，没有问题。checklogin函数用于验证表单，这里可能存在逻辑错误。例如，用户名的长度检查条件是username.length <8 && >21，这实际上永远不会成立，因为一个长度不可能同时小于8又大于21。正确的应该是使用逻辑或，或者更合理的条件，比如username.length <8 || username.length >20。同样，密码的长度检查条件也有同样的问题，应该是pwd.length <6 || pwd.length >8。此外，函数最后有一个checkright;语句，但没有返回这个值，导致表单验证可能无法阻止提交。正确的应该是return checkright;，并且在onsubmit事件处理中返回这个值，否则表单会继续提交。在HTML结构部分，<form>的onsubmit属性设置为"checklogin()"，但为了阻止表单提交，应该返回函数的返回值，即onsubmit="return checklogin()"。否则即使函数返回false，表单仍会提交。表单中的输入字段，用户名和密码的name属性为空，可能需要根据后端处理需求填写合适的名称，否则提交的数据可能无法被服务器正确接收。此外，密码字段的<label>使用了“密码”，这里的空格使用可能影响可读性，但属于样式问题。最后，<input type="submit">和<input type="reset">按钮没有name属性，这在表单提交时无关紧要，但如果有需要的话可以添加。此外，表单的action指向loginindex.html，可能是测试用的，实际应用中应指向处理登录的服务器端脚本。综上所述，主要问题包括重复的<html>标签、表单验证函数中的逻辑错误和返回值问题、onsubmit事件处理未阻止默认提交、以及输入字段的name属性缺失。需要逐一修正这些问题，以确保表单功能正常。</think>以下是对您提供的HTML代码的逐步分析和问题修正： --- ### **一、文档结构问题** 1. **重复的`<html>`标签** ```html <html lang="en"> <head> <meta charset="UTF-8"> <html>  ``` - **问题**：文档中重复定义`<html>`标签，导致DOM结构错误。 - **修正**：删除第二个`<html>`标签。 --- ### **二、表单验证逻辑问题** 1. **条件判断逻辑错误** ```javascript if (username.length < 8 && username.length > 21) { ... } else if (pwd.length < 6 && pwd.length > 8) { ... } ``` - **问题**：`&&`逻辑运算符导致条件永远不成立（例如，`username.length`不可能同时小于8且大于21）。 - **修正**：改用`||`（或）逻辑： ```javascript if (username.length < 8 || username.length > 20) { ... } else if (pwd.length < 6 || pwd.length > 8) { ... } ``` 2. **未阻止表单默认提交行为** ```html <form onsubmit="checklogin()">  ``` - **问题**：即使验证失败，表单仍会提交。 - **修正**： ```html <form onsubmit="return checklogin()">  ``` ```javascript function checklogin() { // ... 验证逻辑 return checkright; // 添加 return } ``` --- ### **三、HTML标签完整性** 1. **缺失闭合标签** - **问题**：原始代码中`</head>`和`</html>`的闭合位置混乱。 - **修正**：调整标签闭合顺序： ```html </head> <body>  </body> </html> ``` --- ### **四、其他优化建议** 1. **输入字段的`name`属性** ```html <input type="text" name="" id="myname">  ``` - **建议**：为`name`属性赋值，确保表单数据能被后端接收： ```html <input type="text" name="username" id="myname"> ``` 2. **密码字段提示语优化** ```javascript alert("密码长错误，至少6个字符，最多8个字符！！"); ``` - **建议**：更正错别字（“长错误” → “长度错误”）。 --- ### **五、完整修正代码** ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单处理事件</title> <style type="text/css"> form { margin: 0 auto; background: #663399; width: 300px; height: 210px; color: white; text-align: center; } legend { color: white; font-size: 20px; font-weight: bold; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function checklogin() { var username = $("myname").value; var pwd = $("mypwd").value; var checkright = true; if (username === "" || pwd === "") { alert("用户名和密码不能为空！"); checkright = false; } else { if (username.length < 8 || username.length > 20) { alert("用户名需8-20个字符！"); checkright = false; } else if (pwd.length < 6 || pwd.length > 8) { alert("密码需6-8个字符！"); checkright = false; } } return checkright; // 返回验证结果 } </script> </head> <body> <form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()"> <fieldset> <legend>用户登录</legend> <br><br> <label>用户名</label> <input type="text" name="username" id="myname"><br><br> <label>密码</label> <input type="password" name="password" id="mypwd"><br><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </fieldset> </form> </body> </html> ``` --- ### **六、代码功能说明** 1. **表单验证逻辑**： - 用户名需8-20个字符，密码需6-8个字符。 - 若验证失败，弹出提示并阻止表单提交。 2. **样式优化**： - 表单居中显示，背景色为`#663399`（紫色）。 3. **兼容性**： - 使用原生JavaScript实现，无依赖库。通过以上修正，表单的功能性和健壮性将显著提升。