首页 >> 综合热门 > 严选问答 >

fieldset标签

2025-09-13 23:31:09

Alululu噜

问答领域知识达人

2025-09-13 23:31:09

【fieldset标签】在HTML中，`

` 标签用于将表单中的相关元素分组，通常与 `` 标签一起使用，以提供对一组表单控件的标题或说明。它有助于提高表单的可访问性和语义化结构，使用户更清晰地理解表单内容的组织方式。

一、字段集（fieldset）的作用

作用	描述
分组元素	将多个表单元素（如输入框、单选按钮、复选框等）归为一组
提供标题	通过 `` 标签为该组提供一个标题
增强可访问性	有助于屏幕阅读器识别表单结构，提升用户体验
改善布局	使表单结构更清晰，便于后续样式设计和维护

二、基本语法结构

```html

表单组标题

```

- ``：定义字段集的标题，必须作为 `

` 的第一个子元素。

- `

` 内可以包含任何表单相关的 HTML 元素，如 ``、`

` 等。</p><p>三、示例代码</p><p>```html</p><p><form></p><p><fieldset></p><p><legend>个人信息</legend></p><p><label>姓名：<input type="text" name="name"></label><br></p><p><label>性别：</p><p><input type="radio" name="gender" value="male">男</p><p><input type="radio" name="gender" value="female">女</p><p></label><br></p><p><label>爱好：</p><p><input type="checkbox" name="hobby" value="reading">阅读</p><p><input type="checkbox" name="hobby" value="sports">运动</p><p></label></p><p></fieldset></p><p></form></p><p>```</p><p>四、常见应用场景</p><table><tbody><tr><td> 场景 </td><td> 说明 </td></tr><tr><td> 注册表单 </td><td> 将用户信息、地址信息等分组展示 </td></tr><tr><td> 设置页面 </td><td> 将不同的配置选项分成多个字段集 </td></tr><tr><td> 多步骤表单 </td><td> 每一步的内容用字段集区分，增强逻辑性 </td></tr></tbody></table><p>五、注意事项</p><table><tbody><tr><td> 注意事项 </td><td> 说明 </td></tr><tr><td> 必须与 `<legend>` 配合使用 </td><td> 否则字段集没有标题，失去意义 </td></tr><tr><td> 不影响表单提交 </td><td> 字段集本身不会被提交，但其内部元素会被提交 </td></tr><tr><td> 可嵌套使用 </td><td> 可以在字段集中再嵌套其他字段集，实现多级分组 </td></tr></tbody></table><p>总结</p><p>`<fieldset>` 是一个非常实用的 HTML 标签，主要用于对表单内容进行逻辑分组，并配合 `<legend>` 使用来提供标题。它不仅提升了表单的可读性和可访问性，还使得表单结构更加清晰。在实际开发中，合理使用 `<fieldset>` 能有效提升用户体验和代码质量。</p><style>table,tr{width: 100%;text-align: center;color: #333;font-size: 16px;line-height: 1.8em;margin-bottom: 32px;border: 1px solid #333;empty-cells:show;}table tr th {border: 1px solid #333;text-align: center;font-weight: 600;background: #eee;}table tr td {border: 1px solid #333;text-align: center}</style>        				</div>
        			</div>
        		</div>            
            
        
                            
          </div>
        </div>
      </div>
      
 <script>
    if (isMobile()){
    		document.write('<div style="text-align:center;margin-top:10px;"><script>wap_show_tag_under9();<\/script><\/div>');
    }else{
        document.write('<div style="display:flex;justify-content:center;align-items:center;width:100%;"><script>pc_show_so();<\/script><\/div>');
    }
</script>

<div class="cb_nr_head mt10">
  <h3 class="cb_nr_title">相关阅读</h3>
    <div class="cb_nr_tags">
    <em class="cb_nr_tag_label">标签：</em>
        <a href="https://www.t-d.tv/tag/fieldsetbiaoqian/" target="_blank" title="fieldset标签">fieldset标签</a>
      </div>
  </div>
<div class="cb_nr_cols">
  <ul class="cb_nr_col">
                <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347074.html" title="dota 斧王出装 主流定位出装方案" target="_blank">dota 斧王出装 主流定位出装方案</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347073.html" title="芦篙是什么菜 江南特色水生蔬菜" target="_blank">芦篙是什么菜 江南特色水生蔬菜</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347060.html" title="DNF 宇宙恶魔罗什单人怎么打 单人攻坚机制详解" target="_blank">DNF 宇宙恶魔罗什单人怎么打 单人攻坚机制详解</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347059.html" title="汉字吃的组词 小学常用词语汇总" target="_blank">汉字吃的组词 小学常用词语汇总</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347046.html" title="炒米线的做法 家常肉丝鸡蛋炒米线教程" target="_blank">炒米线的做法 家常肉丝鸡蛋炒米线教程</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347045.html" title="dnf 启动黑屏后为何未响应 故障排查解决指南" target="_blank">dnf 启动黑屏后为何未响应 故障排查解决指南</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347030.html" title="dnf 红阵变大有什么用 刀魂之卡赞范围提升详解" target="_blank">dnf 红阵变大有什么用 刀魂之卡赞范围提升详解</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347028.html" title="蓝牙耳机两个同时使用怎么使用 双耳配对操作教程" target="_blank">蓝牙耳机两个同时使用怎么使用 双耳配对操作教程</a></li>
                                                                                                              </ul>
  <ul class="cb_nr_col">
                                                                                                                <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347016.html" title="dnf95 恍惚能升江山如画套吗 升级规则说明" target="_blank">dnf95 恍惚能升江山如画套吗 升级规则说明</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347014.html" title="城野医生防晒喷雾真假鉴别 实操辨别方法详解" target="_blank">城野医生防晒喷雾真假鉴别 实操辨别方法详解</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347004.html" title="deed 的用法总结大全 词性义项搭配深度解析" target="_blank">deed 的用法总结大全 词性义项搭配深度解析</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1105/1346999.html" title="术后病人如何炖鸽子汤 清炖营养汤做法" target="_blank">术后病人如何炖鸽子汤 清炖营养汤做法</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1104/1346995.html" title="cruisemain 灯亮车怎么了 定速巡航指示灯解析" target="_blank">cruisemain 灯亮车怎么了 定速巡航指示灯解析</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1104/1346984.html" title="执业药师报考时间 报名考试时间说明" target="_blank">执业药师报考时间 报名考试时间说明</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1104/1346981.html" title="conversation 的构词 词根词缀拆解" target="_blank">conversation 的构词 词根词缀拆解</a></li>
                    <li><a href="https://news.t-d.tv/2026/yaxwd_1104/1346969.html" title="chuizi 音节应该标哪个字母 拼音标调讲解" target="_blank">chuizi 音节应该标哪个字母 拼音标调讲解</a></li>
              </ul>
</div>

<div class="title"><a href="https://www.t-d.tv/2026/zsiwd_1106/1347080.html" title="糯米团子做法 软糯 Q 弹家常教程" target="_blank">糯米团子做法 软糯 Q 弹家常教程</a></div>
        <div class="description">糯米团子做法主要分为两类，一类是糯米粉加水揉成粉团包馅蒸制，另一类是整粒糯米蒸熟之后捣制包馅，家常最常...<a href="https://www.t-d.tv/2026/zsiwd_1106/1347080.html" title="糯米团子做法 软糯 Q 弹家常教程" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://www.t-d.tv/2026/csiwd_1106/1347079.html" title="哪种番薯好吃 品种口感选购指南" target="_blank">哪种番薯好吃 品种口感选购指南</a></div>
        <div class="description">哪种番薯好吃没有统一答案，不同番薯品种的甜度、水分、粉质差别很大，有的粉糯干面，有的流心蜜甜，有的脆嫩...<a href="https://www.t-d.tv/2026/csiwd_1106/1347079.html" title="哪种番薯好吃 品种口感选购指南" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://zixun.t-d.tv/2026/xsiwd_1105/1347078.html" title="driving 英文解释 动名词与分词用法详解" target="_blank">driving 英文解释 动名词与分词用法详解</a></div>
        <div class="description">driving 是动词 drive 的现在分词，同时也可以充当动名词，核心英文含义是驾驶开车，也可以引申为驱动推动...<a href="https://zixun.t-d.tv/2026/xsiwd_1105/1347078.html" title="driving 英文解释 动名词与分词用法详解" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://zixun.t-d.tv/2026/xsiwd_1105/1347077.html" title="面壁思过出处 典故详解" target="_blank">面壁思过出处 典故详解</a></div>
        <div class="description">面壁思过这个成语，最早关联达摩面壁的禅宗典故，但是现代语义里的面壁思过，指面对墙壁反省自身过错，是后世...<a href="https://zixun.t-d.tv/2026/xsiwd_1105/1347077.html" title="面壁思过出处 典故详解" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://bbs.t-d.tv/2026/bzawd_1105/1347076.html" title="卖茶叶什么梗 网络骗局梗释义解析" target="_blank">卖茶叶什么梗 网络骗局梗释义解析</a></div>
        <div class="description">卖茶叶什么梗，指的是早年社交软件里面非常知名的网络诈骗套路，也就是大家常说的卖茶叶骗局，骗子一般伪装成...<a href="https://bbs.t-d.tv/2026/bzawd_1105/1347076.html" title="卖茶叶什么梗 网络骗局梗释义解析" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://bbs.t-d.tv/2026/bzawd_1105/1347075.html" title="do 的过去式是 did 还是 done 不规则动词辨析" target="_blank">do 的过去式是 did 还是 done 不规则动词辨析</a></div>
        <div class="description">do 的过去式是 did，done 是 do 的过去分词，这是初中英语高频易混考点，很多同学会把过去式和过去分词弄...<a href="https://bbs.t-d.tv/2026/bzawd_1105/1347075.html" title="do 的过去式是 did 还是 done 不规则动词辨析" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://news.t-d.tv/2026/yaxwd_1105/1347074.html" title="dota 斧王出装 主流定位出装方案" target="_blank">dota 斧王出装 主流定位出装方案</a></div>
        <div class="description">斧王核心定位是前排肉盾兼控场英雄，出装核心思路是优先堆生存属性提升扛伤能力，再补充反甲这类可以把受到伤...<a href="https://news.t-d.tv/2026/yaxwd_1105/1347074.html" title="dota 斧王出装 主流定位出装方案" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://news.t-d.tv/2026/yaxwd_1105/1347073.html" title="芦篙是什么菜 江南特色水生蔬菜" target="_blank">芦篙是什么菜 江南特色水生蔬菜</a></div>
        <div class="description">芦篙正确写法是芦蒿，也叫蒌蒿，属于菊科蒿属的水生草本蔬菜，是江南很有名的时令野菜驯化品种，主要食用部位...<a href="https://news.t-d.tv/2026/yaxwd_1105/1347073.html" title="芦篙是什么菜 江南特色水生蔬菜" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://www.t-d.tv/2026/ricwd_1105/1347072.html" title="dota1 所有英雄名字及技能介绍 基于原版 6.83 版本" target="_blank">dota1 所有英雄名字及技能介绍 基于原版 6.83 版本</a></div>
        <div class="description">dota1 也就是基于魔兽争霸 3 冰封王座地图编辑器制作的 Defense of the Ancients，原版经典 6 83 版本英雄总数为 112 名，分为   <a href="https://www.t-d.tv/2026/ricwd_1105/1347072.html" title="dota1 所有英雄名字及技能介绍 基于原版 6.83 版本" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
			    
	  <li class="nr_div_list_item">

<div class="title"><a href="https://www.t-d.tv/2026/ricwd_1105/1347071.html" title="老冰棍的做法 老式奶香冰棒教程" target="_blank">老冰棍的做法 老式奶香冰棒教程</a></div>
        <div class="description">老冰棍是经典老式冰棒，特点是清甜奶味柔和，口感硬实，不是奶油雪糕那种绵密软滑质地，在家可以用牛奶、白糖...<a href="https://www.t-d.tv/2026/ricwd_1105/1347071.html" title="老冰棍的做法 老式奶香冰棒教程" target="_blank" class="llqw">浏览全文>></a></div>
    </li>
					
  </ul>
</div>

</div>
	
	
	
		  <div class="article_r">
	
<script>
    if (!isMobile()){
       	document.write('<div style="text-align:left;margin-top:5px;"><script>pc_show_right300x4_1();pc_show_right_font();<\/script><\/div>');
    }
</script>
  	
	
		
	<div class="mt10 fl">
        <div class="look_bt">大家爱看</div>
        <ul class="look_list">
		
								<li><a href="https://www.t-d.tv/2026/jxuwd_1105/1347069.html" title="do 和 does 怎么用 一般现在时助动词讲解" target="_blank">do 和 does 怎么用 一般现在时助动词讲解</a></li>
						<li><a href="https://www.t-d.tv/2026/csiwd_1105/1347066.html" title="dnf 真正的觉醒任务在哪里 三觉任务接取位置详解" target="_blank">dnf 真正的觉醒任务在哪里 三觉任务接取位置详解</a></li>
						<li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347059.html" title="汉字吃的组词 小学常用词语汇总" target="_blank">汉字吃的组词 小学常用词语汇总</a></li>
						<li><a href="https://www.t-d.tv/2026/ricwd_1105/1347057.html" title="dnf 血气唤醒 狂战士核心被动技能详解" target="_blank">dnf 血气唤醒 狂战士核心被动技能详解</a></li>
						<li><a href="https://www.t-d.tv/2026/zsiwd_1105/1347054.html" title="dnf 网吧特权领取方法 开通激活操作详解" target="_blank">dnf 网吧特权领取方法 开通激活操作详解</a></li>
						<li><a href="https://www.t-d.tv/2026/csiwd_1105/1347052.html" title="当面花怎么用 产品实操深度指南" target="_blank">当面花怎么用 产品实操深度指南</a></li>
						<li><a href="https://www.t-d.tv/2026/csiwd_1105/1347051.html" title="dnf 斯雷克坤防御战怎么打 副本机制通关攻略" target="_blank">dnf 斯雷克坤防御战怎么打 副本机制通关攻略</a></li>
						<li><a href="https://news.t-d.tv/2026/yaxwd_1105/1347046.html" title="炒米线的做法 家常肉丝鸡蛋炒米线教程" target="_blank">炒米线的做法 家常肉丝鸡蛋炒米线教程</a></li>
						<li><a href="https://www.t-d.tv/2026/ricwd_1105/1347042.html" title="dnf 南瓜球在哪可以兑换什么 95 版本南瓜球商店攻略" target="_blank">dnf 南瓜球在哪可以兑换什么 95 版本南瓜球商店攻略</a></li>
						<li><a href="https://www.t-d.tv/2026/jxuwd_1105/1347041.html" title="dnf 魔法暴击宝珠叫什么 常用宝珠汇总" target="_blank">dnf 魔法暴击宝珠叫什么 常用宝珠汇总</a></li>
					        </ul>
      </div>

</div>
</div>
	<div class="clearfix"></div>
	
 <script>
    if (isMobile()){
    document.write('<script>wap_show_button_under();<\/script>');
    }
</script>
	
<div class="footer"><div class="main">

<div class="copylink">
      <p class="link">
            
			<a href="https://www.t-d.tv/about.html" target="_blank">关于我们</a><span>|</span>
		    
			<a href="https://www.t-d.tv/lxfs.html" target="_blank">联系方式</a><span>|</span>
		    
			<a href="https://www.t-d.tv/bqsm.html" target="_blank">版权声明</a><span>|</span>
		    
			<a href="https://www.t-d.tv/mzsm.html" target="_blank">免责声明</a><span>|</span>
		        </p>
    </div>
    
	<div id="copy" class="graylink">
	Copyright © 2007-2026 www.t-d.tv All Right Reserved. 版权所有 天地信息网   工信部网站备案编号：<a href="http://beian.miit.gov.cn" target="_blank">闽ICP备20009419号-87</a>
	</div>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?67612d367a78586a43752e99d5a5734b369011a7472f2b70499683e21aec99523871f0d6a9220c04b06cd03d5ba8e733fe66d20303562cd119c1d6f449af6378";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
</div>

</div>

</body>
</html>

问fieldset标签

答

fieldset标签