<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

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

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

HTML 4.01 与 HTML 5 之间的差异

HTML5 拥有如下属性：disabled、form、name，HTML 4.01 中不支持这些属性。

属性

属性 值 描述
disabled disabled 规定应该禁用 fieldset。
form form_id 规定 fieldset 所属的一个或多个表单。
name value 规定 fieldset 的名称。

实例：

<!DOCTYPE HTML>

<html>

<body>

<form>

  <fieldset>

    <legend>健康信息</legend>

    身高：<input type="text" />

    体重：<input type="text" />

  </fieldset>

</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>

</html>

效果如下：

HTML <fieldset> 标签将表单内的相关元素分组的更多相关文章

  1. HTML笔记（五）表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  2. 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON

    简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...

  3. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  4. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  5. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  6. HTML的一些标签以及表单

    HTML的一些标签以及表单 图片标签 属性 说明 src 图像的路径 alt 图像不能显示时的替换文字 title 鼠标悬停时显示的内容 border 设置图像边框的宽度 align 对齐方式 相对路 ...

  7. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  8. HTML5表单内元素的required属性

    当表单内元素(如input.textarea)中有required属性并且值不为false的时候,则该字段不能为空,否则提交失败. <input type="text" au ...

  9. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

随机推荐

  1. Ext.grid.CheckboxSelectionModel状态设置

    直接上代码: var model = grid.getSelectionModel(); model.selectAll();//选择所有行 model.selectFirstRow();//选择第一 ...

  2. 学习RxJS： 导入

    原文地址:http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/ 引子 新手们在异步编程里跌倒时,永远会有这么一个经典问题: ...

  3. Linux - History

    history命令 打印所有命令记录:history 打印最近10条记录:history 10 执行第123条命令记录:!123 重复执行上一条命令:!! 执行最后一次以ls开头的命令:!ls 逐屏列 ...

  4. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  5. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  6. Windows Azure Service Bus (2) 队列(Queue)入门

    <Windows Azure Platform 系列文章目录> Service Bus 队列(Queue) Service Bus的Queue非常适合分布式应用.当使用Service Bu ...

  7. java设计模式（六）--观察者模式

    转载:设计模式(中文-文字版) 目录: 简单目标任务实现 观察者模式介绍 观察者模式代码实现 观察者模式是JDK中使用最多的模式之一,非常有用.我们也会一并介绍一对多关系,以及松耦合(对,没错,我们说 ...

  8. Theano入门神经网络(三)

    附录一个:Keras学习随笔 http://blog.csdn.net/niuwei22007/article/details/49045909 参考 <Python Machine Learn ...

  9. C#指定时间和当前时间的相差的月份、天数

    DateTime 类型有时间的 年月日时分秒等属性,但是获取两个DateTime的 相差月份,就需要自己写了: public static int GetSubMonth(DateTime speci ...

  10. HT for Web基础动画介绍

    在上一篇<基于HT for Web矢量实现3D叶轮旋转>一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介 ...