使用HTML和CSS提高表单验证用户体验_html/css_WEB-ITnose
使 label 模拟 placeholder 效果
第一: 需要使用真实的
这里我想表达，如果表单简短并且有明显的模式(如注册或登录)，你可以使用可视的占位符模式，但是可以使用真实的标签进行替代。
建立一个如下所示的表单结构...
HTML
使用 div 作为定位上下文并且将标签直接放置在表单之中。
SCSS
form { max-width: 450px; // positioning context > div { position: relative; // Looks like placeholder > label { opacity: 0.3; position: absolute; top: 22px; left: 20px; } }} 对于光标你不需要做任何操作，因为它们所有语义已经接连起来了。如果点击标签所在区域，输入会被激活。如果点击输入也会被激活。两者均正确。
小诀窍是先放置输入(语义上可行)所以你可以在获取焦点的时候将标签隐藏:
SCSS
form { /* ... */ > div { > input[type="text"], > input[type="email"], > input[type="password"] { &:focus { & + label { opacity: 0; } } } }}
确定必须输入框
可能表单最简单的验证就是使用 required 属性要求这个字段是必填的。浏览器没有比这更快的捕获错误的方式了！
表示有效的输入值
让用户得知字段输入正确。浏览器可以通过使用 :valid CSS 选择器向我们传递这些信息:
SCSS
form { > input[type="text"], > input[type="email"], > input[type="password"] { // show success! &:valid { background: url(images/check.svg); background-size: 20px; background-repeat: no-repeat; background-position: 20px 20px; // continue to hide the label & + label { opacity: 0; } } }}
在这种情况下， :valid 可以确保所要求的条件得到满足，但是这个选择器对于确认输入类型也是十分有用的。
关于验证类型的显示提醒
你也可以要求所输入的值是指定的某一类型，如 email 或者 number 。这里有一些与之相关的 示例 。
这是一个要求必需填写以及必须是一个有效电子邮件地址的格式要求。让我们来看一下这样的用户体验:
- 获取焦点时告知用户要求
- 否则，提醒用户这个输入区域没有获取一个有效值
但是...当输入为空时没有任何提示。也就是说这不是一种无效状态。这只是一种令人烦恼并且会产生不必要的负面影响。为了做到这一点，我们需要知道输入是否为空。
检测输入是否有值
我们想要使用的有 :valid 以及 :invalid ,但是当我们使用 :invalid 时我们不想跳枪，在输入区域有值时使用它。
有没有一种CSS选择器用于判断输入是否为空？并没有！你可能会想象 :empty 可能可以实现，但是并不可以。 :empty 选择器用于匹配如
... 容器元素有没有内容。输入是没有内容的元素。这个诀窍为了确保输入区有一个占位符值，之后:
CSS
input:not(:placeholder-shown) {} 在我们的示例中我们并没有使用占位符，但是有一个单一的空格在起作用:
HTML
:placeholder-shown 在这里使用再适合不过！这是一个拥有检测当前输入是否有值存在的一个秘密选择器。
当前火狐以及IE浏览器并 不支持 此选择器，这是导航区域最为困难的区域。随着新功能的出现，@supports犹如一个救世主，但是...
/* This doesn't work */@supports (input:placeholder-shown) { input:not(:placeholder-shown) { }} 你不能将 @supports 用于选择器，仅可用于键值对(如 @supports(display:flex) )
使用JavaScript检测占位符的支持是十分简单的:
JavaScript
var i = document.createElement('input');if ('placeholder' in i) {} 但是这对于检测 :placeholder-shown 并不是一个简易的方式。所以...这可能需要等待直到得到浏览器更好地支持。
假设已经得到支持，接下来的思维将如何呢？？？
SCSS
form { > div { > input[type="text"], > input[type="email"], > input[type="password"] { // When input is... // 1. NOT empty // 2. NOT in focus // 3. NOT valid &:invalid:not(:focus):not(:placeholder-shown) { // Show a light reminder background: pink; & + label { opacity: 0; } } // When that invalid input becomes in focus (and also still isn't empty) &:invalid:focus:not(:placeholder-shown) { // Show the more robust requirement instructions below. & ~ .requirements { max-height: 200px; padding: 0 30px 20px 50px; } } } // ~ //