㈠<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. LZH的多重影分身 qduoj 思维 差分

    LZH的多重影分身 qduoj 思维 差分 原题链接:https://qduoj.com/problem/591 题意 在数轴上有\(n\)个点(可以重合)和\(m\)条线段(可以重叠),你可以同时平 ...

  2. Windows 2008 R2阿里云安全基线检查

    设置密码使用期限策略在管理工具打开本地安全策略,打开路径:安全设置\帐户策略\密码策略,将密码最长使用期限设置为30-180之间,建议值为90,将密码最短使用期限设置为1-14之间,建议值为7. 风险 ...

  3. IdentitiServser4 + Mysql实现Authorization Server

    Identity Server 4官方文档:https://identityserver4.readthedocs.io/en/latest/ 新建2个asp.net core 项目使用空模板 Aut ...

  4. YOLOv3：Demo needs OpenCV for webcam images

    Compiling With CUDA And OpenCV: change the Makefile in the base directory to read: GPU=1 OPENCV=1 ma ...

  5. 关于memset的几个易错点

    memset(void *s,int ch,size_t n); 作用:将s中当前位置后面的n个字节用 ch 替换并返回 s 注意这里是“字节”而非单位长度,memset不会考虑各个类型的单位长度,只 ...

  6. springcloud(十一)-Zuul聚合微服务

    前言 我们接着上一节.在许多场景下,外部请求需要查询Zuul后端的多个微服务.比如一个电影售票手机APP,在购票订单页上,既需要查询“电影微服务”获得电影相关信息,又需要查询“用户微服务”获得当前用户 ...

  7. 08 nginx+uWSGI+django+virtualenv+supervisor发布web服务器

    一.为什么要用nginx,uwsgi? 1 首先nginx 是对外的服务接口,外部浏览器通过url访问nginx, 2nginx 接收到浏览器发送过来的http请求,将包进行解析,分析url,如果是静 ...

  8. weex animation模块 使用指南

    本节学习目标 掌握内置组件animation的使用 我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下 平移 旋转 缩放 背景颜色改变 组件透明图 weex 提 ...

  9. Vue中，过滤器的使用方法！

    Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...

  10. 浏览器行为：Form表单提交

    1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name:最好好吃name属性的唯一性 ...