資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 HTML 中顯示 fieldset？
Fieldset 是 HTML 中的一個元素，用於對相關的元素進行分組。如果表單欄位按邏輯分組排列，則對使用者很有幫助。
為了使其外觀與網頁的其他部分有所區別，它會在相關元素周圍新增一個邊框。<legend> 標籤用於定義 <fieldset> 的標題。它支援全域性屬性和事件屬性。它與所有瀏覽器相容。
語法
以下是 HTML 中 fieldset 的用法/語法
<fieldset>....</fieldset>
fieldset 中使用的屬性如下所示
屬性用於在 fieldset 中執行以下功能：
disabled - 此屬性指定應停用相關表單元素組。
<fieldset disabled>
form - form 是 fieldset 中使用的屬性，指定當前 fieldset 屬於哪個表單。
<fieldset form="form_id">
name - name 屬性指定 fieldset 的名稱。
<fieldset name="text">
現在讓我們來看不同的例子，以便更好地瞭解 HTML 中的 fieldset：
示例
以下是如何建立一個 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>
示例
以下是如何使用 CSS 建立 fieldset 的另一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: yellow;
}
legend {
background-color: red;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1>Demonstrating fieldset element applying CSS</h1>
<form action="/action_page.php">
<fieldset>
<legend>Student Profile:</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 中建立兩個 fieldset 的另一個示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="utf-8">
<style>
legend {
background-color: green;
color: white;
padding: 5px 10px;
}
#fieldset1 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: grey;
margin: 1px;
padding: 1px;
}
#fieldset2 {
width: 150px;
height: 150px border: 1px dotted black;
background-color: violet;
margin: 1px;
padding: 1px;
}
/* width, border, background color, margin and padding */
</style>
</head>
<body>
<h2> Contact Us </h2>
<form action="https://tutorialspoint.tw/index.html" method="post"">
<fieldset id=" fieldset1">
<legend>Submit button</legend>
<br>
<br>
<center>
<input type="submit" id="mySubmit" value="Submit">
</center>
</fieldset>
<br>
<br>
<fieldset id="fieldset2">
<legend>Reset button</legend>
<br>
<br>
<center>
<input type="reset" value="Reset">
</center>
</fieldset>
</form>
</body>
</html>
更新於：2023年10月6日
523 次瀏覽
廣告