㈠<label>标签的定义与用法

⑴<label> 标签为 input 元素定义标注（标记）。

⑵label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。

    就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

⑶<label> 标签的 for 属性应当与相关元素的 id 属性相同。

㈡用途

在web项目中，有登陆/注册模块这个，此模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input。在此重点就是美观的布局啦。

㈢label+input的布局方案

⑴将label和input（palcholder关键字提示）分为上下两部分

⑵将label和input（palcholder关键字提示）分为左右两部分（label占据一定的宽度，而label中的字体采用左对齐，右对齐，两端对齐这三种常见的方案），如微博登陆

⑶label和input（palcholder关键字提示）还是分为左右两部分，不同的是label中的字体使用图标代替，如：segment fault社区登陆页面等

⑷只包含input（palcholder关键字提示），如手机淘宝的登陆页面

⑸只显示input（palcholder关键字提示），而label采用浮动并隐藏，当触发input的焦点事件时label显示。如参考JVFloatLabeledTextField


㈢label vs placholder的区分

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

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

㈣用伪类实现的浮动label的案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>用伪类实现的浮动label</title>

<style>

.input-group {

                 position: relative;

                 margin: 20px;

                 font-size: 16px;

}

.input-group>input {

                     display: block;

                     box-sizing: border-box;

                     width: 100%;

                     padding: 1em;

                     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 {

                                  font-style: italic;

                                  color: #cdcdcd;

}

.input-group>input:focus {

                           outline: none;

                           box-shadow: 0.2em 0.8em 1.6em #cdcdcd;

}

.input-group>label {

                     position: absolute;

                     bottom: 0;

                     left: 1em;

                     z-index: -1;

                     visibility: hidden;

                     color: #555555;

                     opacity: 0;

                     transform-origin: 0 0;

                     transform: translate3d(0, 0, 0) scale(0);

                     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;

                                   transform: translate3d(0, -2.4em, 0) scale(1);

}

</style>

</head>

<body>

  <!-- 账号 -->

<div class="input-group">

  <input type="text" id="username" placeholder="用户名/邮箱/卡号">

  <label for="username">账号</label>

</div>

<!-- 密码 -->

<div class="input-group">

  <input type="text" id="password" placeholder="请输入6~8位密码">

  <label for="password">密码</label>

</div>

</body>

</html>

效果图：

 

★代码分析：

⑴设置了 label 的位置（posiion: absolute），并定义了它的层级（z-index: -1）， 显隐性为（visibility: hidden），透明度（opacity: 0）;

⑵设置了input的 placeholder样式，可使用伪元素 ::placeholder 设置其样式；

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

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

⑸这种label浮动的效果是当用户输入内容时（也就是placeholder消失时），label开始浮动。

参考：ttps://blog.csdn.net/weixin_41559723/article/details/83045249

<label>标签的相关内容的更多相关文章

  1. form中label标签对齐，内容右对齐

    给label设置一个固定长度即可: label{      display:inline-block;      width:100px; text-align:right;    }

  2. html之label标签

    label标签为input元素定义标注,label标签与相关元素通过id属性绑定在一起. 相关属性: for:规定label绑定到哪个表单元素 form:规定label字段所属的一个或多个表单 示例代 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  5. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  6. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  7. 前端 HTML 常用标签 head标签相关内容

    HTML常用标签 head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方 ...

  8. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  9. [HTML5]label标签使用以及建议

    for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...

随机推荐

  1. SolidWorks学习笔记6抽壳，加强筋，扫描，放样

    抽壳 概念:移除一个或者多个面,然后将其余的模型外表面向内或者向外偏移相等或者不等的距离 针对不同面设置不同厚度 方向参考 有实体的一侧是内测, 没有实体的一侧是外侧 顺序 先圆角再抽壳 加强筋. 点 ...

  2. 隐蔽的bean没有定义错误：No bean named 'SysJdTypeServiceImpl' is defined

    org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'SysJdTypeServiceImpl ...

  3. lambda常用方法

    一:forEach()  循环遍历 List<Integer> costBeforeTax = Arrays.asList(100, 200, 300, 400, 500); costBe ...

  4. __VA_ARGS__用法

    转载 自定义调试信息的输出 调试信息的输出方法有很多种,  例如直接用printf,  或者出错时使用perror, fprintf等将信息直接打印到终端上, 在Qt上面一般使用qDebug,而守护进 ...

  5. 【转帖】windows命令行中java和javac、javap使用详解(java编译命令)

    windows命令行中java和javac.javap使用详解(java编译命令) 更新时间:2014年03月23日 11:53:15   作者:    我要评论 http://www.jb51.ne ...

  6. Java中的异常处理try catch（第八周课堂示例总结）

    异常处理 使用Java异常处理机制: 把可能会发生错误的代码放进try语句块中. 当程序检测到出现了一个错误时会抛出一个异常对象. 异常处理代码会捕获并处理这个错误. catch语句块中的代码用于处理 ...

  7. git diff 命令介绍

    https://www.jianshu.com/p/6e1f7198e76a https://www.jianshu.com/p/5b6a014ac3db https://blog.csdn.net/ ...

  8. 附录1：arrayanalysis的本地使用（质量控制）

    访问:https://github.com/BiGCAT-UM/affyQC_Module,点击“Download ZIP”,下载得到affyQC_Module-master.zip,解压得到一个af ...

  9. tomcat搭建webDav

    工具准备: tomcat-8.0.53 前言:由于工作需要,希望自己搭建webdav服务端,刚开始用windowsServer 2012 R2版本自带的IIS服务器搭建,搭建好之后浏览器可以访问,但无 ...

  10. 在web项目中配置log4j

    在web.xml中添加如下代码 <context-param> <param-name>contextConfigLocation</param-name> < ...