Halo teman-teman jumpa lagi di seri “Belajar HTML” bersama kami sahabatcoding, di seri kali ini kita akan mempelajari “bagimana cara membuat kotak centang atau checkbox”.
Sebelum melanjutkan ke tahap praktikum, saya jelaskan terlebih dahulu tag html yang akan kita gunakan untuk tutorial di seri “Belajar HTML” kali ini.
Input
Tag yang kita gunakan di seri kali ini masih sama dengan seri sebelumnya “bagimana cara membuat textbox atau kotak teks di halaman web” seperti pada di link bawah ini.
Hanya saja pembeda pada seri kali ini adalah parameter type pada tag <input> yang akan kita gunakan adalah type=checkbox . Kegunaan dari inp type checkbox ini adalah untuk memilih beberapa pilihan value yang ada sekaligus dan akan terlihat seperti dibawah ini
Dengan contoh penulisan code dibawah
<h3>Please choose your favorite fruits</h3>
<label for="apple">Apple</label>
<input type="checkbox" id="apple" value="apple">
<label for="orange">Orange</label>
<input type="checkbox" id="orange" value="orange">
<label for="grape">Grape</label>
<input type="checkbox" id="grape" value="grape">Jadi, ketika saya memilih “Apple” dan “Orange” maka value yang akan terkirim adalah ‘apple’ dan ‘orange’
Ok sekarang kita praktekan saja langsung, agar teman-teman mengetahui langsung cara penggunaan dari checkbox ini.
- Seperti biasa teman-teman buat satu folder bernama “tutorial-26 (create checkbox)” di dalam folder “Belajar HTML”. Buat kalian yang baru mengikuti seri “Belajar HTML”, kalian bisa membaca ini.
- Buat satu buah file dengan nama “index.html” seperti biasa pada folder yang kita buat tadi “tutorial-26 (create checkbox)”
- copy code dibawah ini dan paste kan di file “index.html”
- kemudian save dan drag & drop file “index.html” tadi ke browser Anda seperti yang saya jelaskan pada seri sebelumnya.
anda juga bisa langsung mencoba kode di atas dengan klik tombol di bawah “Run Pen”
Untuk teman-teman yang masih bingung bisa mengikuti video tutorial dibawah, kalian juga bisa subscribe channel youtube kami di sahabatcoding
Ok, sekian yang bisa kami sampaikan semoga artikel sederhana ini bisa membantu teman-teman semua. Jangan lupa beri kami “applause 👏👏👏” dan jangan lupa follow kami ya teman-teman.
