fieldset标签和legend标签

在表单中，我们可以使用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>

下面是浏览器预览效果图，可以看到整个组中的表单元素全部被禁用了：

fieldset标签和legend标签相关推荐

HTML里的fieldset标签和legend标签
<head><form><fieldset><legend>选择你喜欢吃的水果</legend><p>苹果</p>& ...
fieldset标签、font标签
文献种类:专题技术文献: <fieldset>标签.<font>标签开发工具与关键技术:VS/HTML 作者:吴泽锋撰写时间:2019年6月28日 6.<fields ...
html中legend设置大小,HTML_如何给 legend 标签设定宽度，我们在做表单的时候经常会使 - phpStudy...
如何给 legend 标签设定宽度我们在做表单的时候经常会使用到这样的结构: 哪些浏览器legend标签设定的宽度有效 IE6 IE7 Firefox2 Firefox3 Opera9.0+ Saf ...
R语言可视化包ggplot2改变图例(legend)标签实战
R语言可视化包ggplot2改变图例(legend)标签实战目录 R语言可视化包ggplot2改变图例(legend)的标签实战 #ggplot2图例标签改变语法
css legend框大小,CSS-如何给 legend 标签设定宽度
我们在做表单的时候经常会使用到这样的结构: 哪些浏览器legend标签设定的宽度有效 IE6 IE7 Firefox2 Firefox3 Opera9.0+ Safari3.0+ 当我们使用 CSS ...
html-body标签中相关标签 02
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签列表标签分为三种. 1 ...
html常用标签（form标签）
一.form标签 form标签是html标签中非常重要的一个标签.常用于注册.登录页面的使用. <form action="提交地址" method="提交方式&q ...
03-body标签中相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签列表标签分为三种. & ...
HTML（一）：行级标签、块级标签、其他标签
目录 0.Web前端介绍 0.1 什么是网页 0.2 网页的组成 0.3 开发前的准备一.HTML 1.1 HTML概念 1.1.1 HTML是什么 1.1.2 HTML基本结构 1.1.3 HTM ...

fieldset标签和legend标签

fieldset标签和legend标签相关推荐

最新文章

热门文章