不得不说,<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. HDU 2199 Can you solve this equation(二分答案)

    Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  2. 未能加载文件或程序集“XX.XXX.Web”或它的某一个依赖项。试图加载格式不正确的程序

    IIS应用程序池->右键高级设置->启用32位应用程序  设置为true

  3. Git 使用篇二:小组协作开发

    上一片搭建了git远程服务器,那么小组成员在使用git开发的时候都有什么要注意的. 第一步: 首先每个小组成员,在自己本地建立一个目录,作为工作空间,再去git clone 这个远程仓库: git c ...

  4. 计蒜客 31452 - Supreme Number - [简单数学][2018ICPC沈阳网络预赛K题]

    题目链接:https://nanti.jisuanke.com/t/31452 A prime number (or a prime) is a natural number greater than ...

  5. $w=$mysqli->query($sql);

    $db = new mysqli('localhost', 'root', '', 'w'); if($db->connect_error){ die('Connect Error ( '.$d ...

  6. iOS-CoreLocation地理编码(转载)

    一.简单说明 CLGeocoder:地理编码器,其中Geo是地理的英文单词Geography的简写. 1.使用CLGeocoder可以完成“地理编码”和“反地理编码” 地理编码:根据给定的地名,获得具 ...

  7. 5839Special Tetrahedron---hdu5839(计算几何,求特殊四面体个数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5839 给你n个三维的点,然后求这n各点可以构成多少个特殊四面体,特殊四面体满足一下两点: 1.至少有四 ...

  8. A Bug's Life-----poj2492(关系并查集)

    题目链接:http://poj.org/problem?id=2492 题意是问是否存在同性恋, 就是a喜欢b,b喜欢c,a又喜欢c,所以就有同性恋了: #include<stdio.h> ...

  9. kubernetes应用的各种访问方式

    1. 通过 Pod 的 IP 地址访问应用 1.1 Pod 的IP地址 每个Pod 都会被分配一个IP地址,比如下面这儿pod的IP地址是 10.1.79.11. root@kub-node-0:/h ...

  10. Memory consumption of popular Java data types

    http://java-performance.info/memory-consumption-of-java-data-types-2/ 如何在Java中分配超过-Xmx限制的内存 http://i ...