使用 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-valid和:user-invalid伪类

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

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

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

注意：:user-valid当用户填写完输入字段并移至另一个输入字段时，伪类会向用户提供反馈。（重构此内容）伪类
的工作方式相同:user-invalid。当您填写一个值然后删除输入的值时，伪类的红色:user-invalid会被触发。

它看起来是这样的

动态图片图片描述

注意：目前，它尚未得到所有浏览器的广泛用户支持。您可以选择在个人项目中使用它，但要小心使用它的:user-valid地方:user-invalid

:user-valid即使使用和存在现有警告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;
}

在上面的代码中，当且仅当placeholder-shown为 false 时，才会触发 outline-color。它仅在占位符不存在时运行（如果已在输入中输入值）

这是测试时的样子（在浏览器上运行）

动态图片图片描述

现在，查看:placeholder-shown上图中的实际效果，您会注意到，在电子邮件输入元素上，红色轮廓会在用户开始输入时立即激活，并且当满足条件（即用户输入正确的电子邮件格式）时，它会变为红色。
现在的问题是，有些用户不喜欢这样，而且它不方便用户使用，因为用户肯定必须输入一堆字符才能找到正确的电子邮件单词。
那么，当我们编写的 CSS 规则由于上述原因而选择无效样式时，我们该怎么做呢？我们使用:focus伪类。

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

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

现在让我们检查一下浏览器上的情况

动态图片图片描述

结论

在本文中，我们了解了伪类，它们有助于使我们的表单更加用户友好。感谢您读到这里。我希望您点赞并将这篇文章分享给您的同行，他们将从中受益。

您可以在这里检查代码库

【智答专家】您身边免费的GPT4.0人工智能Ai助手，免翻！！！无套路！国内直连，支持文本生成、问答、多语言支持、个性化建议、图片生成、代码纠正等等。

使用 CSS 增强表单用户体验：实时反馈技术，实现更好的用户交互

目录

介绍

先决条件

用于实时反馈的 CSS 伪类

结论