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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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数组是否为索引数组的实现方法
2013/06/13 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
javascript 函数使用说明
2010/04/07 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python之变量类型和if判断方式
2020/05/05 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
客户经理竞聘演讲稿
2014/05/15 职场文书
呐喊读书笔记
2015/06/30 职场文书
高三物理教学反思
2016/02/20 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python