資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在不使用<fieldset>標籤的情況下實現類似<fieldset>的效果？
由於識別可比較資料欄位的簡易性，表單被用於彙總資料，以便所有使用者和客戶都能更容易地理解。此外，透過單獨瞭解每個分組，而不是試圖一次性掌握整個表單，使用者能夠更好地關注更小、更清晰定義的分組。
預設情況下，相關的表單資料欄位使用<fieldset>和<legend>元素組合在一起。在我們深入文章之前，讓我們快速瀏覽一下HTML中的<fieldset>標籤。
HTML <fieldset>標籤
HTML <fieldset>標籤用於分組相關的表單元素。透過使用fieldset標籤和legend標籤，您可以使您的表單更容易被使用者理解。
語法
以下是HTML <fieldset>標籤的語法
<fieldset>.....</fieldset>
現在讓我們深入文章，學習如何在不使用<fieldset>標籤的情況下建立類似<fieldset>的效果。
<fieldset>標籤的替代方案
為了產生類似的分組效果，<div>元素可以與必要的CSS樣式結合使用，作為<fieldset>標籤的HTML替代方案。雖然<fieldset>是專門為分組表單元素而建立的語義元素，但使用帶有自定義樣式的<div>元素可能會為您提供更多設計和佈局選項。
示例
讓我們看下面的例子，我們將使用<div>元素和CSS建立一個類似fieldset的效果。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial-field {
border: 1px solid #DE3163;
border-top: none;
margin: 20px 1px;
padding: 6px;
}
.tutorial-field h1 {
font: 19px verdana;
margin: -15px -5px 0;
}
.tutorial-field h1 span {
float: left;
}
.tutorial-field h1:before {
border-top: 1px solid #DE3163;
content: ' ';
float: left;
margin: 9px 3px 0 -1px;
width: 16px;
}
.tutorial-field h1:after {
border-top: 1px solid #DE3163;
content: ' ';
display: block;
height: 24px;
left: 3px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 9px;
}
</style>
</head>
<body style="background-color:#D5F5E3 ">
<div class="tutorial-field">
<h1>
<span> Basic Details : </span>
</h1>
<div>
<label for="name">Surname:</label>
<br>
<input type="text" name="name">
</div>
<br>
<div>
<label for="name"> Name: </label>
<br>
<input type="text" name="name">
</div>
<br>
<div>
<label for="gender">Gender:</label>
<br>
<input type="radio" name="Gender" value="male">Male <input type="radio" name="Gender" value="female">Female
</div>
</div>
</body>
</html>
當我們執行上面的程式碼時，它將生成一個輸出，其中包含在網頁上顯示的類似fieldset的效果，這是透過使用<div>和CSS實現的。
更新於：2024年1月19日
324 次瀏覽
廣告