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媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
Internal修饰符有什么含义
2013/07/10 面试题
家长评语大全
2014/01/22 职场文书
邀请函的格式
2015/01/30 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python