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的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
box-shadow单边阴影的实现
May 21 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中stream(流)的用法
2014/03/25 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
浅谈Python 递归算法指归
2019/08/22 Python
python怎么删除缓存文件
2020/07/19 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
四风问题自我剖析材料
2014/10/07 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
党员自我评价2015
2015/03/03 职场文书
标枪加油稿
2015/07/22 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers