資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中顯示 fieldset？
Fieldset 是 HTML 中的一個元素，用於對相關元素進行分組。它對於將表單欄位組織成合乎邏輯的分組非常有用。
為了區別於網頁中的其他部分，它在相關元素周圍添加了一個邊框。<lagend> 標籤用於定義 <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 建立欄位集的另一個示例 −
<!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 中建立兩個欄位集的另一個示例 −
<!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>
更新於： 06-Oct-2023
521 次觀看
廣告