数据结构
网络
关系型数据库管理系统
操作系统
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.com/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 次观看
广告