:checked :disabled dan Pseudo Form State
Atur gaya elemen formulir berdasarkan keadaan interaktifnya, seperti checked, disabled, dan required.
:checked :disabled dan Pseudo Form State adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Ikhtisar Kelas Semu Status Formulir
CSS menyediakan kelas semu yang mencerminkan status elemen formulir HTML. Kelas semu ini memungkinkan kontrol formulir yang ditata hanya dengan CSS tanpa JavaScript.
:checked
:checked diterapkan pada kotak centang dan tombol radio saat dipilih, serta pada elemen <option> di dalam elemen select saat dipilih.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked untuk Kotak Centang Kustom
Trik :checked: sembunyikan masukan native, lalu tata kotak kustom menggunakan pemilih saudara bersebelahan yang dipicu oleh :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled dan :enabled
:disabled memilih elemen formulir dengan atribut disabled. :enabled memilih elemen yang dapat digunakan untuk berinteraksi.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required dan :optional
:required memilih masukan dengan atribut required. :optional memilih masukan tanpa atribut tersebut.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid dan :invalid
:valid dan :invalid mencerminkan status validasi formulir native peramban berdasarkan jenis, pola, min/maks, dan batasan wajib diisi.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid dan :user-invalid
Validasi peramban dijalankan segera saat halaman dimuat, bahkan sebelum pengguna berinteraksi. :user-valid dan :user-invalid hanya diterapkan setelah pengguna berinteraksi dengan bidang tersebut — pengalaman pengguna menjadi jauh lebih baik.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown diterapkan ketika masukan menampilkan teks placeholder — artinya bidang tersebut sedang kosong. Gunakan kelas semu ini untuk mendeteksi masukan kosong tanpa JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only dan :read-write
:read-only memilih masukan dengan atribut readonly. :read-write memilih masukan yang dapat diedit.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate diterapkan pada kotak centang dalam status perantara (tidak dicentang maupun tidak dicentang — ditetapkan melalui JavaScript), serta pada tombol radio ketika belum ada pilihan yang dibuat dalam grup tersebut.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range dan :out-of-range
Untuk masukan type="number" atau type="range" dengan min/maks, :in-range dan :out-of-range mencerminkan validitas nilai saat ini terhadap batas-batas tersebut.
<input type="number" min="1" max="10" value="15" />
Cek Cepat
Kelas semu mana yang menerapkan gaya validasi formulir hanya setelah pengguna berinteraksi dengan bidang masukan?
Ringkasan
Kelas semu status formulir CSS mencerminkan validasi formulir native dan status interaksi tanpa JavaScript: :checked, :disabled, :required, :valid, :invalid, dan lainnya. Lebih baik gunakan :user-invalid daripada :invalid untuk pengalaman pengguna yang lebih baik. Gunakan :placeholder-shown untuk mendeteksi bidang yang kosong.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “:checked :disabled dan Pseudo Form State” gratis?
Ya — teks lengkap “:checked :disabled dan Pseudo Form State” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “:checked :disabled dan Pseudo Form State”?
Atur gaya elemen formulir berdasarkan keadaan interaktifnya, seperti checked, disabled, dan required. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “:checked :disabled dan Pseudo Form State” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- :hover :focus :active dan :visited
- :nth-child dan :nth-of-type
- :not() :is() dan :where()
- :checked :disabled dan Pseudo Form State