CSS表单生成器

基础表单

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

四种常见风格

浮动标签最为美观，但需要额外的标记或 JavaScript 代码来检测空状态；而描边式最为通用。

可访问性检查清单

• 每个输入项均需显示可见标签。切勿仅使用占位符作为标签，该标签在焦点状态下会消失，且无法形成清晰对比。
• <label for> 或包装用的 <label>。两者均有效；使用包装版更为简便。
• 焦点指示器。切勿在没有替代方案的情况下使用 outline: none。键盘用户需要它。
• 错误信息：通过输入端的 aria-describedby 进行链接。切勿仅使用颜色标记错误，需同时添加文字提示或图标。
• 必填字段：需使用required属性。为视力正常的用户在标签中添加视觉标记（星号）。
• 输入类型：可使用 type="email"、type="tel"、type="url" 或 type="number"；移动键盘可适配相应输入方式。
• autocomplete属性：autocomplete="email"、autocomplete="current-password"等。可大幅节省用户的输入时间。

原生验证状态

CSS为表单有效性提供了伪类：

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range（适用于带有最小值/最大值的数值输入）
• :placeholder-shown（为空，可见占位符）
• :user-invalid（无效且用户已交互，适用于错误样式）

:user-invalid伪类是仅在用户执行操作后才显示错误信息的最简洁方式，避免了交互前出现红色边框。该功能于2023年左右在所有主流版本中获得支持。

禁用状态

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

禁用的输入项无法聚焦或提交。如需使其适用于屏幕阅读器，请使用 readonly，该表单可提交数值，但用户无法编辑。