不得不说,<fieldset>是个漂亮的家伙。

使用<fieldset>与<legend>可以设计出很好的表单。

<style>
fieldset:nth-child(odd){
border:2px groove #abcdef;
margin-bottom:10px;
}
</style>
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
<fieldset>
<legend>家庭信息</legend>
住址:<input type="text" />
电话:<input type="text" />
</fieldset>
<fieldset>
<legend>个人信息</legend>
姓名:<input type="text" />
性别:<input type="text" /><br/>
籍贯:<input type="text" />
年龄:<input type="text" />
</fieldset>
</form>

  如果无法显示框框,那说明浏览器太老了(嗯,老IE)

简单的应用效果如下。

健康信息 身高: 体重:家庭信息 住址: 电话: 个人信息 姓名: 性别:
籍贯:
年龄:

简单的嵌套效果如下:

  <fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</fieldset>

  

健康信息 身高: 体重:健康信息 身高: 体重:

form中的fieldset标签应用的更多相关文章

  1. python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. [转]Form中控制Tab画布不同标签间切换的方法

    转自:http://yedward.net/?id=68 Form中一般常用的画布类型包括content.stacked.tab这三种,其实content类型的画布是每一个form都必须有的,而且只能 ...

  3. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  4. HTML5的fieldset标签

    定义和用法 fieldset 元素可将表单内的相关元素分组,绘制一个带标题的框,有如winform开发中的panel. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的 ...

  5. 前端 ------ 03 body标签中的相关标签

    列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...

  6. HTML中body相关标签-03

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  7. 03-----body标签中的相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...

  8. fieldset 标签 -- 对表单进行分组

    转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...

  9. html5中的fieldset/legend元素和keygen元素

    html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...

随机推荐

  1. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十四:储存模块

    实验十四比起动手笔者更加注重原理,因为实验十四要讨论的东西,不是其它而是低级建模II之一的模块类,即储存模块.接触顺序语言之际,“储存”不禁让人联想到变量或者数组,结果它们好比数据的暂存空间. . i ...

  2. Sass预定义一些常用的样式

    一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...

  3. Kafka usecase

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 5px; padding: 5; } body { font-family: "Helveti ...

  4. [工具] 将Sublime Text 3配置为C++代码编辑器

    { "path": "C:\\Dev-Cpp\\bin", "cmd": ["g++.exe", "${fil ...

  5. Mavlink - 无人机通讯协议

    http://qgroundcontrol.org/mavlink/start mavlink协议介绍https://pixhawk.ethz.ch/mavlink/ 消息简介 MAVLink简介 M ...

  6. Linux at 定时任务

    命令格式:at[参数][时间]  请注意系统时间是UTC 命令功能:在一个指定的时间执行一个指定任务,只能执行一次.假如该时间已过去,那么就放在第二天执行. /var/spool/mail/这里是任务 ...

  7. HDU 1542 - Atlantis - [线段树+扫描线]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1542 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  8. 蓝桥杯 - 数字排列(今有7对数字) - [两种不同的DFS思路]

    今有7对数字:两个1,两个2,两个3,...两个7,把它们排成一行.要求,两个1间有1个其它数字,两个2间有2个其它数字,以此类推,两个7之间有7个其它数字.如下就是一个符合要求的排列: 171264 ...

  9. UVA 11168 - Airport - [凸包基础题]

    题目链接:https://cn.vjudge.net/problem/UVA-11168 题意: 给出平面上的n个点,求一条直线,使得所有的点在该直线的同一侧(可以在该直线上),并且所有点到该直线的距 ...

  10. python数据结构之树(二叉树的遍历)

    树是数据结构中非常重要的一种,主要的用途是用来提高查找效率,对于要重复查找的情况效果更佳,如二叉排序树.FP-树. 本篇学习笔记来自:二叉树及其七种遍历方式.python遍历与非遍历方式实现二叉树 介 ...