HTML5 之 Fieldset 标签

您所在的位置：网站首页 › fieldset标签的作用 › HTML5 之 Fieldset 标签

HTML5 之 Fieldset 标签

#HTML5 之 Fieldset 标签| 来源: 网络整理| 查看: 265

在这里插入图片描述

概述

fieldset 用于对表单中的控件元素进行分组。

fieldset是块级双标签，绝大多数浏览器都支持。

属性 disabled

fieldset的所有子代控件均会继承，即不可编辑状态。

用户名支付信息手机号支付方式现金其他提交

Chrome浏览器呈现，禁用后鼠标、键盘Tab均无法选中。

在这里插入图片描述

但是IE浏览器较为特殊，不仅可以输入，还能触发输入事件。

在这里插入图片描述

更糟糕的是fieldset内部的按钮，点击还会触发事件。

在这里插入图片描述

兼容IE11浏览器。

fieldset[disabled] { pointer-events: none; }

兼容IE9、IE10。

fieldset { position: relative; } fieldset[disabled]::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); }

IE8及以下浏览器，样式处理较麻烦，可采用js处理。

... function forEach(array, callback) { for (var i = 0; i if (fieldset.disabled) { buttons = fieldset.getElementsByTagName('button') inputs = fieldset.getElementsByTagName('input') forEach(buttons, function (button) { button.disabled = true }) forEach(inputs, function (input) { input.disabled = true }) } })

在表单提交时，即使不可编辑状态的控件中含有默认值，也不会伴随form一起提交。

在这里插入图片描述

提交时请求参数。

在这里插入图片描述

form

将fieldset关联为form的一部分，但是浏览器支持程度比较低。

如下fieldset绑定form的id属性，实现表单控件在form外部关联上了form。

用户名提交支付信息手机号支付方式现金其他样式

fieldset默认包括内外边距，同时周围有一个非完全闭合的边框，可通过border属性修改其颜色和宽度等。

注意边框线没有从文字上面穿过去，而是文字垂直居中压在边框线上，文字背景色是透明而非白色。

在这里插入图片描述

若通过CSS模拟，定位文本到边框上是没法实现的，文字必然要设置白色背景色才能遮住边框，但是若fieldset的背景色为非白色，就会出现问题。

另外一种可行的方式是文字和两个元素，其中两个元素需设置宽度和1px高度，三元素垂直方向居中对齐，但是最终实现效果也只能接近fileldset。

文本位置和样式

fieldset开口处的文字是legend元素渲染的，因此可修改legend元素的CSS属性来调整文本样式。

可调整legend左右内边距来控制文字左右留白。

legend { padding: 0 50px; }

在这里插入图片描述

调整legend左外边距来控制文字位置，注意设置margin: auto可水平居中文字。

legend { padding: 0; animation: marginLeft 2s infinite alternate; } @keyframes marginLeft { 100% { margin-left: 160px; } }

在这里插入图片描述

也可设置text-align属性控制文字位置。

legend { padding: 0; text-align: right; }

在这里插入图片描述

应用场景分割线

如下文字两侧带横线。

在这里插入图片描述

一般可通过伪元素实现，宽度自适应，浏览器兼容方面IE10及以下不兼容。

.hr { display: flex; align-items: center; } .hr::after, .hr::before { content: ''; flex: 1; height: 1px; background: #000; } .hr::before { margin-right: 10px; } .hr::after { margin-left: 10px; } 分隔线

以下仅fieldset和legend两元素，宽度自适应，浏览器兼容性良好，IE7及以下不兼容。

fieldset { padding: 0; margin: 0; border: none; border-top: 1px solid #000; } legend { margin: auto; padding: 0 10px; } 分割线文字环绕

在这里插入图片描述

由四个fieldset定位叠加形成，貌似除了炫酷点实际没啥用处。

.container { position: relative; width: 300px; height: 300px; } fieldset { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-top: 10px solid #000; box-sizing: border-box; } legend { font-size: 24px; line-height: 10px; font-weight: bold; padding: 0 10px; animation: move 2s infinite linear alternate; } fieldset:nth-of-type(2) { transform: rotate(90deg); } fieldset:nth-of-type(3), fieldset:nth-of-type(3) legend { transform: rotate(180deg); } fieldset:nth-of-type(4) { transform: rotate(-90deg); } @keyframes move { 100% { margin-left: 70px; } } CSS HTML JavaScript TypeScript 🎉 写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！

手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

GitHub / Gitee、GitHub Pages、掘金、CSDN 同步更新，欢迎关注😉~

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章