㈠<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. HDU 1260 Tickets （动态规划）

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. [c++] 用宏定义一个函数

    要点:变量都用括号括起来,防止出错,结尾不需要;.在实际编程中,不推荐把复杂的函数使用宏,不容易调试.多行用\ 要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和 ...

  3. vs2019编译opencv

    序 微软家的宇宙第一ide:visual studio已经更新到了2019版,芒果也更新尝鲜了一遍,体验还不错,建议更新尝尝鲜.芒果顺便使用vs2019编译了一遍opencv,编译过程也非常顺利,以下 ...

  4. spark教程(14)-共享变量

    spark 使用的架构是无共享的,数据分布在不同节点,每个节点有独立的 CPU.内存,不存在全局的内存使得变量能够共享,驱动程序和任务之间通过消息共享数据 举例来说,如果一个 RDD 操作使用了驱动程 ...

  5. python flask解决上传下载的问题

    记录瞬间 最近为了解决一些新的需求,简单介入了flask对文件的上传和下载的方法,并分别使用python和curl模拟发送 代码: #! /usr/bin/env python3 # coding:u ...

  6. js制作留言板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 第三篇 HTML 表单及表格

    表单及表格 表单,常用在登录.注册等地方,这也是一个最基本的.   我们就用登录,来学习什么是表单!   表单 form 标签,在某些好用的编辑工具,比如:WebStorm  你在上面写出form再按 ...

  8. 使用Django的ORM详细操作

    1.自己动手创建数据库 create database 数据库名; 2.在Django项目中设置连接数据库的相关配置(告诉Django连接哪一个数据库) #在数据库相关的配置 DATABASES = ...

  9. 26、Nginx Uwsgi代理

    1.Uwsgi代理基本概述 cgi.fastcgi.wsgi.uwsgi python框架 Django是一个开放源代码的web的框架 Flask是一个使用python编写的轻量级web应用框架 2 ...

  10. httpclient 实现的http工具类

    HttpClient实现的工具类 就是簡單的用http 協議請求請求地址並返回數據,廢話少數直接上代碼 http請求返回的封裝類 package com.nnk.upstream.util; impo ...