0

0

HTML表单怎样使用fieldset_HTML表单使用fieldset流程【教程】

看不見的法師

看不見的法師

发布时间:2026-03-02 19:17:02

|

927人浏览过

|

来源于php中文网

原创

fieldset 在语义化表单分组中必须使用,因其提供批量禁用、键盘导航边界及屏幕阅读器组名识别等原生能力;legend 为必选唯一首子元素,用于定义可访问名称。

html表单怎样使用fieldset_html表单使用fieldset流程【教程】

fieldset 什么时候必须用

语义化表单分组场景下,fieldset 不是“可选装饰”,而是浏览器默认提供表单控件批量禁用、键盘导航逻辑、屏幕阅读器语义的基础容器。比如一组 radiocheckbox 必须归入同一个 fieldset,否则辅助技术无法识别它们属于同一逻辑组。

  • 表单里有多个 radio 选项(如“性别:男/女/其他”)→ 必须套 fieldset + legend
  • 需要整组控件一键禁用(如“是否启用邮件通知”勾选后才激活下方输入框)→ 用 fieldset disabled 比逐个设 disabled 更可靠
  • 表单被 aria-live 或屏幕阅读器读取时,缺 legend 会导致组名缺失,用户不知道这堆控件在干啥

legend 标签不能省,也不能写错位置

legendfieldset 的唯一合法第一个子元素,且必须存在——哪怕内容为空也要写 <legend></legend>。浏览器会把它的文本作为整组的可访问名称,CSS 隐藏它不等于语义消失,但删掉就彻底没名了。

  • 错误写法:<fieldset> <div><h3>地址信息</h3></div>...</fieldset> → 屏幕阅读器读不出组名
  • 正确写法:<fieldset> <legend>地址信息</legend>...</fieldset>
  • 想视觉隐藏但保留语义?用 clip-path: inset(50%);position: absolute; clip: rect(1px, 1px, 1px, 1px);,别用 display: nonevisibility: hidden

disabled 属性对 fieldset 的特殊行为

fieldset disabled 会递归禁用所有内部表单控件(inputselecttextareabutton),包括嵌套的 fieldset,而且比 JS 手动遍历设 disabled 更轻量、更符合表单原生逻辑。

佳蓝在线销售系统(创业版) 佳蓝在线销售
佳蓝在线销售系统(创业版) 佳蓝在线销售

1、对ASP内核代码进行DLL封装,从而大大提高了用户的访问速度和安全性;2、采用后台生成HTML网页的格式,使程序访问速度得到进一步的提升;3、用户可发展下级会员并在下级购买商品时获得差额利润;4、全新模板选择功能;5、后台增加磁盘绑定功能;6、后台增加库存查询功能;7、后台增加财务统计功能;8、后台面值类型批量设定;9、后台财务曲线报表显示;10、完善订单功能;11、对所有传输的字符串进行安全

下载
  • 注意:Chrome/Firefox 支持,但 Safari 在某些旧版本中对嵌套 fieldset 的禁用传递有延迟或遗漏
  • 不要指望 fieldset[disabled] 能禁用 contenteditable 元素或自定义组件——它只作用于标准表单控件
  • 样式上,fieldset:disabled 默认带灰色边框和文字,如需统一禁用态外观,建议额外加 class 控制,别只靠伪类

和 div 套表单的区别在哪

单纯视觉分组用 div 完全可以,但一旦涉及表单控制流、无障碍、或未来可能加 JS 交互(比如展开/折叠、条件显示),fieldset 就立刻显出价值。它不是“更高级的 div”,而是浏览器内置的表单语义单元。

立即学习前端免费学习笔记(深入)”;

  • JS 获取某组 radio 选中值?document.querySelector('fieldset[name="gender"] input:checked') 比靠 class 或 name 属性筛选更精准
  • 提交前校验某组必填?fieldset.checkValidity() 可触发内部所有控件的原生验证(前提是它们有 required
  • div 替代 fieldset 后,键盘 Tab 导航仍会进入所有控件,但无法通过 Shift+Tab 跳过整组——fieldset 提供天然导航边界
实际项目里最容易漏掉的是 legend 的存在性检查,以及误以为 fieldset 只是画个框。它真正起作用的地方,往往在你没打开屏幕阅读器、没测试键盘操作、也没碰上 Safari 兼容问题的时候。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

1016

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

813

2023.11.06

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

430

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

599

2023.08.10

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

747

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

23

2025.12.06

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

514

2023.07.28

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

48

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.9万人学习

CSS教程
CSS教程

共754课时 | 38.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号