HTML中fieldset标签概述及使用方法


Posted in HTML / CSS onFebruary 01, 2013

一、忏悔
之前HTML没有好好学,导致以前看到控件组样式感觉很新奇,于是就用css实现了一个。但是偶然一次接触了这个标签,才发现so easy。唉!以后学知识不要浅尝辄止,一定要深入进去、全面了解。好了,不喷了,算是自己写给自己的吧,做个警醒。开始学习这个标签了。

二、简述
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。从中提取两层意思:
1.fieldset存在于form里(这样说不准确);
2.分组打包的功能。 field:[fiːld]领域;牧场;旷野;战场;运动场的意思,fieldset则显而易见了,就是“我的地盘听我的”。我给你贴上这一系列标签。
其中<legend> 标签为 fieldset 元素定义标题。

复制代码
代码如下:

<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
HTML / CSS 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 #HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 #HTML / CSS
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
PHP排序算法类实例
2015/06/17 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
jQuery设计思想
2017/03/07 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python对数组进行反转的方法
2015/05/20 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python模拟登陆实现代码
2017/06/14 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
家长会欢迎标语
2014/06/24 职场文书
小升初自荐信范文
2015/03/05 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis