legend
适用DTD:Strict Transitional Frameset   适用浏览器:All
释义
表单区域组标题(form field set legend)

语法
<legend 属性="属性值">~标签内容~</legend>

说明
legend元素只能出现在fieldset元素中,为fieldset元素所包含的一组控件(逻辑组)提供一个标题(标签)
legend元素在每个fieldset元素中只能出现一次。它是一个行内元素,只能包含文本和其他行内元素
在大多数浏览器中,legend元素都被显示在压在fieldset元素边框线上的位置,这与典型的行内元素又有不同
终止标签不可省略

属性
属性 属性值 说明
align 预定义值:top 设置控件逻辑组标题相对于fieldset的显示位置。
  • top:标题(lengend)放在控件逻辑组(fieldset)的上方,此为默认值。
  • bottom:标题放在群组下方
  • left:放在左边
  • right:放在右边
此属性只可在Transitional、Frameset DTD情况下使用
② accesskey 任意一个文字 指定快捷访问键,Windows下为Alt键加上此快捷访问键,Macintosh下为Command键加上此快捷访问键
③ 通用属性:id、class、title、style、dir、lang、xml:lang 查看
nbsp;

示范
<fieldset>
<legend>
</legend>
</fieldset>

范例
下面的例子显示了XHTML文件基础结构: 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单综合测试</title>
<meta name="Keywords" content="liuming,QQ395310500,feb12345@163.com">
<meta name="author" content="刘明,liuming">
<style type="text/css">
#content{width:410px;border:1px solid gray;font:9pt 宋体;padding:10px }
button{font:9pt 宋体;padding:0px;padding-top:2px;margin-top:5px}
select,option{font:9pt 宋体;}
.txt {height:15px;font-family:verdana;margin-left:2px;width:276px}
fieldset {margin:6px;padding:9px 5px}
.new{height:15px;font-family:verdana;margin-left:2px;width:276px;color:red;font-weight:bold}
</style>
</head>

<body>
用HTML表单区域模拟IE设置面板
<hr>
<script type="text/javascript">
function set_default(){
document.form1.txt.value="http:\/\/www.microsoft.com\/isapi\/redir.dll?prd=ie&pver=6&ar=msnhome";
}
function set_blank(){
document.form1.txt.value="about:blank";
}
function form_test()
{
document.form1.txt.value="这只是一个模拟测试,谢谢!"
document.form1.txt.className="new"
document.form1.app.disabled=false;
}
</script>
<form action="javascript:form_test()" name="form1">
<div id="content" oncontextmenu="return false">
<fieldset><legend>主页</legend>
<img src="src/home.gif" width="32" height="32" align="left" hspace="5" vspace="3"><span style="line-height:180%">可以更改主页。</span>
<div align="right"><span style="line-height:180%">地址(R):</span> <input type="text" name="txt" value="about:blank" accesskey="r" size="45" class="txt"></div>
<div align="right"><button type="button" disabled>使用当前页(<u>C</u>)</button> <button type="button" accesskey="d" onclick="set_default()">使用默认页(<u>D</u>)</button> <button type="button" accesskey="b" onclick="set_blank()">使用空白页(<u>B</u>)</button></span>
</div></fieldset>

<fieldset><legend>Internet 临时文件</legend>
<img src="src/web_temp.gif" width="32" height="32" align="left" hspace="5" vspace="3">所查看的Internet 页存储在特定的文件夹中,这样可以提高以后浏览的速度。<br>
<div align="right"><button type="button" accesskey="i" style="width:120px">删除 Cookies(<u>I</u>)...</button>&nbsp;<button type="button" accesskey="f" style="width:100px">删除文件(<u>F</u>)...</button>&nbsp;<button type="button" accesskey="s" style="width:85px">设置(<u>S</u>)...</button>
</div></fieldset>
<fieldset><legend>历史记录</legend>
<img src="src/history.gif" width="32" height="32" align="left" hspace="5" vspace="3">“History”文件夹包含有已访问网页的链接,可使用户快速访问最近查看过的页。<br>
<div align="right">网页保存在历史记录中的天数(<u>K</u>):<select accesskey="k">
<option selected>20</option>
<option>40</option>
<option>60</option></select>
<button type="button" style="width:110px">清除历史记录(<u>H</u>)</button></div>
</fieldset>
<div align="center"><button type="button" accesskey="o" style="width:92px">颜色(<u>O</u>)...</button>&nbsp;<button type="button" accesskey="n" style="width:92px">字体(<u>N</u>)...</button>&nbsp;<button type="button" accesskey="l" style="width:92px">语言(<u>L</u>)...</button>&nbsp;<button type="button" accesskey="e" style="width:104px">辅助功能(<u>E</u>)...</button>
</div>
</div>
<div align="right" style="width:432px;padding-top:5px"><input type="submit" value="确定" style="width:80px">&nbsp;<input type="reset" value="取消" style="width:80px">&nbsp;<button type="button" disabled style="width:80px" name="app" onclick="alert('测试完成,谢谢使用')">应用(<u>A</u>)</button></div>
</form>
<div align="center" style="font-size:10px;font-family:verdana">
<hr size="1">
<span onclick="location.href='http:\/\/bbs.qq.com\/cgi-bin\/friend\/user_show_info?ln=395310500'" title="联系作者">&copy; copyright liuming 2008</span></div>
</body>
</html>

legend很难使用CSS取得一致的样式,虽然可以改变文字大小、字体族及颜色,但是背景、边距及衬距很难取得一致。所以尽量让浏览器以自己的样式显示,少用CSS控制它的样式。
label、fieldset及legend都是用来控制表单的布局的,可以让表单界面更友好,同时更易用。

参阅
form
select
input
textarea
button
fieldset