form中的fieldset标签应用
不得不说,<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标签应用的更多相关文章
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- [转]Form中控制Tab画布不同标签间切换的方法
转自:http://yedward.net/?id=68 Form中一般常用的画布类型包括content.stacked.tab这三种,其实content类型的画布是每一个form都必须有的,而且只能 ...
- HTML <fieldset> 标签将表单内的相关元素分组
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...
- HTML5的fieldset标签
定义和用法 fieldset 元素可将表单内的相关元素分组,绘制一个带标题的框,有如winform开发中的panel. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的 ...
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- HTML中body相关标签-03
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- 03-----body标签中的相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...
- fieldset 标签 -- 对表单进行分组
转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...
- html5中的fieldset/legend元素和keygen元素
html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...
随机推荐
- HDU 2199 Can you solve this equation(二分答案)
Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 未能加载文件或程序集“XX.XXX.Web”或它的某一个依赖项。试图加载格式不正确的程序
IIS应用程序池->右键高级设置->启用32位应用程序 设置为true
- Git 使用篇二:小组协作开发
上一片搭建了git远程服务器,那么小组成员在使用git开发的时候都有什么要注意的. 第一步: 首先每个小组成员,在自己本地建立一个目录,作为工作空间,再去git clone 这个远程仓库: git c ...
- 计蒜客 31452 - Supreme Number - [简单数学][2018ICPC沈阳网络预赛K题]
题目链接:https://nanti.jisuanke.com/t/31452 A prime number (or a prime) is a natural number greater than ...
- $w=$mysqli->query($sql);
$db = new mysqli('localhost', 'root', '', 'w'); if($db->connect_error){ die('Connect Error ( '.$d ...
- iOS-CoreLocation地理编码(转载)
一.简单说明 CLGeocoder:地理编码器,其中Geo是地理的英文单词Geography的简写. 1.使用CLGeocoder可以完成“地理编码”和“反地理编码” 地理编码:根据给定的地名,获得具 ...
- 5839Special Tetrahedron---hdu5839(计算几何,求特殊四面体个数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5839 给你n个三维的点,然后求这n各点可以构成多少个特殊四面体,特殊四面体满足一下两点: 1.至少有四 ...
- A Bug's Life-----poj2492(关系并查集)
题目链接:http://poj.org/problem?id=2492 题意是问是否存在同性恋, 就是a喜欢b,b喜欢c,a又喜欢c,所以就有同性恋了: #include<stdio.h> ...
- kubernetes应用的各种访问方式
1. 通过 Pod 的 IP 地址访问应用 1.1 Pod 的IP地址 每个Pod 都会被分配一个IP地址,比如下面这儿pod的IP地址是 10.1.79.11. root@kub-node-0:/h ...
- Memory consumption of popular Java data types
http://java-performance.info/memory-consumption-of-java-data-types-2/ 如何在Java中分配超过-Xmx限制的内存 http://i ...