㈠<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. C++多线程基础学习笔记（七）

    一.std::async和std::future的用法 std::async是一个函数模板,std::future是一个类模板 #include <iostream> #include & ...

  2. mysql开启和关闭安全模式

    今天在进行数据库UPDATE的时候出了一个问题,我把非主键的字段当作UPDATE的条件(筛选条件)时,提示了如下的语句 Error Code: 1175. You are using safe upd ...

  3. 宿主机-免密登录Docker容器

    CentOS7 安装Docker 讨论QQ:1586558083 目录 一.检查系统内核 二.安装Docker 2.1 安装 2.2 查看docker版本 2.3 启动docker 三.建立docke ...

  4. 删除链表中重复的结点——牛客剑指offer

    题目描述: 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理 ...

  5. SG函数和SG定理(Sprague_Grundy)

    一.必胜点和必败点的概念 P点:必败点,换而言之,就是谁处于此位置,则在双方操作正确的情况下必败.       N点:必胜点,处于此情况下,双方操作均正确的情况下必胜. 必胜点和必败点的性质:     ...

  6. 转载Spring Data JPA 指南——整理自官方参考文档

    转载:https://blog.csdn.net/u014633852/article/details/52607346 官方文档 https://docs.spring.io/spring-data ...

  7. window10提交代码到码云

    1.创建项目文件夹,例如创建一个"爬虫项目码云仓库" 2.进入项目文件夹,在地址栏输入cmd然后回车,这样就在该文件夹打开了终端 3.终端输入git init初始化项目仓库,此时会 ...

  8. css复杂动画（animation属性）

    1.声明:@keyframes name{   }: 2.涉及到的属性 animation-name:动画名称 animation-duration:单次动画总时长 animation-timing- ...

  9. 转载：JavaWeb 文件上传下载

    转自:https://www.cnblogs.com/aaron911/p/7797877.html 1. 文件上传下载概述 1.1. 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端 ...

  10. 数据绘图工具之Matplotlib

    一.安装:绘图和可视化 pip install matplotlib 我们已经下好了anaconda 包含了绘图工具包 直接导入即可 import matplotlib.pyplotlib as pl ...