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>
效果图：
★代码分析：
⑴设置了 label 的位置（posiion: absolute），并定义了它的层级（z-index: -1），显隐性为（visibility: hidden），透明度（opacity: 0）;
⑵设置了input的 placeholder样式，可使⽤伪元素 ::placeholder 设置其样式；
⑶设置了⼀个过渡动画效果，当input元素标签获得焦点时，使⽤伪类 :focus 定义了input元素标签获得焦点时的阴影样式（box-shadow）和轮廓样式（outline）。
⑷在定义 label 样式的集合内，添加它的初始 transform 形变效果，同时设置 transition 过渡效果样式，然后定义当 input 获得焦点时，它的兄弟元素 label 的样式即可。
input标签placeholder属性
⑸这种label浮动的效果是当⽤户输⼊内容时（也就是placeholder消失时），label开始浮动。
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。