浮动标签
时间：2023-04-05 18:14:35
HTML5
在web项目中，有一个非常重要的模块就是登录/注册模块。该模块的主要部分是表单表单。这个form表单包含两个重要的输入组（用户名/密码），每个输入组包括label和input，还有label+input的多种布局方案。不同的设计师有不同的设计风格，不同的前端工程师有不同的实现方式。通过对比发现，目前的方案兼顾了美观和性能。那么，label和input有哪些布局方案呢？label+input布局方案将label和input（palcholder关键字提示）分为上下两部分；//很久以前采用，现在偶尔用到label，input(palcholder关键字提示)分为左右两部分(label占据一定的宽度，label中的字体采用左对齐，右对齐三种常见方案,两端对齐);//案例：微博登录、京东wap登录页面的标签和input（palcholder关键词提示）依然分为左右两部分，不同的是标签中的字体换成了图标；//案例：segmentfaultcommunitylandingpage只包含input（palcholder关键词提示）；//案例：淘宝和掘金开发社区的登陆页面只显示输入（palcholder关键字提示），而标签是浮动隐藏的。当输入的焦点事件被触发时，标签就会被显示出来。//案例：之前的淘宝登陆页面，还是参考JVFloatLabeledTextField等方案，各有优缺点。使用标签字体代替图标更加生动，但是增加了图标的url访问；labels的字体数量不一致，看起来很难看，而且字数一样。这个方案只能说是中规中矩；直接丢弃标签可以使界面简洁美观，但标签具有标签的作用（标签和占位符的作用将在下文详细介绍）；使用浮动标签，添加了动画效果，但是需要引入js。这个方案的性能明显比不带js的方案要高（也有不带js的方案，但是兼容性不是很好）。labelvsplacholderlabel：描述表单元素的作用，用于指定输入的是唯一字段名placeholder：提示用户输入内容的格式。两者看似相似，但职责不同。许多学生在这里犯了一个大错误。错误。如果你需要进一步了解它们，可以参考MDN的动画标签（no-js）。在做用户交互页面的时候，动画化的用户交互往往更容易打动用户。下面介绍一个用伪类实现的浮动标签。HTML代码：account
基本布局CSS代码：.input-group{position:relative;边距：100px20px；font-size:16px;}.input-group>input{display:block;框大小：边框框；宽度：100%；填充：16px；字体大小：16px；行高：1.0；边框：无；border-bottom:1pxsolid#cdcdcd;边界半径：0.4em；transition:box-shadow0.3s;}.input-groupinput::placeholder{color:#cdcdcd;}.input-group>input:focus{outline:none;box-shadow:0.2em0.8em1.6em#cdcdcd;}.input-group>label{position:absolute;底部：50%；左：0；z-指数：-1；可见性：隐藏；颜色：#050505；opacity:0;}首先设置label的位置（posiion:absolute）并定义其层级（z-index:-1）、显式和隐式（visibility:hidden）、透明度（opacity:0）；然后，设置input的placeholder样式，可以使用伪element::placeholder来设置它的样式；最多最后设置一个过渡动画效果。当输入元素标签获得焦点时，使用伪类：focus定义输入元素标签获得焦点时的阴影样式（box-shadow）和轮廓样式（outline）标签浮动效果样式。input-group>label{...-webkit-transform-origin:00;变换原点：00；-webkit-transform:translate3d(0,0,0)scale(0);变换：translate3d(0,0,0)scale(0);-webkit-transition:opacity0.3s,visibility0.3s,transform0.3s,z-index0.3s;过渡：不透明度0.3s，可见性0.3s，变换0.3s，z-index0.3s；}.input-group>input:focus~label{z-index:1;能见度：可见；不透明度：1；-webkit-transform:translate3d(0,-36px,0)scale(1);transform:translate3d(0,-36px,0)scale(1);}在定义标签样式的集合中，添加其初始transform变形效果，同时设置transition过渡效果样式，然后在输入获取时定义焦点，它的兄弟元素label样式很好。这种标签浮动的效果和JVFloatLabeledTextField的效果是不一样的。前者是获得焦点，标签立即开始浮动，而后者是当用户输入内容时（即占位符消失时），标签开始浮动。为了让两者效果一样，我们可以利用伪类可以嵌套的特性，修改.input-group>input:focus~label为.input-group>input:focus:not(:placeholder-shown)~label，这里：placeholder-shown可以定义placeholder的可见隐藏效果，但是它的兼容性不是很好，ie/edge根本不支持，chrome、safari、firefox也可以，具体可以参考我可以用吗。更多伪类和伪元素的知识点总结可以参考伪案例demo等html布局css3动画相关文章
