定义和用法

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. 新安装Ubuntu加载时提示“为/检查磁盘时发生严重错误”的解决方法

    本文部分内容转载自: http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html http://www.aichengxu.com/v ...

  2. 【收藏】Linux添加/删除用户和用户组

    1.建用户: adduser phpq                             //新建phpq用户 passwd phpq                               ...

  3. SQL Server性能优化（3）使用SQL Server Profiler查询性能瓶颈

    关于SQL Server Profiler的使用,网上已经有很多教程,比如这一篇文章:SQL Server Profiler:使用方法和指标说明.微软官方文档:https://msdn.microso ...

  4. 【BZOJ】【1034】【ZJOI2008】泡泡堂BNB

    贪心 类似田忌赛马策略的一个贪心= = 随便YY了一个做法居然A了…… 简单来说就是先强对强,弱对弱,能赢就赢,不能赢就让弱的那个去对强的那个,剩下的人继续依次捉对比赛(继续刚刚的策略),现在人数还是 ...

  5. IOS CoreData 多表查询demo解析

    在IOS CoreData中,多表查询上相对来说,没有SQL直观,但CoreData的功能还是可以完成相关操作的. 下面使用CoreData进行关系数据库的表与表之间的关系演示.生成CoreData和 ...

  6. [noi2011]道路修建 树形dp

    这道题可以说是树形dp的入门题,也可以看成是一道检验[树]这个数据结构的题目: 这道题只能bfs,毕竟10^6的复杂度win下肯定爆栈了: 但是最恶心的还不是这个,实测用printf输出 用cout输 ...

  7. [百度空间] [原]跨平台编程注意事项(三): window 到 android 的 移植

    大的问题 先记录一下跨平台时需要注意的大方向. 1.OS和CPU 同一个操作系统, CPU也可能是不一样的, 比如windows也有基于arm CPU的版本,而android目前有x86,arm,mi ...

  8. JavaScript之Throw、Try 、Catch讲解

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 错误一定会发生 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误: 可能是 ...

  9. python 小试牛刀之信息管理

    这个是之前写的半成品,但是一直没有好好的写完,今晚我把它补充完整,并且贴出了遇到的问题 这个程序并没有处理中文,主要是python 2.7对于中文的支持太蛋疼了,虽然可以设置utf8编码,但是如果列表 ...

  10. 服务端发送xml请求java代码示例

    /** * */ package com.autoyol.pay.cmb.core; import java.io.ByteArrayOutputStream; import java.io.IOEx ...