Kotak checkbox merupakan sebuah tampilan pada form html dimana pengunjung akan memilih beberapa opsi dengan tanda centang ketika opsi tersebut dipilih.Sederhananya untuk contoh bisa anda copas dan jalankan kode di bawah ini sebagai sampelnya.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
</head>
<body>
<h4>Saya Telah Belajar HTML: </h4>
<form action="daftar.php" method="post">
<input type="checkbox" name="belajarhtml" id="belajarhtml"
value="belajarhtml1"/> Bikin Tabel
<br />
<input type="checkbox" name="belajarhtml2" id="belajarhtml2"
value="belajarhtml2"/> h1, h2, sampai h6
<br />
<input type="checkbox" name="bikinform" id="bikinform"
value="bikinform"/> Bikin Form
</form>
</body>
</html>
<input type="checkbox" name="belajarhtml" id="belajarhtml" />
<label for"belajarhtml"> Bikin tabel</label>
Adapun penambahan yang dimaksud adalah kode yang berwarna biru. Silahkan dicoba pada kode awal di atas dan dijalankan. Ketika mmilih tulisan, otomatis nanti checkbox akan tercentang.
Pada penggunaanya lebih sering digunakan kedua cara di atas secara bersamaan. Ini untuk memastikan bahwasanya yang diinginkan tersebut bisa benar benar terimplementasi. Sebagai contoh secara keseluruhan bisa dijalankan script di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
</head>
<body>
<h4>cara membuat checkbox: </h4>
<form action="daftar.php" method="post">
<label>
<input type="checkbox" name="belajarhtml1" id="belajarhtml1"
value="belajarhtml"/> Bikin Tabel
</label>
<br />
<input type="checkbox" name="belajar2" id="belajar2"
value="belajar2"/>
<label for="belajar2"> memberi judul</label>
<br />
<label for="belajar3" >
<input type="checkbox" name="belajar3" id="belajar3"
value="belajar3"/> membuat form
</label>
</form>
</body>
</html>
Bagaimana? Setelah dijalankan dan anda memilih tulisan saja, maka akan tercentang kotaknya. Ini yang sering digunakan dalam pembuatan form form pengisian biodata.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
</head>
<body>
<h4>Saya Telah Belajar HTML: </h4>
<form action="daftar.php" method="post">
<input type="checkbox" name="belajarhtml" id="belajarhtml"
value="belajarhtml1"/> Bikin Tabel
<br />
<input type="checkbox" name="belajarhtml2" id="belajarhtml2"
value="belajarhtml2"/> h1, h2, sampai h6
<br />
<input type="checkbox" name="bikinform" id="bikinform"
value="bikinform"/> Bikin Form
</form>
</body>
</html>
Terlihat disana ada pilihan yang bisa dicentang. Namun dalam beberapa website pernah ditemukan kotak akan dicentang jika diklik bagian tulisan untuk fitur tersebut bisa dibuat melalui 2 cara beerbeda. Silahkan digunakan salah satu saja nanti.
Mengunakan tag label
Pada kode diatas terlihat kode merah yang mewakili salah satu checkbox berdiri 'bebas'. Agar pengunjung bisa mengisi centang ketika mengklik tulisan maka kode tersebut di taruh di dalam tag <label>... </label>. Contohnya
<label> <input type="checkbox" name="belajarhtml" id="belajarhtml"
value="belajarhtml1"/> Bikin Tabel</label> Untuk melihat hasilnya dari kode di atas silahkan tambahkan <label>... </label> Kemudian jalankan dan lihat apa yang terjadi ketika tulisan dipilih, otomatis nanti checkbox akan tercentang.
Menambahkan atribut for
Untuk cara ke-dua adalah dengan menambahkan <label for="idinput"> Teks</label>. Jika diaplikasikan pada kode di atas, maka bisa ditulis.<input type="checkbox" name="belajarhtml" id="belajarhtml" />
<label for"belajarhtml"> Bikin tabel</label>
Adapun penambahan yang dimaksud adalah kode yang berwarna biru. Silahkan dicoba pada kode awal di atas dan dijalankan. Ketika mmilih tulisan, otomatis nanti checkbox akan tercentang.
Pada penggunaanya lebih sering digunakan kedua cara di atas secara bersamaan. Ini untuk memastikan bahwasanya yang diinginkan tersebut bisa benar benar terimplementasi. Sebagai contoh secara keseluruhan bisa dijalankan script di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
</head>
<body>
<h4>cara membuat checkbox: </h4>
<form action="daftar.php" method="post">
<label>
<input type="checkbox" name="belajarhtml1" id="belajarhtml1"
value="belajarhtml"/> Bikin Tabel
</label>
<br />
<input type="checkbox" name="belajar2" id="belajar2"
value="belajar2"/>
<label for="belajar2"> memberi judul</label>
<br />
<label for="belajar3" >
<input type="checkbox" name="belajar3" id="belajar3"
value="belajar3"/> membuat form
</label>
</form>
</body>
</html>
Bagaimana? Setelah dijalankan dan anda memilih tulisan saja, maka akan tercentang kotaknya. Ini yang sering digunakan dalam pembuatan form form pengisian biodata.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment