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.

<fieldset>
    <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.

/*DATA CHECKBOX*/
::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.

Membuat Pengecekan Real-Time pada Inputan dengan CSS

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.

<fieldset>
    <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.

/*DATA INPUT*/
::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.

Membuat Pengecekan Real-Time pada Inputan dengan CSS

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.

1 Februari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat