定义和用法

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. 将inline、template声明和定义在头文件中

    如果要在要在源文件(a.cpp)中内联的展开一个函数(fun),则该源文件(a.cpp)中必须包含此函数(fun)的定义.如果要在多个文件中内联的展开fun,则在所有的源文件中都必须包含fun的定义. ...

  2. Java学习之IO流总结

    ---恢复内容开始--- 流是用来读写数据的,java有一个类叫File,它封装的是文件的文件名,只是内存里面的一个对象,真正的文件是在硬盘上的一块区间,在这个文件里面存放着各种各样的数据,我们想读文 ...

  3. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. l2tp vpn客户端

    1. 添加PPA   sudo apt-add-repository ppa:seriy-pr/network-manager-l2tp   2. 刷新软件包缓存   sudo apt-get upd ...

  5. JavaScript 类型转换

    在 JavaScript 中有 5 中不同的数据类型: string number boolean object function 3 种对象类型: Object Date Array 2 个不包含任 ...

  6. MVC缓存技术

    一.MVC缓存简介 缓存是将信息(数据或页面)放在内存中以避免频繁的数据库存储或执行整个页面的生命周期,直到缓存的信息过期或依赖变更才再次从数据库中读取数据或重新执行页面的生命周期.在系统优化过程中, ...

  7. 03.RedisJava客户端Jedis的使用

    1.Jedis基本使用 使用Jedis客户端使用Redis服务与在服务器上通过redis-cli使用命令基本一样,关于Redis命令请参考:http://www.redis.cn/commands.h ...

  8. 为 PHP 开发者准备的 12 个调试工具

    PHP是在实践中发展迅速并被最多使用的脚本语言:包含了诸如详细的文档.庞大的社区.无数可使用的脚本及支持框架等许多特性.PHP提供的这些特性使得它比Python或Ruby等脚本语言更容易上手. 为构建 ...

  9. zero to one:创业秘籍并不存在，因为任何创新都是新颖独特的，任何权威都不可能具体规定如何创新

    彼得·蒂尔(Peter Thiel)的新作<从0到1>从预售开始就占据美国亚马逊排行榜第一名的位置,被一批创业家和企业家评为“迄今为止最好的商业书”.这是一本关于如何创建创新公司的书,主要 ...

  10. 了解Javascript 变量

    javascript语言变量的作用域可以分为局部变量和全局变量 函数内部定义的变量为局部变量,作用范围在整个函数体内,函数外定义的变量为全局变量,如果在函数内部定义变量时没有使用关键字var,那么该变 ...