基础 CSS 遵守错误状态

在 Web 开发过程中，我们经常需要向用户展示表单，并且需要在用户填写表单时验证输入。如果用户输入有误，我们需要向用户展示错误状态，以便他们纠正输入。

为了遵循良好的用户体验设计准则，我们需要在表单项出现错误时向用户展示明显的错误状态。这通常包括修改表单项的外观和样式，以便用户知道哪个表单项有错误。

本文将介绍如何使用基础 CSS 来遵守错误状态。

HTML 结构

我们将使用以下 HTML 结构作为示例：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Submit</button>
</form>

在上面的 HTML 代码中，我们创建了一个简单的表单，其中包括一个电子邮件输入框和一个密码输入框。我们还包括了一个提交按钮。

在这个示例中，我们使用了 required 属性，这意味着输入框是必填的。如果用户未填写这些输入框之一，浏览器会给出默认错误提示，我们需要使用 CSS 来自定义这些提示。

CSS 样式

为了遵循良好的用户体验设计准则，我们需要在表单项出现错误时向用户展示明显的错误状态。我们可以使用 CSS 来实现这一点。

以下是一个基本的 CSS 样式来遵循错误状态：

input:invalid {
  border-color: red;
}

上述代码将检查 input 元素是否为无效输入（例如，未通过验证的 required 属性）。如果它是无效输入，则会将其边框颜色设置为红色。

我们还可以添加一些其他的样式，例如错误消息：

input:invalid + span::before {
  content: "Error: ";
  color: red;
}

上述代码将在 input 元素之后显示一个错误消息。如果上述 input:invalid 规则应用，则 span::before 伪元素将显示一个带有红色文本的 Error: 前缀。

如果我们希望涵盖更多类型的表单元素，我们可以使用以下 CSS 代码：

input:invalid,
select:invalid,
textarea:invalid {
  border-color: red;
}

input:invalid + span::before,
select:invalid + span::before,
textarea:invalid + span::before {
  content: "Error: ";
  color: red;
}

上述代码将涵盖各种表单元素（如文本框、下拉框和文本域）。当它们输入无效时，它们的边框颜色将改变，并显示一个红色的错误消息。

结论

在 Web 开发中，遵循良好的用户体验设计准则是非常重要的。为了遵循错误状态，我们需要在表单项出现错误时向用户展示明显的错误状态。使用上述 CSS 样式，我们可以自定义表单项的错误状态外观和样式。