在web项目中,有一个很重的模块就是登陆/注册模块,这个模块的主体部分就是一个form表单,这个form表单包含两个重要input组(用户名/密码),每个input组都包含label和input,而关于 label+input 的布局方案多种多样,不同的设计师有不同的设计风格,不同的前端工程师又有不同的实现方式。通过对比发现,现在的方案是既注重美观,又注重性能。

那么,关于label和input都有哪些布局方案呢?

label+input的布局方案

  1. 将label和input(palcholder关键字提示)分为上下两部分; // 很久以前采用,现在偶尔使用
  2. 将label和input(palcholder关键字提示)分为左右两部分(label占据一定的宽度,而label中的字体采用左对齐,右对齐,两端对齐这三种常见的方案); // 案例:微博登陆,jd wap登陆页面等
  3. label和input(palcholder关键字提示)还是分为左右两部分,不同的是label中的字体使用图标代替; // 案例:segment fault社区登陆页面等
  4. 只包含input(palcholder关键字提示); // 案例:手淘的登陆页面,掘金开发社区的登陆页面等
  5. 只显示input(palcholder关键字提示),而label采用浮动并隐藏,当触发input的焦点事件时label显示。 // 案例:手淘的之前登陆页面,或者参考JVFloatLabeledTextField

这几种方案各有优劣,使用label字体用图标代替更形象,但是增加了图标的url访问;label的中的字体个数不一致,看起来不美观,字数相同,这种方案只能说中规中矩;而直接丢弃label,可以使界面简洁美观,但是label有label的作用(下面会详细说label和placeholder的作用);使用浮动的label,增加了动画效果,但需要引入js,这种方案性能,比起不使用js的明显要高(有一种不用js,但兼容性不是太好的方案)。

label vs placholder

label: 描述表单元素的角色,用来指定input的是唯一字段名称

placeholder: 它提示用户输入内容的格式

它们两个看似类似,但是它们的职责不同,很多同学在这里犯了比较大的错误。

如果需要知道它们更多的内容可参考MDN

带动画的label(no-js)

在做用户交互的页面时,带上动画的用户交互,往往更容易打动用户。下面就介绍一个用伪类实现的浮动label。

HTML代码:


<div class="input-group">
<input type="text" id="userName" placeholder="用户名/邮箱/卡号">
<label for="userName">账号</label>
</div>

基本布局css代码:


.input-group {
position: relative;
margin: 100px 20px;
font-size: 16px;
} .input-group>input {
display: block;
box-sizing: border-box;
width: 100%;
padding: 16px;
font-size: 16px;
line-height: 1.0;
border: none;
border-bottom: 1px solid #cdcdcd;
border-radius: 0.4em; transition: box-shadow 0.3s;
} .input-group input::placeholder {
color: #cdcdcd;
} .input-group>input:focus {
outline: none;
box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
} .input-group>label {
position: absolute;
bottom: 50%;
left: 0;
z-index: -1; visibility: hidden;
color: #050505;
opacity: 0;
}

首先,设置了 label 的位置(posiion: absolute),并定义了它的层级(z-index: -1), 显隐性为(visibility: hidden),透明度(opacity: 0);

然后,设置了input的 placeholder样式,可使用伪元素 ::placeholder 设置其样式;

最后,设置了一个过渡动画效果,当input元素标签获得焦点时,使用伪类 :focus 定义了input元素标签获得焦点时的阴影样式(box-shadow)和轮廓样式(outline)。

label浮动效果样式


.input-group>label {
... -webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0);
-webkit-transition:
opacity 0.3s,
visibility 0.3s,
transform 0.3s,
z-index 0.3s; transition:
opacity 0.3s,
visibility 0.3s,
transform 0.3s,
z-index 0.3s;
} .input-group>input:focus ~ label {
z-index: 1;
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, -36px, 0) scale(1);
transform: translate3d(0, -36px, 0) scale(1);
}

在定义 label 样式的集合内,添加它的初始 transform 形变效果,同时设置 transition 过渡效果样式 ,然后定义当 input 获得焦点时,它的兄弟元素 label 的样式即可。

