一些话在前面

最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框、单选按钮等要实现左对齐。

从开始入门就被告知table布局已经过时了,当时只知道其然不知其所以然,于是我尝试用了div布局和table布局两种解法。

先上效果图:

table布局表单

HTML结构:

<form action="" class="clearfix" id="reg">
<table class="table-form">
<tbody>
<tr>
<td><label for="address">请输入邮箱地址</label></td>
       <td><input class="i-inpt" type="text" id="address" placeholder="这是一个文本输入框"></td>
<!--<td><input type="text"></td>-->
</tr>
<tr>
<td></td>
<td colspan="2"><span class="help-text">邮箱地址请按要求格式输入 </span></td>
</tr>
<tr>
<td><label for="password">请输入密码</label></td>
<td><input class="i-inpt" type="password" id="password" placeholder="这是一个文本输入框"></td>
</tr>
<tr>
<td><label for="confirm-password">请重新输入密码</label></td>
<td><input class="i-inpt" type="password" id="confirm-password" placeholder="这是一个文本输入框"></td>
</tr>
<tr>
<td></td>
<td colspan="2"><span class="help-text">密码请问6-16位英文数字</span></td>
</tr>
<tr>
<td><label for="sex">性别</label></td>
<td>
<label class="sex" for="male"><input id="male" type="radio" checked="checked" name="sex">男</label>
<label class="sex" for="female"><input id="female" type="radio" name="sex">女</label>
</td>
</tr>
<tr>
<td><label for="city">城市</label></td>
<td>
<select name="select" id="city">
<optgroup label="热门城市">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="">广州</option>
<option value="4">深圳</option>
</optgroup>
<optgroup label="最近访问的城市">
<option value="1">中山</option>
<option value="2">湛江</option>
<option value="3">佛山</option>
<option value="4">南京</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><label for="favorite">爱好</label></td>
<td>
<label class="hobbies" for="sport"><input id="sport" type="checkbox" name="favorite"
value="运动">运动</label>
<label class="hobbies" for="art"><input id="art" type="checkbox" name="favorite"
value="艺术">艺术</label>
<label class="hobbies" for="science"><input id="science" type="checkbox" name="favorite"
value="科学">科学</label>
</td>
</tr>
<tr>
<td><label for="description">个人描述</label></td>
<td>
<textarea id="description" name="description" rows="5" cols="30" wrap="physical"
placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
</td>
</tr>
</tbody>
<tr>
<td colspan="2">
<button class="submit" type="submit">确认提交</button>
</td>
</tr>
</table>
</form>

CSS代码:

