Bộ tạo biểu mẫu CSS

Biểu mẫu cơ sở

<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; }

Bốn phong cách phổ biến

Nhãn nổi đẹp nhất, nhưng cần thêm mã đánh dấu hoặc JavaScript để phát hiện trạng thái trống. Kiểu có viền lại là phương án phổ biến và phù hợp nhất với hầu hết trường hợp.

Danh sách kiểm tra khả năng truy cập

• Nhãn hiển thị rõ ràng cho từng trường nhập liệu. Không bao giờ dùng placeholder làm nhãn duy nhất – nó sẽ biến mất khi được lấy nét và không đạt yêu cầu về độ tương phản.
• <label for> hoặc thẻ <label> bao quanh. Cả hai đều hợp lệ; cách bao quanh dễ thực hiện hơn một chút.
• Chỉ báo lấy nét: Không bao giờ dùng outline: none mà không có phương án thay thế; người dùng bàn phím rất cần nó.
• Thông báo lỗi: liên kết chúng qua aria-describedby trên trường nhập liệu. Không chỉ dùng màu sắc để đánh dấu lỗi; hãy kèm theo một thông điệp văn bản hoặc biểu tượng.
• Các trường bắt buộc: dùng thuộc tính required; thêm dấu sao (*) vào nhãn cho người dùng nhìn thấy được.
• Loại trường nhập: dùng type="email", type="tel", type="url", type="number"; bàn phím di động sẽ tự thích ứng.
• Các thuộc tính autocomplete: autocomplete="email", autocomplete="current-password", v.v., giúp người dùng tiết kiệm đáng kể thời gian nhập liệu.

Các trạng thái xác thực gốc

CSS sử dụng các lớp giả để kiểm tra tính hợp lệ của biểu mẫu:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (dùng cho các giá trị số có giá trị tối thiểu và tối đa)
• :placeholder-shown (trống, placeholder hiển thị)
• :user-invalid (không hợp lệ và người dùng đã tương tác, phù hợp với các kiểu lỗi)

Lớp giả :user-invalid là cách hiệu quả nhất để hiển thị lỗi chỉ sau khi người dùng thực hiện thao tác, giúp tránh các đường viền đỏ xuất hiện trước khi tương tác diễn ra. Tính năng này đã được triển khai trên tất cả các phiên bản chính vào khoảng năm 2023.

Trạng thái bị vô hiệu hóa

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

Các trường nhập liệu bị vô hiệu hóa không thể được lấy nét hay gửi đi. Nếu bạn muốn chúng vẫn có thể được lấy nét để phục vụ trình đọc màn hình, hãy dùng readonly – biểu mẫu vẫn gửi giá trị nhưng người dùng không thể chỉnh sửa nó.