Contoh Menggunakan Elemen List

Dalam HTML, elemen list dibagi menjadi dua, yaitu sebagai list box dan combo box. List dibuat dengan menggunakan tag <select> dan </select>, sedangkan isi atau item dari list dibuat dengan menggunakan tad <option> dan </option>

<select name="NamaKontrol" size="1">
<option value=Nilai1>Item ke-1</option>
<option value=Nilai2>Item ke-2</option>
<option value=Nilai3>Item ke-3</option> 
 . . .
</select>

Jika kita ingin membuat elemen list box maka kita perlu menentukan atribut size pada tag <select> dengan nilai lebih dari 1; sedangkan untuk elemen combo box, kita perlu mengisi size dengan nilai 1
  • Buka aplikasi text editor, notepad, atau adobe dreamweaver yang sering digunakan untuk teks editornya
  • Tuliskan kode berikut :
<html>
<head>
<title>Element List</title>
</head>
<body>
<h1>Menggunakan Element List Box dan Combo Box</h1>
<form action="list.php" method="post">
<p><strong>List Box</strong></p>
Kota<br />
<select name="kota" size="3">
    <option value="Jakarta">Jakarta</option>
    <option value="Bogor">Bogor</option>
    <option value="Depok">Depok</option>
    <option value="Bandung">Bandung</option>
    <option value="Jogjakarta">Jogjakarta</option>
    <option value="Surabaya">Surabaya</option>
</select>
<p><strong>Combo Box</strong></p>
Agama :
<select name="agama" size="1">
    <option value="Islam">Islam</option>
    <option value="Kristen">Kristen</option>
    <option value="Hindu">Hindu</option>
    <option value="Budha">Budha</option>
</select>
<p><input type="submit" value="Kirim"  /></p>
</form>
</body>
</html>


  • Simpan file dengan nama List.html. di C:/xampp/htdocs/
  • Buatlah file baru, dan tuliskan kode berikut :
<?php
    $kota = $_POST["kota"];
    $agama = $_POST["agama"];
   
    echo "<p>Data yang dimasukan :</p>";
    echo "<strong>Kota :</strong> $kota<br/>";
    echo "<strong>Agama :</strong> $agama";
?>

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













  • hasilnya seperti ini











Keterangan :
Seperti yang anda lihat diatas, perbedaan pembuatan list box dan combo box hanya terletak pada nilai yang dimasukan ke dalam atribut size. Adapun cara menangkap nilai yang dikirim melalui elemen list tersebut adalah sama seperti pada elemen kontrol lainnya

Tidak ada komentar:

Posting Komentar