数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
广告