Bộ :requiredchọn lớp giả trong CSS cho phép tác giả chọn và tạo kiểu cho bất kỳ phần tử phù hợp nào với requiredthuộc tính. Biểu mẫu có thể dễ dàng chỉ ra trường nào phải có dữ liệu hợp lệ trước khi có thể gửi biểu mẫu, nhưng cho phép người dùng tránh phải chờ đợi phát sinh do máy chủ là người xác thực duy nhất đầu vào của người dùng.
Giả sử chúng ta có một đầu vào có thuộc tính là type="name"và đặt nó thành đầu vào bắt buộc bằng cách sử dụng requiredthuộc tính boolean 1 :
Bây giờ chúng ta có thể tạo kiểu đầu vào đó bằng :requiredbộ chọn lớp giả:
/* style all elements with a required attribute */ :required ( background: red; )Chúng tôi cũng có thể tạo kiểu cho các trường biểu mẫu bắt buộc bằng cách sử dụng các bộ chọn đơn giản cũng như xâu chuỗi các bộ chọn lớp giả bổ sung với nhau:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Bản giới thiệu
Xem Bút: Bắt buộc tạo kiểu của Chris Coyier (@chriscoyier) trên CodePen.
Điểm quan tâm
Các requiredthuộc tính được đối xử như một boolean có nghĩa là nó không đòi hỏi một giá trị. Chỉ cần có requiredtrên một phần tử cho phép trình duyệt biết thuộc tính này tồn tại và đầu vào tương ứng trên thực tế là một trường bắt buộc. Mặc dù, theo thông số W3C, thuộc tính bắt buộc cũng hoạt động với giá trị trống hoặc giá trị có tên thuộc tính.
Thuộc tính bắt buộc cũng yêu cầu trình duyệt sử dụng chú thích gốc, chẳng hạn như thông báo bong bóng được mô tả từ bản trình diễn.
Đối với những đầu vào không được tạo kiểu bằng cách sử dụng :required, tác giả cũng có thể tùy chỉnh các phần tử không bắt buộc bằng cách sử dụng :optionalbộ chọn lớp giả cùng với :invalidvà :validđược kích hoạt khi các yêu cầu dữ liệu của trường biểu mẫu được đáp ứng.
Xác thực biểu mẫu cũng có thể được khen ngợi cùng requiredvới patternthuộc tính để giúp lọc dữ liệu tùy thuộc vào typethuộc tính của đầu vào . Các mẫu có thể được viết dưới dạng một biểu thức chính quy hoặc một chuỗi. Trong ví dụ dưới đây, chúng tôi đang sử dụng một biểu thức chính quy để khớp với cú pháp của một địa chỉ e-mail.
Các :requiredthuộc tính hoạt động trên nút radio. Nếu bạn đặt yêu cầu trên một nút radio (hoặc tất cả), nhóm nút radio cụ thể đó sẽ được yêu cầu. Trên các hộp kiểm, hãy yêu cầu từng hộp kiểm riêng lẻ (được chọn).
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Thuộc tính Boolean : Một số thuộc tính trong HTML5 là thuộc tính boolean. Sự hiện diện của thuộc tính boolean trên một phần tử đại diện cho giá trị true và sự vắng mặt của thuộc tính đại diện cho giá trị false. Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi trống hoặc một giá trị không phân biệt chữ hoa chữ thường cho tên chuẩn của thuộc tính, không có khoảng trắng ở đầu hoặc cuối.