这种label浮动的效果和JVFloatLabeledTextField的效果不同,前者是获取到焦点,label立马开始浮动,而后者是当用户输入内容时(也就是placeholder消失时),label开始浮动。要使两者的效果相同,我们可以使用伪类可以嵌套的特性,修改 .input-group>input:focus ~ label.input-group>input:focus:not(:placeholder-shown) ~ label ,这里的 :placeholder-shown 可以定义 placeholder 的显隐效果,但它的兼容性不太好,ie/edge 压根不支持,chrome和safari,以及Firefox还可以,具体可参考can i use。更多伪类和伪元素知识点总结,可参考pseudo

案例展示

demo

其他

更多关于html layout文章

css3 动画

原文地址:https://segmentfault.com/a/1190000016675704

浮动的label的更多相关文章

  1. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  2. bootstap初识之css

    老师的博客:https://www.cnblogs.com/liwenzhou/p/8214637.html bootstrap中文网:http://www.bootcss.com/ 官网:https ...

  3. jQuery 浮动标签插件,帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  4. html中label宽度设置、非替换元素和替换元素

    <label ></label> 单独对label设置一个width:100px的属性石不起作用的,和float:left或者display:inline-block配合的话 ...

  5. android浮动搜索框

    android浮动搜索框的配置比较繁琐,需要配置好xml文件才能实现onSearchRequest()方法. 1.配置搜索的XML配置文件​,新建文件searchable.xml,保存在res/xml ...

  6. 鼠标指向GridView某列显示DIV浮动列表

    需求: 当GRIDVIEW数据列过多,不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息. 设计:先把需要显示的浮动数据一次过抓取出来.而不是鼠标指向的时候才从 ...

  7. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  8. 复制360于Launcher浮动窗口的屏幕显示内存使用情况(基本版)

    MainActivity如下面: package cc.cc; import android.os.Bundle; import android.view.View; import android.v ...

  9. 抄360于Launcher浮动窗口的屏幕显示内存使用情况(改进版)

    MainActivity例如下列: package cc.cc; import android.os.Bundle; import android.view.View; import android. ...

随机推荐

  1. Git - Merge: refusing to merge unrelated histories

    场景 我在本地有个代码仓库local-A,本地仓库local-A已经和一个远程仓库remote-A关联了. 接着我又在GitHub上新建了一个仓库remote-B,我希望将本地仓库local-A的本地 ...

  2. android intent安装apk

    /** * 安装apk * * @param context * @param apkPath */ public static void installApk(Context context, St ...

  3. Java | 基础归纳 | Map.Entry<String, String>

    public class Test { private static Map<String,String> student; private static void init() { st ...

  4. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  5. asp.net调试技巧

    一眨眼的功夫,自己已经学习asp.net的有一年的功夫了.虽然称不上什么大神,但是也有一点知识的积累.就写一片调试的入门文章给那些刚刚入门迷茫的童鞋们.希望你学习了我这篇文章能从迷茫的生活中找回编程的 ...

  6. 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...

  7. php后端程序开发学习网站梳理

    博主只列举自己经常用到的: 看教学视频:慕课网,网易云课堂,百度传课 看博文和知识点:csdn 看源码:github 刷题:codewars 学习框架:thinkphp官网 下载相关资源:csdn 看 ...

  8. 除虫记——有关WindowsAPI文件查找函数的一次压力测试

    作者:朱金灿 来源:http://blog.csdn.net/clever101 这里说的除虫是指排除bug的意思.今天排除了一个有意思的bug,其中的场景大致是这样的:现在你要统计一个文件夹下非隐藏 ...

  9. arcgis jsapi接口入门系列(3):各种类型的图层添加

    这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...

  10. nmon安装和使用介绍

    使用参考地址:百度中搜索 nmon 博客园 使用文档参考地址:http://nmon.sourceforge.net/pmwiki.php?n=Site.Documentation nmmon地址:h ...