Membuat Tanda Centang HTML Menggunakan Atribut Checked
Atribut checked pada html digunakan untuk mengindikasi apakah elemen harus diperika ketika laman melakukan loading atau tidak. Atribut ini adalah atribut Boolean atau atribut yang hanya memiliki satu dari dua kondisi nilai TRUE atau FALSE.
Catatan: Atribut checked dapat digunakan dengan elemen <input> hanya ketika bertipe "checkbox" atau "radio".
Sintak: <input type = "checkbox|radio" checked>
Contoh:
Sebelum memahami lebih dalam materi tentang Membuat Tanda Centang HTML Menggunakan Atribut Checked, terlebih dahulu pelajari materi tentang: Mendefinisikan Karakter Encoding HTML Menggunakan Atribut Charset, Fokus Otomatis HTML Menggunakan Atribut Autofocus, dan Menentukan Form Data HTML Menggunakan Atribut Action.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Atribut Checked
</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
BLog Elfan
</h1>
<h2>
HTML Atribut Checked
</h2>
<form >
<input
type="checkbox"
name="check"
value="1"
checked>
Checked by default
<br>
<input
type="checkbox"
name="check"
value="2">
Not checked by default
<br>
</form>
</body>
</html>
Output:
BLog Elfan
HTML Atribut Checked
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Atribut Checked
</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
Blog Elfan
</h1>
<h2>
HTML Atribut Checked
</h2>
<form >
<input
type="radio"
name="check"
value="1"
checked>
Selected by default
<br>
<input
type="radio"
name="check"
value="2">
Not selected by default
<br>
</form>
</body>
</html>
Output:
Blog Elfan
HTML Atribut Checked
Membuat tanda centang HTML menggunakan atribut tercentang (checked) merupakan cara yang umum digunakan untuk menunjukkan status terpilihnya suatu opsi dalam elemen formulir berbasis HTML. Tanda centang atau kotak centang ini sering digunakan dalam berbagai situasi, mulai dari pengisian formulir, pilihan opsi, hingga tugas-tugas yang memerlukan interaksi pengguna, seperti memilih beberapa item atau konfirmasi keputusan.
Pada dasarnya, elemen yang digunakan untuk membuat tanda centang dalam HTML adalah elemen input dengan tipe checkbox. Elemen ini memungkinkan pengguna untuk memilih lebih dari satu opsi dalam satu waktu, berbeda dengan elemen radio yang hanya memungkinkan pilihan tunggal. Tanda centang yang ditampilkan dapat diberi status tercentang atau tidak tercentang, sesuai dengan kondisi pilihan yang dibuat oleh pengguna. Atribut checked sangat penting dalam pengaturan status awal kotak centang tersebut. Atribut ini memberikan informasi kepada peramban bahwa kotak centang harus dalam keadaan terpilih pada saat halaman ditampilkan.
Atribut checked sendiri berfungsi untuk menentukan status awal dari elemen input bertipe checkbox. Jika atribut ini ditambahkan ke dalam elemen input, maka secara otomatis kotak centang akan berada dalam keadaan tercentang saat halaman pertama kali dimuat. Dengan kata lain, pengguna akan melihat kotak centang yang sudah terpilih ketika membuka halaman yang berisi elemen tersebut. Jika atribut ini tidak ada, kotak centang akan ditampilkan dalam keadaan tidak terpilih atau kosong.
Baca Juga:
Pada banyak aplikasi web, kotak centang dengan atribut checked digunakan untuk memberikan umpan balik atau pengaturan status dari suatu pilihan. Misalnya, dalam aplikasi manajemen tugas, kotak centang dapat digunakan untuk menandai apakah tugas tertentu sudah selesai atau belum. Dengan menggunakan atribut checked, kotak centang yang sudah tercentang dapat menunjukkan bahwa tugas tersebut telah diselesaikan, sementara yang tidak tercentang menunjukkan bahwa tugas tersebut masih pending atau belum dikerjakan.
Dalam proses pengembangan halaman web yang melibatkan formulir, kotak centang sangat berguna dalam mengumpulkan data dari pengguna. Misalnya, formulir pendaftaran atau langganan mungkin meminta pengguna untuk menyetujui persyaratan dan ketentuan. Dalam hal ini, kotak centang akan digunakan untuk menunjukkan bahwa pengguna telah membaca dan menyetujui persyaratan tersebut. Saat kotak centang diberi atribut checked, ini dapat menunjukkan bahwa pengguna setuju dengan persyaratan tersebut. Sebaliknya, jika kotak centang tidak tercentang, maka proses persetujuan belum dilakukan.
Selain itu, kotak centang dapat digunakan dalam berbagai jenis pengaturan atau preferensi dalam aplikasi web. Pengguna dapat menyesuaikan preferensi tampilan atau pengaturan aplikasi melalui pilihan yang diberikan dalam bentuk kotak centang. Misalnya, dalam pengaturan akun pengguna di sebuah platform, kotak centang dapat digunakan untuk memungkinkan pengguna memilih apakah ingin menerima pemberitahuan melalui email atau tidak. Status tercentang atau tidak tercentang memberikan kontrol kepada pengguna dalam mengelola pengaturan aplikasi.
Pemanfaatan atribut checked juga sangat berguna dalam hal aksesibilitas. Bagi pengguna dengan kebutuhan khusus, elemen form seperti kotak centang dengan status tercentang atau tidak tercentang memberikan informasi yang jelas mengenai pilihan yang telah dilakukan. Peramban dan pembaca layar biasanya dapat memberikan informasi terkait status tercentang ini kepada pengguna yang membutuhkan bantuan dalam mengakses konten web. Oleh karena itu, penting untuk memastikan bahwa elemen-elemen seperti kotak centang dirancang dengan mempertimbangkan kemudahan akses dan pemahaman.
Meskipun atribut checked sangat berguna dalam banyak situasi, penggunaan kotak centang dalam halaman web harus dilakukan dengan bijak. Terlalu banyak kotak centang dalam satu halaman dapat menyebabkan kebingungan bagi pengguna, terutama jika tidak ada penjelasan yang jelas mengenai fungsi dari setiap kotak centang tersebut. Oleh karena itu, pengelompokan kotak centang dalam kategori yang logis atau pengelompokannya dalam bagian-bagian yang relevan sangat penting untuk meningkatkan pengalaman pengguna.
Selain itu, dalam beberapa kasus, kotak centang dengan atribut checked dapat digunakan untuk memberikan pilihan default. Misalnya, dalam pengisian formulir langganan atau pendaftaran, atribut checked pada kotak centang dapat digunakan untuk menandakan pilihan default yang ingin ditawarkan kepada pengguna. Pilihan default ini dapat mempengaruhi keputusan pengguna untuk melanjutkan pendaftaran atau tidak. Oleh karena itu, penggunaan atribut checked dapat mempermudah alur pengisian formulir bagi pengguna, tetapi tetap memberikan pilihan bagi artibut untuk mengubah keputusan jika diperlukan.
Peran atribut checked dalam pembuatan elemen tanda centang juga berkaitan erat dengan interaktivitas halaman web. Pengguna tidak hanya melihat status tanda centang saat halaman dimuat, tetapi status ini juga dapat berubah seiring dengan interaksi yang dilakukan. Misalnya, pengguna dapat mengklik kotak centang untuk mengubah status terpilihnya kotak tersebut. Hal ini memungkinkan pengalaman yang dinamis, dimana elemen-elemen interaktif merespons tindakan pengguna dengan cepat.
Penting untuk dicatat bahwa meskipun atribut checked dapat menentukan status awal kotak centang, perubahan status kotak centang yang terjadi setelah halaman dimuat biasanya tidak mempengaruhi status halaman secara permanen, kecuali jika perubahan tersebut disertakan dalam pengiriman formulir. Setelah formulir dikirimkan, status tercentang atau tidak tercentang dari kotak centang akan dikirimkan bersama data formulir, yang memungkinkan pihak server untuk memproses informasi tersebut sesuai dengan pilihan yang dilakukan oleh pengguna.
Pada akhirnya, penggunaan atribut checked dalam elemen input bertipe checkbox di HTML memegang peran yang sangat penting dalam membuat halaman web yang lebih interaktif dan fungsional. Dengan memberikan status awal pada kotak centang dan memungkinkan pengguna untuk memilih atau mengubah pilihan, elemen ini tidak hanya meningkatkan pengalaman pengguna, tetapi juga memberikan cara yang efisien dan intuitif dalam mengumpulkan data dari pengguna.
Elemen tanda centang HTML dengan atribut checked juga menunjukkan betapa pentingnya elemen-elemen kecil dalam membangun halaman web yang efektif. Keberhasilan halaman web tidak hanya bergantung pada desain atau tampilan yang menarik, tetapi juga pada bagaimana elemen-elemen interaktif seperti kotak centang diatur dan digunakan dengan tepat. Dengan memahami cara menggunakan atribut checked dan memanfaatkannya dengan bijak, pengembang web dapat meningkatkan kualitas halaman web dan memberikan pengalaman yang lebih baik bagi pengguna.
Referensi Tambahan:
- Cara Mengatur Edit Konten Menggunakan Atribut Contenteditable HTML
- 2 Nilai Utama pada Penggunaan Atribut Data HTML
- 2 Nilai Utama Penggunaan Atribut Data-* pada HTML
- 8 Komponen Pengaturan Penggunaan Atribut Datetime pada HTML
- 3 Nilai Utama Penggunaan Atribut Dir pada HTML
- 2 Contoh Utama Penggunaan Atribut Dirname pada HTML
- 7 Contoh Program Penerapan Atribut Disabled pada HTML
Artikel ini akan dibaca oleh: Melati Permata Julian, Muchammad Bachtiar Al Majid, Muhammad Rifqi Hidayatullah, Muhammad Sultan Anwar, dan Nadhifah Setiadiani.
6 komentar untuk "Membuat Tanda Centang HTML Menggunakan Atribut Checked"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan atribut checked pada html?
BalasHapusKota centang (checked) merupakan jenis tag input dalam HTML. Kotak tersebut digunakan untuk contoh dimana user mungkin ingin memilih beberapa opsi pada dokumen html.
HapusBagaimana cara menampilkan kotak centang pada html?
BalasHapus1. Mulai dengan elemen input.
Hapus2. Setting tipe atribut ke kotak centang.
3. Berikan elemen bidang ID sehingga kode user dapat bekerja secara langsung dengan elemen tersebut.
4. Tenukan value.
5. Tambahkan label.
6. Tambahkan atirbut for ke label.
Apa value dari atirbut checked pada html?
BalasHapusUmumnya value dari atribut checked adalah persegi atau square tetapi mungkin juga memiliki bentuk lain seperti lingkaran. Kotak centang atau checked memungkinkan user untuk memilih nilai tunggal untuk dikirimkan ke dalam suatu formulir atau tidak.
Hapus