資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中的 fieldset 中包含標題？
在 HTML 中，<legend> 標籤用於包含/定義 <fieldset> 標籤的標題。在繼續之前，讓我們先了解一下什麼是 fieldset。
fieldset 是一個 HTML 元素，用於對相關元素進行分組。如果表單欄位以邏輯組的形式排列，則對使用者很有幫助。為了使其外觀與網頁的其他部分有所區別，它會在相關元素周圍新增一個邊框。以下是 HTML 中 fieldset 的語法
<fieldset>....</fieldset>
<fieldset> 標籤的屬性
以下是 <fieldset> 標籤的屬性：
disabled − disabled 是一個用於 fieldset 的屬性，它指定應停用相關表單元素組。
<fieldset disabled>
form − form 是一個用於 fieldset 的屬性，指定它屬於哪個表單。
<fieldset form="form_id">
name − name 屬性指定 fieldset 的名稱。
<fieldset name="text">
現在讓我們透過不同的示例來更好地瞭解 HTML 中的 fieldset：
向 fieldset 新增標題/說明
要為 <fieldset> 定義說明，可以使用 <legend> 標籤。<legend> 標籤是 <fieldset> 的子標籤，它支援全域性屬性和事件屬性。它與所有瀏覽器相容。
語法
以下是 legend 標籤的語法：
<legend> Content........<legend>
示例
在下面的示例中，我們嘗試使用 <legend> 標籤在 HTML 中的 fieldset 中包含標題：
<!DOCTYPE html>
<html>
<body>
<h1>Displaying the Fieldset</h1>
<form action="/action_page.php">
<fieldset>
<legend>Profile Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
示例
以下是另一個向 fieldset 新增標題的示例。在這裡，我們使用 <legend> 標籤的屬性來對齊標題/說明。
<!DOCTYPE html>
<html>
<body>
<h1>Displaying the Fieldset</h1>
<form action="/action_page.php">
<fieldset>
<legend style="float:right">Profile Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br> <br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
示例
以下是另一個示例：
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #cfcf17;
font-family: sans-serif;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
legend {
font-size: 1.5em;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.fields {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-gap: 1em;
}
}
/* center .btn */
.btn {
display: block;
margin: 0 auto;
background: #374fd6;
padding: 20px;
color: white;
border: none;
font-weight: bold;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<!-- Use the main area to add the main content of the webpage -->
<main>
<form class="grid">
<div class="fields">
<fieldset>
<legend>Customer Information</legend>
<label for="Name">Name</label>
<br>
<input type="text" name="Name" id="Name">
<br>
<br>
<label for="email">Email</label>
<br>
<input type="email" name="email" id="email">
<br>
<br>
<label for="phone">Phone</label>
<br>
<input type="tel" name="phone" id="phone">
</fieldset>
<br>
<fieldset>
<legend>Payement Information</legend>
<label for="cName">Cardholder Name</label>
<br>
<input type="text" name="cName" id="cName">
<br>
<br>
<label for="cNum">Card Number</label>
<br>
<input type="number" name="cNum" id="cNum">
<br>
<br>
<label for="expDate">Expiration Date</label>
<br>
<input type="text" name="expDate" id="expDate" placeholder="MM/YY">
<br>
<br>
<label for="ccv">CCV</label>
<br>
<input type="number" name="ccv" id="ccv">
<br>
<br>
</fieldset>
</div>
<button class="btn" type="submit">Submit</button>
</form>
</main>
<!-- Use the footer area to add webpage footer content -->
<footer>
<p>Student Information</p>
</footer>
</div>
</body>
</html>
更新於： 2023年10月10日
508 次瀏覽
廣告