Bagaimana cara menggunakan apa itu radio html?

Question

dalam tutorial ini kita akan belajar cara membuat kotak centang dan tombol radio di html. tutorial lanjutan dari mengenali atribut masukan html

Table of Contents Show

Kotak centang atribut dan tombol radio
tag tambahan menerapkan tombol kotak centang dan tombol radio
kelompok tombol
Apa itu radio dalam HTML?
Apa fungsi tombol radio?
Apa fungsi dari kotak centang?
Atribut apa yang digunakan untuk menandai opsi pada tombol radio?

Keterangan

Kotak centang adalah kotak persegi yang dicentang saat diaktifkan

Tombol radio adalah tampilan tombol yang ditampilkan sebagai lingkaran kecil yang diisi atau disorot saat dipilih

checkbox dan tombol radio ditulis dengan tag . penulisan sintaks paling sederhana kotak centang atau tombol radio dengan elemen input dengan atribut type checkbox atau radio.

<input type="checkbox"> 
<input type="radio">
Code language: HTML, XML (xml)

tampilan di atas tombol radio muncul sebagai lingkaran (tidak dicentang) atau lingkaran penuh (dicentang)

kotak centang muncul sebagai kotak (tidak dicentang) atau kotak yang diisi (dicentang)

fungsi kotak centang yang memiliki nilai tunggal digunakan untuk opsi seperti pertanyaan ya atau tidak. misalnya ingat saya untuk mengingat kata sandi, berlangganan buletin untuk berlangganan atau menerima privasi untuk menyetujui kebijakan privasi

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> checkbox tunggal pada html </title>
</head>
<body>
    <label>
        <input type="checkbox"> Remember me
    </label>
    <hr />
    <br>
    <label>
        <input type="checkbox"> Subcribe to newsletter
    </label>
    <hr />
    <br>
    <label>
        <input type="checkbox"> I agree to privacy policy
    </label>
    <hr />
</body>
</html>
Code language: HTML, XML (xml)

kotak centang bersifat independen artinya pengguna dapat memilih opsi sebanyak yang mereka inginkan dalam grup kotak centang

jadi mencentang satu kotak centang tidak menghapus centang dari kotak centang lain di grup kotak centang

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> checkbox multiple pada html </title>
</head>
<body>
    Apa hobi kamu ?
    <hr>
    <input type="checkbox" name="hobi1" value="membaca" />membaca
    <br />
    <input type="checkbox" name="hobi2" value="menulis" />menulis
    <br />
    <input type="checkbox" name="hobi3" value="berenang" />berenang
    <br />
    <input type="checkbox" name="hobi4" value="futsal" />futsal
</body>
</html>
Code language: HTML, XML (xml)

ketika saya memilih "read" dan "write" maka nilai yang akan dikirimkan adalah "read" dan "write"

sedangkan radio button biasanya dikelompokkan dari beberapa radio button yang diidentifikasi menggunakan atribut nama dan nilai atribut nama yang sama pada semua tombol

jika Anda ingin menggunakan tombol radio mungkin lebih baik menggunakan kotak centang

pemilihan tombol radio bersifat eksklusif, artinya pengguna hanya dapat memilih satu opsi dari sekelompok tombol radio

ketika sebuah tombol dicentang, tombol radio lain dengan nama yang sama yang sebelumnya dicentang menjadi tidak dicentang

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> radio button pada html </title>
</head>
<body>
    <input type="radio" name="warna" id="kuning" value="kuning"> Kuning <br>
    <input type="radio" name="warna" id="hijau" value="hijau"> Hijau <br>
    <input type="radio" name="warna" id="biru" value="biru"> Biru
</body>
</html>
Code language: HTML, XML (xml)

tombol radio mirip dengan kotak centang, tetapi perbedaannya adalah tombol radio dirancang untuk memilih satu nilai dari grup, sedangkan kotak centang memungkinkan kita untuk mengaktifkan dan menonaktifkan satu nilai.

tombol radio memungkinkan satu untuk dipilih dari semua, sedangkan kotak centang memungkinkan memilih beberapa nilai

Kotak centang atribut dan tombol radio

kotak centang dan tombol radio memiliki sejumlah atribut untuk mengontrol perilakunya

nilai

seperti elemen input lainnya, atribut nilai menentukan nilai string yang akan dikaitkan dengan tombol saat mengirimkan formulir

jadi nilai yang dikirim ke server adalah nilai dari atribut value

diperiksa

Atribut yang dicentang menentukan status awal kotak centang atau tombol radio. dicentang adalah atribut boolean yang menunjukkan apakah tombol radio atau kotak centang adalah item pilihan default dari beberapa opsi

