css中浮动的label实例分析

这篇文章主要讲解了“css中浮动的label实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css中浮动的label实例分析”吧！
在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于label+input的布局方案多种多样，不同的设计师有不同的设计风格，不同的前端工程师又有不同的实现方式。通过对比发现，现在的方案是既注重美观，又注重性能。
那么，关于label和input都有哪些布局方案呢?
label+input的布局方案
将label和input（palcholder关键字提示）分为上下两部分;//很久以前采用，现在偶尔使用
将label和input（palcholder关键字提示）分为左右两部分（label占据一定的宽度，而label中的字体采用左对齐，右对齐，两端对齐这三种常见的方案）;//案例：微博登陆，jdwap登陆页面等
label和input（palcholder关键字提示）还是分为左右两部分，不同的是label中的字体使用图标代替;//案例：segmentfault社区登陆页面等
只包含input（palcholder关键字提示）;//案例：手淘的登陆页面，掘金开发社区的登陆页面等
只显示input（palcholder关键字提示），而label采用浮动并隐藏，当触发input的焦点事件时label显示。//案例：手淘的之前登陆页面，或者参考JVFloatLabe免费云主机、域名ledTextField等
这几种方案各有优劣，使用label字体用图标代替更形象，但是增加了图标的url访问；label的中的字体个数不一致，看起来不美观，字数相同，这种方案只能说中规中矩；而直接丢弃label，可以使界面简洁美观，但是label有label的作用（下面会详细说label和placeholder的作用）；使用浮动的label，增加了动画效果，但需要引入js，这种方案性能，比起不使用js的明显要高（有一种不用js，但兼容性不是太好的方案）。
labelvsplacholder
label:描述表单元素的角色，用来指定input的是唯一字段名称
placeholder:它提示用户输入内容的格式
它们两个看似类似，但是它们的职责不同，很多同学在这里犯了比较大的错误。
如果需要知道它们更多的内容可参考MDN
带动画的label(no-js)
在做用户交互的页面时，带上动画的用户交互，往往更容易打动用户。下面就介绍一个用伪类实现的浮动label。
HTML代码：
账号

相关推荐: Web前端必看的书籍有哪些

这篇文章将为大家详细讲解有关Web前端必看的书籍有哪些，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先通过在…