定义和用法

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

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

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

HTML 4.01 与 HTML 5 之间的差异

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

属性

属性 值 描述 HTML4 HTML5
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标签的更多相关文章

  1. HTML5<fieldset>标签

    1.<fieldset>标签对表单中的相关元素进行分组. 2.<fieldset>标签会在相关表单元素周围绘制边框. <!DOCTYPE html><html ...

  2. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  3. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  4. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  5. 来吧，HTML5之基础标签(下)

    <dialog> 标签 定义对话框或窗口. <dialog> 标签是 HTML 5 的新标签.目前只有 Chrome 和 Safari 6 支持 <dialog>  ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  7. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  8. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  9. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

随机推荐

  1. Linux C 文件与目录2 文件的打开与关闭

    文件的打开与关闭 open和close 文件的打开指的是从磁盘中找到一个文件,返回一个整形的打开文件顺序的编号.打开的文件处于可读.可写状态.文件的关闭指的是释放打开的文件,是文件处于不可读写的状态. ...

  2. JavaScript深复制

    转载:http://blog.csdn.net/wanmingtom/article/details/7988284 这原本是StackOverFlow里的一个提问,看到答案后受益良多,于是翻译一下下 ...

  3. Abstract Class与 Interface 的区别

    表格                                                                                               Abs ...

  4. 团队开发之《极速蜗牛》NABC分析

    一.简介 项目名称:极速蜗牛 特点:操作简单,视觉与听觉配合,让用户有最完美的体验. 二.NABC分析 N(need):在人们无时无刻离不开手机的今天,难免有无聊的时候,此刻一款操作简单又能令人们动脑 ...

  5. 【HDOJ】【3506】Monkey Party

    DP/四边形不等式 裸题环形石子合并…… 拆环为链即可 //HDOJ 3506 #include<cmath> #include<vector> #include<cst ...

  6. color mask

    https://msdn.microsoft.com/zh-cn/library/windows/desktop/bb173595(v=vs.85).aspx void OMSetBlendState ...

  7. Auto Layout - 使用总结

    1.要开始使用AutoLayout,请先设置要约束的view的translatesAutoresizingMaskIntoConstraints属性为NO.在xib或者sb中勾选Use Auto La ...

  8. WinHex分析PE格式（2）&& 如何手动添加区段并运行区段

    由于这次文章内容比较多 所以写成DOC文档 为了复习所学的知识,我在原本的软件里试者手动加入区段 ,并写给大家分享,还试试者用LordPE加区段发现竟然失败了, 还是自己动手比较实在,完美运行. 利用 ...

  9. Nsdate的各种常用操作

    // //  NVDate.h // //  Created by Noval Agung Prayogo on 2/5/14. //  Copyright (c) 2014 Noval Agung ...

  10. vs2010创建并使用DLL

    一.为什么需要dll 代码复用是提高软件开发 效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用.比较常见的例子是各种应用程序框架, 如ATL ...