cara yang valid untuk menentukan tombol radio mana yang dicentang

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> atribut checked input pada html </title>
</head>
<body>
    <input type="radio">
    <input type="checkbox">
    <input type="radio" checked>
    <input type="checkbox" checked="">
    <input type="radio" checked="checked">
    <input type="checkbox" checked="ChEcKeD">
</body>
</html>
Code language: HTML, XML (xml)

di atas adalah tampilan default yang belum dipilih dan sudah dipilih.

tag tambahan menerapkan tombol kotak centang dan tombol radio

label

Label digunakan untuk memberikan konteks pada tombol dan menunjukkan kepada pengguna untuk apa setiap tombol, setiap tombol harus memiliki label

bungkus input menggunakan untuk membuat label dapat diklik, jadi Anda memilih tombol yang sesuai. Contoh:

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> label input pada html </title>
</head>
<body>
    <label>
        <input type="checkbox" name="setuju" value="setuju"> Setuju
    </label>
    <br />
    <label>
        <input type="radio" name="warna" value="merah"> Merah
    </label>
</body>
</html>
Code language: HTML, XML (xml)

atau dengan atribut for disetel ke atribut id dari input

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> label atribut for input pada html </title>
</head>
<body>
    <input type="checkbox" name="setuju" value="setuju" id="setuju">
    <label for="setuju">Setuju</label>
    <br />
    <input type="radio" name="warna" value="merah" id="merah">
    <label for="merah">Merah</label>
</body>
</html>
Code language: HTML, XML (xml)

_

kelompok tombol

Karena setiap tombol radio memengaruhi yang lain dalam grup, biasanya memberikan label atau konteks untuk seluruh grup tombol radio
Untuk memberikan label seluruh grup, tombol radio harus disertakan dengan elemen di dalamnya.
Contoh

Coba Skrip

<!DOCTYPE html>
<html>
<head>
    <title> fieldset input pada html </title>
</head>
<body>
    <fieldset>
        <legend>Pilih warna:</legend> 
        <p>
            <input type="radio" name="warna" value="merah" id="merah">
            <label for="merah">Merah</label>
        </p>
        <p>
            <input type="radio" name="warna" value="kuning" id="kuning">
            <label for="kuning">Kuning</label>
        </p>
        <p>
            <input type="radio" name="biru" value="biru" id="biru">
            <label for="biru">Biru</label>
        </p>
    </fieldset>
    <fieldset>
        <legend>Pilih hobi:</legend> 
        <p>
            <input type="checkbox" name="hobi1" value="menulis" id="menulis">
            <label for="menulis">Menulis</label>
        </p>
        <p>
            <input type="checkbox" name="hobi2" value="membaca" id="membaca">
            <label for="membaca">Membaca</label>
        </p>
        <p>
            <input type="checkbox" name="hobi3" value="menggambar" id="menggambar">
            <label for="menggambar">Menggambar</label>
        </p>
    </fieldset>
</body>
</html>
Code language: HTML, XML (xml)

Ingatlah bahwa kotak centang tidak boleh memiliki nama yang sama karena tidak eksklusif satu sama lain. Melakukan hal ini akan mengakibatkan formulir mengirimkan beberapa nilai untuk kunci yang sama dan tidak semua bahasa sisi server menangani ini dengan cara yang sama. Setiap kotak centang harus memiliki nama yang unik

Apa itu radio dalam HTML?

Tombol radio adalah salah satu jenis masukan yang dapat kita masukkan ke dalam bentuk HTML . Radio button dapat dibuat dengan memberikan nilai "radio" pada atribut "type" pada tag

Apa fungsi tombol radio?

Tombol radio, juga disebut tombol opsi, memungkinkan pengguna untuk memilih satu opsi dari kumpulan dua atau lebih opsi yang saling eksklusif, tetapi terkait . Tombol radio selalu digunakan dalam grup, dan setiap opsi diwakili oleh satu tombol radio dalam grup.

Apa fungsi dari kotak centang?

Checkbox memungkinkan pengguna untuk memilih satu atau lebih opsi dari grup . Biasanya, Anda harus menampilkan setiap opsi kotak centang dalam daftar vertikal. Untuk membuat setiap opsi kotak centang, buat Kotak Centang di tata letak Anda.

Atribut apa yang digunakan untuk menandai opsi pada tombol radio?

Atribut dicentang digunakan untuk menandai dipilih atau tidak tombol radio . Atribut ini merupakan atribut opsional karena hanya akan digunakan dalam kasus tertentu dan digunakan oleh programmer, bukan pengguna yang menggunakan aplikasi.

kode html