Cara menggunakan apa itu checkbox html?

Selamat datang di sistemit.com. Kali ini admin akan share bagaimana cara mengubah bentuk checkbox html dan radio button html menjadi bentuk yang berbeda atau bentuk custom. Caranya sangat mudah. Untuk yang belum tau checkbox dan radio, checkbox dan radio adalah seperti gambar berikut :

Ini gambar untuk Checkbox :

Cara menggunakan apa itu checkbox html?

dan ini gambar untuk Radio Button :

Cara menggunakan apa itu checkbox html?

Baik sebelum lanjut ke tutorial, ada baiknya kita mengetahui secara teori apa itu checkbox dan radio dalam html.

Checkbox dikenal juga dengan nama Kotak centang dan tombol radio atau Radio Button adalah elemen umum yang digunakan dalam formulir di website dalam melakukan input data. Biasanya,untuk membuat web form user interface yang bagus dan sesuai dengan tata letak halaman web, diperlukan kustomisasi elemen form. Nah salah satu elemen form/formulir itu adalah checkbox dan radio button. Ini seringkali kita jumpai dalam halaman web seperti Google Form

Bentuk checkbox dan radio button pada ke dua gambar di atas adalah bentuk yang sudah di modifikasi menjadi lebih besar. Ini terkadang dibutuhkan juga oleh kita jika ingin membuat bentuk checkbox sesuai dengan keinginan. Tentunya dengan tutorial ini Anda dapat mengubah besar, ukuran, atau warna checkbox dan radio button sesuai dengan keinginan.

Berikut adalah source code CSS dan HTML untuk membuat bentu checkbox dan radio button yang berbeda :

Kode HTML untuk Checkbox :

<label class="checkbox">Satu
    <input type="checkbox" checked="checked">
    <span class="check"></span>
</label>
<label class="checkbox">Dua
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Tiga
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Empat
    <input type="checkbox">
    <span class="check"></span>
</label>

Kode CSS untuk custom Checkbox adalah sebagai berikut :

/* custom checkbox */
.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom checkbox */
.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* on mouse-over, add border color */
.checkbox:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the checkbox is checked */
.checkbox input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the checkmark and hide when not checked */
.check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the checkmark when checked */
.checkbox input:checked ~ .check:after {
    display: block;
}

/* checkmark style */
.checkbox .check:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Kode HTML untuk Radio Button :

<label class="radio">Satu
    <input type="radio" checked="checked" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Dua
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Tiga
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Empat
    <input type="radio" name="radio">
    <span class="check"></span>
</label>

Kode CSS untuk Radio Button :

/* custom radio */
.radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom radio */
.radio .check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 50%;
}

/* on mouse-over, add border color */
.radio:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the radio is checked */
.radio input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the radio and hide when not checked */
.radio .check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the radio when checked */
.radio input:checked ~ .check:after {
    display: block;
}

/* radio style */
.radio .check:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Dengan kode di atas, kita dapat melakukan pengubahan pada checkbox dan radio button. Anda juga akan dapat mengubah variable CSS sesuai dengan bentuk atau ukuran yang Anda inginkan. Semoga Bermanfaat. Terimakasih.

Apa itu checkbox dalam HTML?

checkbox atau kotak centang adalah kotak persegi yang dicentang saat di aktifkan. tombol radio adalah tampilan tombol yang ditampilkan sebagai lingkaran kecil yang diisi atau disorot saat dipilih.

Apakah tag HTML untuk membuat checkbox?

Fungsi tag input type checkbox dalam Pembuatan Form HTML Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.

Apa itu input type checkbox?

Input type checkbox (kotak isian) merupakan elemen tag HTML yang berfungsi sebagai masukan data dengan memberikan checklist atau tanda centang pada kotak tersebut.

Jelaskan apa yang anda ketahui tentang tag form?

HTML element tag <form> merupakan tag pada HTML yang digunakan untuk menciptakan formulir bagi isian input dari pengguna.