㈠<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++ 读入优化通用模板

    struct ioss { #define endl '\n' ; char obuf[LEN], *oh = obuf; std::streambuf *fb; ioss() { ios::sync ...

  2. 小菜鸟之Cisco

    Switch>enable// Switch#configure// Switch#show vlan//展示vlan接口 Switch(config)#enable password 1234 ...

  3. flower 时区设置

    celery 搭配flower使用,flower默认使用的是UTC时间,那么如何在flower中使用当前城市的时间呢 我的环境 celery 3.1.25 ,python 3.69 1.在 app设置 ...

  4. Spring使用注解实现AOP

    一.AspectJ概述 AspectJ是一个面向切面的框架,它扩展了Java语言.定义了AOP语法,能够在编译期提供代码的织入,它提供了一个专门的编译期用来生成遵守字节编码规范的Class文件. @A ...

  5. 安装gitlab ce

    切换到root用户,安装相关依赖 yum install curl policycoreutils openssh-server openssh-clients service sshd restar ...

  6. 数据库oracle行列的操作(MiTAC)

    1.两个重要的网址(参考): http://lovejuan1314.iteye.com/blog/413694http://www.cnblogs.com/heekui/archive/2009/0 ...

  7. 比特(bit)和字节(Byte)

    比特(bit)和字节(Byte) 基础的内容就不说了,这里是一个小的学习笔记 比特和字节的写法差异与应用场景 标准的写法中,正如标题中写的那样,是通过大小写来区分比特和字节的:比特的b应该是小写,而字 ...

  8. 01 Redis基础

    NoSQL 学名(not only sql) 特点: 存储结构与mysql这一种关系型数据库完全不同,nosql存储的是KV形式 nosql有很多产品,都有自己的api和语法,以及业务场景 产品种类: ...

  9. VS2017 VS2019 无法进入安装界面闪退问题（windows7SP1）

    如果离线安装 Visual Studio 2017/2019出现“即将完成…一切即将准备就绪.”的画面后,等几秒安装程序没有任何错误提示就关闭了,无法继续安装. 解决方法: 将vs_enterpris ...

  10. Linux Exploit系列之二 整数溢出

    整数溢出 虚拟机安装:Ubuntu 12.04(x86) 什么是整数溢出? 存储大于最大支持值的值称为整数溢出.整数溢出本身不会导致任意代码执行,但整数溢出可能会导致堆栈溢出或堆溢出,这可能导致任意代 ...