table, th, td {
margin:;
padding:;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
* 1.实现表单标签和文本输入框的宽度一致。文本居右对齐,有一定内边距
* 2.设置表单内边距
*/
/*使表格的左边标签都居右,且内边距为10px*/
.table-form {
height: 100%;
width: 100%; /*设置表单表格宽度,使在各浏览器宽度表现一致*/
} select {
width: 4em;
}
.table-form tr td:first-child {
text-align: right;
padding: 10px;
} .i-inpt {
width: 250px;
height: 18px;
} .help-text {
color: #a7a7a7;
} label {
cursor: pointer; /* 设置光标 */
} /*提交按钮*/
.submit {
/*1.设置尺寸和有颜色的边框。
2.用border-radius生成圆角并应用文本阴影。
3.通过使用图像或Webkit特有的渐变功能应用渐变的背景*/
width: 100%;
line-height: 1.5em; /* 使文本居中 */
background: #4090fd;
border: 1px solid #989898;
border-radius: 6px;
box-shadow: 2px 2px 2px #ccc;
color: #FFFFFF;
font-size: 1.5em;
text-shadow: 1px 1px 1px #666;
}

优点:直观方便

  • 使用表格布局,tr元素作为每行的容器,每项内容就有对应的单元格套住,因为table自身的属性,效果直接出来了,外部css代码很少 。

缺点:可维护性差、不够灵活、为了样式牺牲语义化

  • 需要使用属性colspan或rowsapn合并行或列,然后当在某一行增加新的单元格内容的时候,几乎要改变整个表格结构,才能实现标签或者输入框的对齐。例如在这里新增一项内容,则会要重新设置那些跨行的单元格colspan的值。

  • 浏览器解析的时候是以单元格td的最大宽度为基准,所以无法单一调节某个单元格的宽度小于其他的单元格。
<td class="short"><input type="text" id="username" class="text" /></td>
td.short{ width:155px;}
  • 因为每行要用tr元素嵌套,每个单元格要用td嵌套,导致HTML代码庞大。表格只用来显示表格数据,才是该有的语义化使用,也更便于搜素引擎和屏幕阅读器的识别。

div布局表单

HTML结构:

    <form action="" id="reg">
<div class="box">
<label class="u-label" for="address">请输入邮箱地址</label>
<input type="text" id="address" placeholder="这是一个文本输入框" class="i-inpt">
</div>
<div class="box"><span class="help-text">邮箱地址请按要求格式输入 </span>
</div>
<div class="box">
<label class="u-label" for="password">请输入密码</label>
<input type="password" id="password" placeholder="这是一个文本输入框" class="i-inpt">
</div>
<div class="box">
<label class="u-label" for="confirm-password">请重新输入密码</label>
<input type="password" id="confirm-password" placeholder="这是一个文本输入框" class="i-inpt">
</div>
<div class="box"><span class="help-text">密码请问6-16位英文数字</span>
</div>
<div class="box">
<label for="sex" class="u-label">性别</label>
<label class="sex" for="male"><input id="male" type="radio" checked="checked" name="sex">男</label>
<label class="sex" for="female"><input id="female" type="radio" name="sex">女</label>
</div>
<div class="box">
<label class="u-label" for="city">城市</label>
<select name="select" id="city">
<optgroup label="热门城市">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="">广州</option>
<option value="4">深圳</option>
</optgroup>
<optgroup label="最近访问的城市">
<option value="1">中山</option>
<option value="2">湛江</option>
<option value="3">佛山</option>
<option value="4">南京</option>
</optgroup>
</select>
</div>
<div class="box">
<label for="favorite" class="u-label">爱好</label>
<label class="hobbies" for="sport"><input id="sport" type="checkbox" name="favorite"
value="运动">运动</label>
<label class="hobbies" for="art"><input id="art" type="checkbox" name="favorite" value="艺术">艺术</label>
<label class="hobbies" for="science"><input id="science" type="checkbox" name="favorite"
value="科学">科学</label>
</div>
<div class="box">
<label for="description" class="u-label">个人描述</label>
<textarea id="description" name="description" rows="5" cols="30" wrap="physical"
placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
</div>
<div class="box">
<button class="submit" type="submit">确认提交</button>
</div>
</form>

CSS样式:

.box {
margin: 1em;
/*overflow: hidden; !*清理浮动的影响*!*/
}
/* 清理浮动*/
.box:after {
content: ".";
display: block;
height:;
visibility: hidden;
clear: both;
}
.help-text {
color: #a7a7a7;
margin-left: 21em;
} label {
cursor: pointer; /* 设置光标 */
}
.u-label {
float: left; /*设置浮动,此时才能设置宽度,而又不换行*/
width: 20em;
text-align: right;
padding-right: 1em;
}
.i-inpt {
float: left;
width: 250px;
height: 18px;
}
select {
width: 4em;
}

优点:内容与样式分离、可维护性强、能够应对更复杂的表单布局

  • div盒子不像td单元格被限制在父容器table中,可以自由活动。
  • 能够应对更复杂的表单布局,如腾讯QQ注册界面

缺点:需要额外地掌握CSS样式代码控制各种情况

  • label需要设定固定的宽度,才能让表单元素对应排齐,而table的同一列单元格宽度(内容决定)保持一致。
  • 标签与输入框需要通过设置行高和高度(或定位)实现垂直方向对齐,而表格不用。
  • 需要设置label浮动,并清除浮动

小结

  • 表格HTML结构与CSS样式高度绑定,几乎一改要全改。
  • div布局HTML结构与CSS样式高度分离,更灵活。
  • 另外,对于具有父子层级关系的div,我们可以通过设置display:table或display:table-cell等来应用表格的特性。
  • 需要注意的是,不应该过渡使用div,否则多层级的div会让布局更加复杂,难以维护。

以下各大网站的表单注册页面传送门:

参考资料

基于表单布局:分析过时的table结构与当下的div结构的更多相关文章

  1. DIV的表单布局

    表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. 在Tomcat中采用基于表单的安全验证

    .概述   (1)基于表单的验证 基于From的安全认证可以通过TomcatServer对Form表单中所提供的数据进行验证,基于表单的验证使系统开发者可以自定义用户的登陆页面和报错页面.这种验证方法 ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:     1.通过event对象的srcElement属性:     2.通过事件源对象用this传入.     代码如下: <html> <head> ...

  5. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  6. SharePoint 2013 配置基于表单的身份认证

    前 言 这里简单介绍一下为SharePoint 2013 配置基于表单的身份认证,简单的说,就是用Net提供的工具创建数据库,然后配置SharePoint 管理中心.STS服务.Web应用程序的三处w ...

  7. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  8. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用

    //http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...

随机推荐

  1. CF352B Jeff and Periods 模拟

    One day Jeff got hold of an integer sequence a1, a2, ..., an of length n. The boy immediately decide ...

  2. 对状压dp的见解

    看了好几篇博客,终于对一些简单的状压dp有了点了解.就像HDU1074. 有个博客:https://blog.csdn.net/bentutut/article/details/70147989 感觉 ...

  3. STP-6-快速生成树协议-新端口角色,状态和类型以及新链路类型

      IEEE 802.1w快速生成树协议(RSTP)增强了802.1D标准,在设计合理的网络中收敛时间远少于1秒.   端口状态从5个减少到3个 丢弃状态是在端口刚启用时的默认状态,边界端口除外,它的 ...

  4. 图片滚动插件jquery bxslider

    https://www.cnblogs.com/axl234/p/4167196.html

  5. JavaScript权威指南--闭包讲解摘记

    不积跬步无以至千里,不积小流无以成江河. 关于闭包的解释,在<JavaScript权威指南>中讲的很透彻了.今天看了书中的一个段讲解,更加深了对闭包的理解,特此记下,以备查阅. 在同一个作 ...

  6. P1060 开心的金明(动态规划背包问题)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱 ...

  7. Hie with the Pie(状压DP+可以经过多次相同的点要全部走过的最短回路)

    大意:一个人要送n份货,给出一个矩阵,表示任意两个点间的直接路径长度,求从起点0送完这n份货(到达指定的n个地点)再回到起点0的最短时间.经过任意顶点的次数不限. 分析:既然是可以过多个点,那我们可以 ...

  8. lintcode - 被围绕的区域

    class Solution { public: /* * @param board: board a 2D board containing 'X' and 'O' * @return: nothi ...

  9. java 学习原生jdbc

    public class App { public static void main( String[] args ) { //JDBC驱动 String driverName = "com ...

  10. A. Free Cash

    A. Free Cash time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...