后端开发教程 - Java、Spring Boot 实战 - msg200.com
像半专业人士一样制作动画形式✨
你有没有遇到过用占位符代替标签的表单？太恐怖了。
占位符会在你开始输入后消失，即使被 Chrome 等浏览器预填充也会消失。这意味着你无法检查 Google 是否真的在地址输入框中填入了你的地址，总而言之，用户体验 (UX) 非常糟糕。
本文仅涉及表单的前端，我不是帖子和 JavaScript 验证方面的专家。
语义
像半专业人士一样制作动画表单始于表单的良好设置。
<form class="form">
<div class="form__input-container form__input-container--text">
<input type="text" class="form__input form__input--text" id="firstname" name="firstname" placeholder=" " />
<label class="form__label form__label--text" for="firstname">First name: </label>
</div>
[...]
</form>
我对类使用BEM语法，这使得对类似输入的元素进行样式设置变得非常容易，但为了清楚起见，我将只在本文中使用元素名称。
我将输入框和标签放在一个 div 中，这样以后设置样式会更容易。我name给输入框元素添加了一个属性，如果没有这个属性，输入框就没用，也不会发送任何数据。我使用for标签上的这个属性将其链接到输入框的 ID 属性，这样现在点击标签时，焦点就会集中在输入框上。我在输入框后面添加了标签，这样就可以用同级选择器来设置它的样式了 :)。
伪类！
表单元素有很多可用的伪类:valid，您可以使用诸如:checked等内容检查输入的状态。
input:checked + label::after {
left: 0.3rem;
}
选择标签的 ::after 伪元素，该元素是已检查输入的兄弟元素。
可以一次添加多个伪类：
input:placeholder-shown:not(:focus) + label {
position: static;
padding: 10px 20px;
font-size: 1rem;
}
伪:placeholder-shown类仍处于实验阶段，您只能将其用于增强功能，而不是功能。尽管它是一项很棒的增强功能，但您需要在输入元素上添加一个占位符属性才能使其正常工作，但该属性可以为空！
伪类:not允许您检查输入是否不是:focused，CRAZY inception 类型的东西，但非常有趣。
使用 CSS 验证
某些类型的输入元素（例如type="email"）有其内置的验证机制，你也可以为输入元素添加 pattern 属性，以便使用 CSS 进行验证。
但我一直很烦，因为验证在你输入完成之前就已经开始了。我之前承认过，目前对这一点的:placeholder-shown支持并不完善，所以这更像是未来的发展方向。不过，我找到了一种方法，只在你填写完输入内容后才显示错误和验证信息，而不再关注输入本身：
input:not(:placeholder-shown):not(:focus):invalid {
border-bottom: red 2px solid;
}
input:not(:placeholder-shown):not(:focus):valid {
border-bottom: green 2px solid;
}
动画自定义单选按钮
我总是创建自定义单选按钮，因为仍然无法为浏览器的标准单选按钮设置动画，所以我使用伪元素来::before创建::after 它们。
input[type="radio"] + label {
position: relative;
display: block;
padding-left: 30px;
border-radius: 1rem 0 0 1rem; // t
overflow: hidden;
}
// we're actually creating our own radio button styles
input[type="radio"] + label::before,
input[type="radio"] + label::after {
content: '';
position: absolute;
left: 0;
top: 0;
}
input[type="radio"] + label::before {
// this makes up the border around the input
width: 1rem;
height: 1rem;
border: 1px solid black;
border-radius: 50%;
}
input[type="radio"] + label::after {
// this makes up the dot to indicate if it's selected or not
width: 0.5rem;
height: 0.5rem;
background: black;
border-radius: 50%;
top: 50%;
left: -10px;
// because the label has a `overflow: hidden` style the dot will be invisible at -10px
transform: translateY(-50%);
transition: left 0.4s;
}
input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
padding: 0;
}
input[type="radio"]:checked + label::after {
left: 0.3rem; // this makes the dot visible again, only when the input is checked.
}
编辑焦点状态
我知道几乎每个浏览器的标准焦点状态至少可能与你网站的风格不一致。但在你完全移除它之前，请想想那些依赖键盘的用户！添加某种焦点样式真的很容易（不必是点状或蓝色），而且使用键盘的不仅仅是残障人士，还有许多开发者！
注意：伪类可以做更多的事情，这只是冰山一角，例如，您可以检查输入是否正确:disabled。CSS
/HTML 验证并非JavaScript 验证的替代方案，使用脚本进行复杂的检查比将其写入输入模式属性要容易得多。