Media Informasi dan Teknologi: Contoh Menggunakan Elemen Radio Button

Berbeda dengan elemen check box yang berfungsi untuk menampung beberapa pilihan, elemen radio button digunakan untuk menentukan satu pilihan dari beberapa opsi yang ada

Buka aplikasi text editor, notepad, atau adobe dreamweaver yang sering digunakan untuk teks editornya
Tuliskan kode berikut :

<html>
<head>
<title>Element Radio Button</title>
<body>
<h2>Menggunakan Elemen Radio Button</h2>
<form action="radiobutton.php" method="post">
    Nama :
    <input type="text" name="nama" size="20" /><br />
    Jenis Kelamin :
    <input type="radio" name="gender" value="P" />Pria
    <input type="radio" name="gender" value="W" />Wanita<br />
    <p><input type="submit" value="Kirim" /></p>
</form>
</body>
</head>

Simpan file dengan nama radiobutton.html. di C:/xampp/htdocs/
Buatlah file baru, dan tuliskan kode berikut :

<?php

    $nama = $_POST["nama"];
    $gender = $_POST["gender"];

    echo "<p>Data yang dimasukan :</p>";
    echo "<strong>Nama :</strong> $nama <br>";
    echo "<strong>Jenis Kelamin :</strong>";

    if ($gender == "P"){
        echo "Pria";
    }    else {
        echo "Wanita";
    }
?>

Simpan file dengan nama radiobutton.php. di C:/xampp/htdocs/
Jalankan browser dan masukan http://localhost/radiobutton.html
Isilah data seperti dibawah

Maka tampil data seperti ini

Keterangan :
Kali ini kita membuat dua buah opsi Pria dan Wanita menggunakan elemen radio button. Ingat nama elemen radio button harus sama dan bukan berupa aray (tidak diikuti tanda [])

<input type="radio" name="gender" value="P" />Pria
<input type="radio" name="gender" value="W" />Wanita<br />

Dalam contoh ini, masing-masing elemen radio button kita namai dengan gender

Media Informasi dan Teknologi

Laman

Contoh Menggunakan Elemen Radio Button

2 komentar: