Membuat Pengecekan Real-Time pada Inputan dengan CSS
Membuat Pengecekan Real-Time pada Inputan - Melakukan pengecekan secara real-time merupakan sesuatu yang sangat disarankan dalam sebuah tampilan UI. Karena dengan begitu user tidak akan bingug lagi untuk melihat berapa inputan atau apa saja inputan yang belum terisi. Pada CSS telah disediakan properti dan value untuk memudahkan kita dalam melakukan pengecekan terhadap suatu inputan. Berikut ini akan saya praktekan bagaimana Membuat Pengecekan Real-Time pada Inputan dengan CSS.
Pada kasus yang akan saya buat berikut ini adalah melakukan pengecekan inputan secara real-time pada form inputan checkbox dan teks inputan. Baiklah langsung saja kita mulai pada praktek yang pertama, yaitu melakukan pengecekan pada checkbox.
1. Checkbox
Buatlah struktur untuk membuat tampilan checkbox terlebih dahulu dengan sintak HTML berikut ini.
<legend>Checkbox :</legend>
<input type="checkbox"> Data 1<br>
<input type="checkbox"> Data 2<br>
<input type="checkbox"> Data 3<br>
<br>Data Terpilih: <b id="chekCount"></b>
<br>Data Tidak Terpilih: <b id="unchekCount"></b>
</fieldset>
Setelah membuat tampilan checkbox seperti diatas, selanjutnya kita akan membuat fungsi real-time untuk mengecek berapa checbox yang sudah dipilih dan belum dipilih dengan sintak CSS.
::root{
counter-reset: tickedBoxCount, unTickedBoxCount;
}
input[type="checkbox"]{
counter-increment: unTickedBoxCount;
}
input[type="checkbox"]:checked{
counter-increment: tickedBoxCount;
}
#chekCount::before{
content: counter(tickedBoxCount);
}
#unchekCount::before{
content: counter(unTickedBoxCount);
}
Setelah itu, simpan filenya kemudian kalian bisa melihat hasilnya pada browser, maka akan terlihat tampilan seperti pada gambar berikut ini.
Jika kalian mengisi checbox tersebut akan terlihat secara real-time berapa checbox yang sudah terisi.
2. Teks Input
Praktek yang kedua, kita akan membuat fungsi yang sama dengan kasus pada checkbox. Pada kasus ini akan dibuat fungsi pengecekan terhadap teks inputan.
Silahkan ketikan sintak HTML berikut untuk membuat teks inputan.
<legend>Data Input :</legend>
<input type="text" placeholder="Data 1"><br>
<input type="text" placeholder="Data 2"><br>
<input type="text" placeholder="Data 3">
<br>Data Terisi: <b id="InputCount"></b>
<br>Data Tidak Terisi: <b id="emptyInputCount"></b>
</fieldset>
Selanjutnya, kita buat fungsi pengecekan real-time terhadap teks inputan dengan sintak CSS berikut ini.
::root{
counter-reset: filledInputCount, emptyInputCount;
}
input[type="text"]{
counter-increment: filledInputCount;
margin-bottom: 10px;
}
input[type="text"]:placeholder-shown{
counter-increment: emptyInputCount;
}
#InputCount::before{
content: counter(filledInputCount);
}
#emptyInputCount::before{
content: counter(emptyInputCount);
}
fieldset {
border: 2px solid #9E4E0F;
border-radius: 5px;
width: 400px;
margin: auto;
}
legend {
font-weight: bold;
}
Kemudian simpan, dan lihat hasilnya pada browser, maka akan terlihat tampilan seperti pada gambar dibawah ini.
Pada teks inputan kita bisa melihat berapa inputan yang sudah terisi sama seperti pada kasus checbox.
Baiklah, cukup sekian tutorial Membuat Pengecekan Real-Time pada Inputan dengan CSS. Semoga tutorial ini bisa bermanfaat dan selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
