生僻标签 fieldset 与 legend 的用法详解

• ：HTML

  元素用于对表单中的控制元素进行分组
• ：在
  中内置了一个

  元素作为 fieldset 的标题

简单而言，fieldset可以单独使用，对表单的元素进行分组，而legend则需要和fieldset配套使用，成对出现，作为分组的标题。

看个简单的例子，简单的 HTML 及结构如下：

    
Form
    

        Name :
    
    

        Password :
    

fieldset {
    border: 1px solid#ddd;
    padding: 12px;
}
 
legend {
    font-size: 18px;
    padding: 0 10px;
}

效果如下：

CodePen Demo -- fieldset & legend Demo

比较有意思的点在于，如果给fieldset设置了border边框，则legend元素内的内容则会作为分组的标题，嵌入border内。

控制legend的位置及样式

对于legend的位置和样式，是可以进行控制的。

对于位置，我们可以通过margin和 父元素的padding进行控制，如果父元素fieldset不设置padding，legend不设置 margin ，则legend默认定位在最左侧。

fieldset {
    border: 1px solid#ddd;
    // padding: 12px;
}
 
legend {
    font-size: 18px;
}

效果图：

通过改变legend的margin或者父元素的padding-left，可以控制标题的初始位置：

fieldset {
    border: 1px groove #ddd;
}
 
legend {
    animation: marginMove 10s infinite alternate;
}
 
@keyframes marginMove {
    100% {
        margin-left: 100px;
    }
}

效果图：

通过控制legend的padding，可以增加周围元素的区域，让留白更多一点。

应用场景 -- 标题两侧横线

了解了上述基本知识后，我们就可以稍微开始深入，想一想，上述

    
排行榜

fieldset {
    width: 300px;
    height: 24px;
    border: 1px solid transparent;
    border-top-color: #000;
}
 
legend{
    margin: auto;
    padding: 0 10px;
}

    
CSS fieldset
    
HTML element
    
JavaScript
    
TypeScript

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
fieldset{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 10px solid transparent;
    border-top-color: #000;
}
legend{
    padding: 0 10px;
}
 
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }

legend{
    animation: move 3s infinite linear alternate;
}
@keyframes move {
    100% {
        margin-left: 70px;
    }
}