:invalid CSS pseudo-class mewakili elemen <form>, <fieldset>, <input> atau <form> lainnya yang isinya gagal untuk divalidasi
Kelas semu ini berguna untuk menyoroti kesalahan bidang bagi pengguna
:invalid
HTML
<form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> _
CSS
label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; }
Hasil
Dalam contoh ini kami menggunakan :invalid_ bersama dengan <form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> 1, penggabung saudara umum, untuk membuat formulir muncul secara bertahap, jadi formulir awalnya menampilkan item pertama yang harus diselesaikan, dan saat pengguna menyelesaikan setiap item, formulir menampilkan item berikutnya. Ketika seluruh formulir selesai, pengguna dapat mengirimkannya
HTML
<form> <fieldset> <label for="form-name">Name</label><br /> <input type="text" name="name" id="form-name" required /> </fieldset> <fieldset> <label for="form-email">Email Address</label><br /> <input type="email" name="email" id="form-email" required /> </fieldset> <fieldset> <label for="form-message">Message</label><br /> <textarea name="message" id="form-message" required></textarea> </fieldset> <button type="submit" name="send">Submit</button> </form> _
CSS
/* Hide the fieldset after an invalid fieldset */ fieldset:invalid ~ fieldset { display: none; } /* Dim and disable the button while the form is invalid */ form:invalid button { opacity: 0.3; pointer-events: none; } input, textarea { box-sizing: border-box; width: 100%; font-family: monospace; padding: 0.25em 0.5em; } button { width: 100%; border: thin solid darkgrey; font-size: 1.25em; background-color: darkgrey; color: white; }
Hasil
Warna merah biasanya digunakan untuk menunjukkan input yang tidak valid. Orang yang memiliki jenis kebutaan warna tertentu tidak akan dapat menentukan status input kecuali jika disertai dengan indikator tambahan yang tidak bergantung pada warna untuk menyampaikan makna. Biasanya, teks deskriptif dan/atau ikon digunakan
- Memahami Kriteria Sukses 1. 4. 1. W3C Memahami WCAG 2. 0
Jika salah satu tombol radio dalam grup adalah <form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> 2, pseudo-class :invalid diterapkan ke semuanya jika tidak ada tombol dalam grup yang dipilih. (Tombol radio yang dikelompokkan memiliki nilai yang sama untuk atribut <form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> 4 mereka. )
Secara default, Gecko tidak menerapkan gaya ke kelas semu :invalid. Namun, itu menerapkan gaya ("cahaya" merah menggunakan properti <form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> 6) ke pseudo-class <form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> 7, yang berlaku dalam subset kasus untuk :invalid