利用 CSS 提升表单用户体验：实时反馈技术实现更佳的用户交互

目录

• 介绍
• 先决条件
• 用于实时反馈的 CSS 伪类
• 结论

介绍

想象一下：你正在填写一份包含多个字段的注册表单。你努力完成填写，却突然收到一个提示框，The value entered input field X is invalid或者在输入字段下方看到一条错误信息。虽然这些方法确实提供了反馈，但还有更人性化的方式来提升用户体验。

任何软件的最终目标都是简化用户的生活，而反馈在实现这一目标中起着至关重要的作用。提供即时、清晰的反馈可以提升用户体验。在本文中，我们将探讨如何使用 CSS 提供实时反馈，从而使您的表单更具响应性和用户友好性。

先决条件

要学习本教程，你只需要具备HTML和CSS的基础知识。就这么简单。开始吧！

用于实时反馈的 CSS 伪类

为了演示如何使用 CSS 伪类在表单中提供实时反馈，我们将使用以下 HTML 和 CSS 代码。代码中包含一些基本的输入字段，方便我们入门。

<form>
    <div>
        <label for="name">Name</label>
        <input 
            type="text" 
            id="name" 
            placeholder="Name"
            required
        />
    </div>

    <div>
        <label for="email">Email</label>
        <input 
            type="email" 
            id="email" 
            placeholder="email@gmail.com"
            required
        />
    </div>

    <div>
        <label for="password">Password</label>
        <input 
            type="password" 
            id="password" 
            placeholder="6+ characters"
            required
            minlength="6"
        />
    </div>

    <button>Submit</button>
</form>

以下是CSS代码：

form{
    padding: 1rem;
    width: 50%;
    div {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

        label{
            font-weight: bold;
            margin-bottom: 5px;
        }

        input{
            padding: 10px;
            border-radius: 5px;
            outline: 2px solid black;
        }
    }

    button{
        padding: 10px 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
}

目前我们掌握的情况如下：

因此，我们将重点关注的伪类是:valid，，，，，，:invalid:user-valid:user-invalid:placeholder-shown:focus

那么，让我们从:valid伪类开始。

我们可以直接在 CSS 文件中使用它来定位输入元素，并检查该输入是否有效，即是否包含所需的元素。

以下是包含该代码的更新后的 CSS 代码片段：

 input:valid{
   outline-color: lightgreen;
 }

outline-color当用户在输入字段中输入有效（可接受）的数据时，我们会将文本颜色更改为浅绿色。

伪类不仅:valid能帮助用户了解他们的输入是否符合要求，:invalid而且对于提升用户体验也同样重要。该伪类允许您设置包含无效数据的输入字段的样式。

:invalid当表单字段中输入的值与预期类型或格式不符时，会触发此伪类。例如，缺少@符号，或者密码太短或低于密码字段的最小长度要求。

现在让我们将:invalid伪类添加到现有的 CSS 代码中。

input:invalid{
  outline-color: red;
}

以下是使用该类后的输出结果:invalid：

这是预期行为，因为输入字段具有该required属性，并且它们目前确实如此。

我们显然不希望这样，但 CSS 还有另一个伪类可以用于这种情况：` :user-validand`:user-invalid伪类。

让我们更新代码以使用:user-valid伪:user-invalid类。

 input:user-valid{
   outline-color: lightgreen;
 }

input:user-invalid{
  outline-color: red;
}

注意：:user-valid伪类会在用户填写完一个输入字段并切换到另一个输入字段时向其提供反馈。（请重新组织此部分）伪类
的工作方式相同:user-invalid。当您填写一个值然后删除该值时，伪类会触发红色提示:user-invalid。

它看起来是这样的

GIF

注意：目前:user-valid尚未:user-invalid全面支持所有浏览器。您可以选择在个人项目中使用它，但请谨慎选择使用场景。

:user-valid即使考虑到使用 ` and` 的现有限制，我们还可以使用另一个伪类user-invalid来避免浏览器兼容性问题，即 `。`。`。`。`。`。`。`。`。`。`。`。`。`。``````:placeholder-shown伪
类:placeholder-shown和:valid` 。` ...:not():not()

input:not(:placeholder-shown):valid{
  outline-color: lightgreen;
}

input:not(:placeholder-shown):invalid{
  outline-color: red;
}

在上面的代码中，只有当 `is_false` 为假时，才会触发轮廓颜色placeholder-shown。它仅在占位符不存在时（即输入框中已输入值）运行。

这是测试后的效果（在浏览器上运行）。

GIF

现在，看看:placeholder-shown上图中的实际效果，你会注意到，在电子邮件输入框中，用户开始输入时，红色轮廓线会立即激活；当满足条件（即用户输入了正确的电子邮件格式）时，轮廓线会变为红色。
问题在于，有些用户不喜欢这种方式，因为它不够友好，用户肯定需要输入很多字符才能找到正确的电子邮件地址。
那么，当我们编写的 CSS 规则由于上述原因选择了无效样式时该怎么办呢？我们可以使用:focus伪类。

将以下代码添加到您的 CSS 中：

input:focus:invalid{
  outline-color: orange;
}

现在让我们在浏览器上看看效果如何。

GIF

结论

在本文中，我们学习了伪类，它可以帮助我们的表单更加用户友好。感谢您阅读至此。如果您觉得这篇文章有用，请点赞并分享给其他可能从中受益的朋友。

您可以在这里查看代码库。

您对这篇文章有什么看法？您知道还有哪些伪类可以用来让表单在 CSS 中立即向用户提供反馈吗？欢迎在下方评论区分享您的想法。