在表单中,我们可以使用fieldset标签来给表单元素进行分组。其中,legend标签用于定义某一组表单的标题。
语法:
<fieldset>
<legend>表单组标题</legend>
......
</fieldset>
使用fieldset和legend标签有两个作用:
1.增强表单的语义。
2.可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
如下面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>fieldset标签和legend标签</title>
<style>
form{
width:260px;
margin:0 auto;
}
</style>
</head>
<body>
<form action="index.php" method="get">
<fieldset>
<legend>登录我的网站</legend>
<p>
<label for="name">账号:</label><input type="text" id='name' name="name">
</p>
<p>
<label for="pwd">密码:</label><input type="password" id='pwd' name="pwd">
</p>
<p>
<label>
<input type="checkbox" id='remember' name="remember">记住我
</label>
<input type="submit" value='登录'>
</p>
</fieldset>
</form>
</body>
</html>
浏览器预览效果:
给fieldset设置disabled属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>fieldset标签和legend标签</title>
<style>
form{
width:260px;
margin:0 auto;
}
</style>
</head>
<body>
<form action="index.php" method="get">
<fieldset disabled>
<legend>登录我的网站</legend>
<p>
<label for="name">账号:</label><input type="text" id='name' name="name">
</p>
<p>
<label for="pwd">密码:</label><input type="password" id='pwd' name="pwd">
</p>
<p>
<label>
<input type="checkbox" id='remember' name="remember">记住我
</label>
<input type="submit" value='登录'>
</p>
</fieldset>
</form>
</body>
</html>
下面是浏览器预览效果图,可以看到整个组中的表单元素全部被禁用了:
![](https://i-blog.csdnimg.cn/blog_migrate/03b1ea588c028f97c34ba3a786fb6062.png)