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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP技术开发技巧分享
2010/03/23 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python中字符串的操作方法大全
2018/06/03 Python
Python-接口开发入门解析
2019/08/01 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
教师一岗双责责任书
2014/04/16 职场文书
村级个人对照检查材料
2014/08/22 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师业务学习材料
2014/12/16 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
试了下Golang实现try catch的方法
2021/07/01 Golang