码迷,mamicode.com
首页 > Web开发 > 详细

HTML5的fieldset标签

时间:2015-08-06 10:39:32      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

定义和用法

fieldset 元素可将表单内的相关元素分组,绘制一个带标题的框,有如winform开发中的panel。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中有一些新属性,同时不再支持 HTML 4.01 中的一些属性。

属性

属性描述HTML4HTML5
disabled true | false 定义 fieldset 是否可见。 ×
form true | false 定义该 fieldset 所属的一个或多个表单。 ×

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,lang, ref, registrationmark, tabindex, template, title

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

本例演示如何在数据周围绘制一个带标题的框。

<html>
<body>
<fieldset>
<legend>健康信息:</legend>
<form>
<label>身高:<input type="text" /></label>
<label>体重:<input type="text" /></label>
</form>
</fieldset>
<p>如果表单周围没有边框,说明您的浏览器太老了。</p>
</body>
</html>

 

 

演示效果

技术分享

 

测试在IE8,Firefox,Opera,Safari,Chrome中有效

参考:http://www.devdo.net/html5-fieldset.html

HTML5的fieldset标签

标签:

原文地址:http://www.cnblogs.com/manongxiaobing/p/4707086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!