The :requiredpemilih kelas semu di CSS memungkinkan penulis untuk memilih dan gaya setiap elemen cocok dengan requiredatribut. Formulir dapat dengan mudah menunjukkan bidang mana yang harus memiliki data yang valid sebelum formulir dapat dikirim, tetapi memungkinkan pengguna untuk menghindari menunggu karena server menjadi satu-satunya validator dari input pengguna.
Katakanlah kita memiliki input dengan atribut type="name"dan menjadikannya input yang diperlukan menggunakan requiredatribut boolean 1 :
Sekarang kita dapat mengatur gaya input itu menggunakan :requiredpemilih kelas semu:
/* style all elements with a required attribute */ :required ( background: red; )Kita juga dapat mengatur gaya bidang formulir yang diperlukan menggunakan pemilih sederhana serta merangkai pemilih kelas semu tambahan:
/* 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; )Demo
Lihat Pena: Gaya yang diperlukan oleh Chris Coyier (@chriscoyier) di CodePen.
Tempat Menarik
The requiredatribut diperlakukan sebagai boolean berarti tidak memerlukan nilai. Hanya dengan memiliki requiredsebuah elemen memungkinkan browser mengetahui atribut ini ada dan input yang sesuai sebenarnya adalah field yang diperlukan. Meskipun, menurut spesifikasi W3C, atribut yang diperlukan juga berfungsi dengan nilai kosong atau nilai dengan nama atribut.
Atribut required juga meminta browser untuk menggunakan info asli seperti pesan gelembung yang digambarkan dari demo.
Untuk input yang tidak ditata menggunakan :required, penulis juga dapat menyesuaikan elemen yang tidak diperlukan menggunakan :optionalpemilih kelas semu bersama dengan :invaliddan :validyang dipicu saat persyaratan data bidang formulir terpenuhi.
Validasi formulir juga dapat dilengkapi requireddengan patternatribut untuk membantu memfilter data tergantung pada typeatribut input . Pola dapat ditulis sebagai ekspresi reguler atau string. Pada contoh di bawah ini kami menggunakan ekspresi reguler untuk mencocokkan sintaks untuk alamat email.
The :requiredAtribut bekerja pada tombol radio. Jika Anda menempatkan diperlukan pada satu tombol radio (atau semua), kelompok tombol radio tertentu akan diperlukan. Pada kotak centang, buat setiap kotak centang diperlukan (untuk dicentang).
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Atribut Boolean : Sejumlah atribut di HTML5 adalah atribut boolean. Kehadiran atribut boolean pada sebuah elemen merepresentasikan nilai sebenarnya, dan ketiadaan atribut merepresentasikan nilai false. Jika atribut ada, nilainya harus berupa string kosong atau nilai yang cocok tidak peka huruf besar / kecil untuk nama kanonis atribut, tanpa spasi kosong di depan atau di belakang.