生僻标签 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;
    }
}