<legend 属性="属性值">~标签内容~</legend>
| 属性 | 属性值 | 说明 |
|---|---|---|
| ① align | 预定义值:top | 设置控件逻辑组标题相对于fieldset的显示位置。
|
| ② accesskey | 任意一个文字 | 指定快捷访问键，Windows下为Alt键加上此快捷访问键，Macintosh下为Command键加上此快捷访问键 |
③ 通用属性：id、class、title、style、dir、lang、xml:lang  |
||
<legend>…</legend>
</fieldset>
下面的例子显示了XHTML文件基础结构：
运行
打印 <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单综合测试</title>
<meta name="Keywords" content="liuming,QQ395310500,[email protected]">
<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> <button type="button" accesskey="f" style="width:100px">删除文件(<u>F</u>)...</button> <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> <button type="button" accesskey="n" style="width:92px">字体(<u>N</u>)...</button> <button type="button" accesskey="l" style="width:92px">语言(<u>L</u>)...</button> <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"> <input type="reset" value="取消" style="width:80px"> <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="联系作者">© copyright liuming 2008</span></div>
</body>
</html>
label、fieldset及legend都是用来控制表单的布局的，可以让表单界面更友好，同时更易用。