The :requiredpemilih kelas pseudo dalam CSS membolehkan penulis untuk memilih dan gaya mana-mana elemen dipadankan dengan requiredatribut. Borang dapat dengan mudah menunjukkan bidang mana yang mesti mempunyai data yang sah sebelum borang dapat dikirimkan, tetapi memungkinkan pengguna untuk menghindari penantian yang timbul dengan menjadikan pelayan menjadi satu-satunya pengesahan input pengguna.
Katakan kita mempunyai input dengan atribut type="name"dan menjadikannya input yang diperlukan menggunakan requiredatribut boolean 1 :
Sekarang kita dapat memberi gaya input dengan menggunakan :requiredpemilih kelas semu:
/* style all elements with a required attribute */ :required ( background: red; )Kami juga boleh menggayakan bidang bentuk yang diperlukan dengan menggunakan pemilih sederhana dan juga merantai pemilih kelas pseudo 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 Pen: Gaya yang diperlukan oleh Chris Coyier (@chriscoyier) di CodePen.
Tempat Menarik
The requiredatribut dianggap sebagai boolean yang bermakna ia tidak memerlukan nilai. Dengan hanya requiredmenggunakan elemen membolehkan penyemak imbas mengetahui atribut ini ada dan input yang sesuai sebenarnya adalah bidang yang diperlukan. Walaupun, menurut spesifikasi W3C, atribut yang diperlukan juga berfungsi dengan nilai kosong atau nilai dengan nama atribut.
Atribut yang diperlukan juga meminta penyemak imbas menggunakan keterangan asli seperti mesej gelembung yang digambarkan dari demo.
Untuk input yang tidak digayakan menggunakan :required, penulis juga dapat menyesuaikan elemen yang tidak diperlukan menggunakan :optionalpemilih kelas pseudo :invaliddan :validyang dipicu ketika keperluan data bidang formulir dipenuhi.
Pengesahan borang juga dapat dipuji bersama requireddengan patternatribut untuk membantu menyaring data bergantung pada typeatribut input . Corak boleh ditulis sebagai ungkapan biasa atau rentetan. Dalam contoh di bawah ini, kami menggunakan ungkapan biasa untuk mencocokkan sintaks untuk alamat e-mel.
The :requiredatribut berfungsi pada butang radio. Sekiranya anda memerlukan satu butang radio (atau semua), kumpulan butang radio tertentu akan diperlukan. Pada kotak centang, buat setiap kotak centang yang diperlukan (untuk dicentang).
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Atribut Boolean : Sejumlah atribut dalam HTML5 adalah atribut boolean. Kehadiran atribut boolean pada elemen mewakili nilai sebenarnya, dan ketiadaan atribut mewakili nilai palsu. Sekiranya atribut ada, nilainya mesti berupa rentetan kosong atau nilai yang sepadan dengan huruf besar-kecil untuk nama kanonik atribut, tanpa spasi kosong di depan atau belakang.