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 相关文章推荐
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python re模块介绍
2014/11/30 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python学生管理系统代码实现
2020/04/05 Python
python中id函数运行方式
2020/07/03 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
工厂采购员岗位职责
2014/04/08 职场文书
工作年限证明模板
2014/11/01 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python