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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
background-position百分比原理详解
May 08 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项目中比较通用的php自建函数的详解
2013/06/06 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python实现12306火车票查询器
2017/04/20 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python 为什么说eval要慎用
2019/03/26 Python
Python自动抢红包教程详解
2019/06/11 Python
Python数据正态性检验实现过程
2020/04/18 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
法院答辩状格式
2015/05/22 职场文书
七年级作文之雪景
2019/11/18 职场文书
500字作文之周记
2019/12/13 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
MySQL时区造成时差问题
2022/04/13 MySQL