浮动的label

Posted 2020-11-15 shihaiying

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动的label相关的知识，希望对你有一定的参考价值。

㈠<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>