fieldset: 表单区域分组 legend: 表单区域组标题

2017-06-06 17:01:00
admin
原创
335
<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="j a v a s c r i p t :form_test()" name="form1">
 <div id="content" oncontextmenu="return false">
 <fieldset><legend>主页</legend>
 <img src="/demo/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="/demo/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="/demo/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>
				
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227