生僻標籤 fieldset 與 legend 的妙用

ChokCoco發表於2021-01-25

談到 <fieldset> 與 <legend>，大部分人肯定會比較陌生，在 HTML 標籤中，屬於比較少用的那一批。

我最早知道這兩個標籤，是在早年學習 reset.css 或者 normalize.css 時，在這些重置統一程式碼預設樣式的 CSS 中看到的。最近因為研究邊框，遇到了這兩個標籤，發現它們還是很有意思的，遂起一篇，將整理的一些知識點分享給大家。

 

瞭解 <fieldset> 與 <legend>

通常而言，<fieldset> 與 <legend> 比較常用在表單當中。

  • <fieldset>：HTML <fieldset> 元素用於對錶單中的控制元素進行分組
  • <legend>：在 <fieldset> 中內建了一個 <legend> 元素作為 fieldset 的標題

簡單而言，fieldset 可以單獨使用，對錶單的元素進行分組，而 legend 則需要和 fieldset 配套使用，成對出現，作為分組的標題。

看個簡單的例子，簡單的 HTML 及結構如下：

<fieldset>
    <legend>Form</legend>
    <div>
        <label>Name :</label><input type="text" placeholder="input Name" />
    </div>
    <div>
        <label>Password :</label><input type="text" placeholder="input Name" />
    </div>
</fieldset>
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> 與 <legend> 的一些有意思的應用場景。

最適合的場景我覺得應該就是標題兩側帶橫線的佈局了。類似這樣：

當然，這個佈局的解決方式有很多，通常會使用偽元素來生成左右兩側的橫線，或者是通過絕對定位區域性進行覆蓋疊加。

這裡，使用 <fieldset> 與 <legend> 非常快速的完成：

<div class="g-container">
	<fieldset><legend>排行榜</legend></fieldset>
</div>
fieldset {
	width: 300px; 
	height: 24px; 
	border: 1px solid transparent; 
	border-top-color: #000; 
}

legend{
	margin: auto; 
	padding: 0 10px; 
}

fieldset 只設定上邊框，通過 margin: auto 將標題定位到中間， 通過 padding 控制兩側的留白。非常的完美。

CodePen Demo -- fieldset & legend Demo 2

 

邊框巢狀文字

在這篇文章中 -- How to Add Text in Borders Using Basic HTML Elements，還介紹了一種非常有意思的使用場景，在邊框中巢狀文字。

想象一下，一個 <fieldset> 元素配合一個 <legend> 元素，可以生成一個邊框嵌文字的效果，那麼，將多組組合，再進行定位排布，就可以生成多邊邊框巢狀文字的效果了。

虛擬碼如下：

<div class="g-container">
	<fieldset><legend>CSS fieldset</legend></fieldset>
	<fieldset><legend>HTML element</legend></fieldset>
	<fieldset><legend>JavaScript</legend></fieldset>
	<fieldset><legend>TypeScript</legend></fieldset>
</div>
.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); }

效果圖如下：

通過多個 <fieldset> 和 <legend> 的組合，我們可以拼出一個容器的 4 個邊，組成一個非常好看的邊框嵌文字效果。

通過給 legend 加上 animation，讓文字動起來

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

CodePen Demo -- Border Text Design using HTML fieldset and legend

好，基於這個，我們就可以去生成各種 N 邊形邊框嵌文字的邊框了。下面是簡單的嘗試 幾種多邊形邊框。

CodePen Demo -- fieldset and legend generate polygon

 

最後

本文到此結束，希望對你有幫助 :)

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章