Untuk membuat daftar pilihan drop-down adalah dengan menggunakan tag <select> dan <option>.
Drop-down itu seperti apa?
Daftar pilihan dengan gaya jatuh ke bawah, kurang lebih tampilanya sederhananya adalah seperti ini:
Pada umumnya, tampilan daftar pilihan drop-down akan dibarengi dengan tampilan prosesornya. Dan untuk menampilkan "pemrosesnya", tag yang diperlukan adalah <form> dan <input>.
Contoh tampilannya kurang lebih akan jadi seperti ini:
Oleh karena disini sedang membahas tentang bahasa HTML yang terkait dengan tampilan, maka pada contoh diatas tidak akan menghasilkan apapun jika di klik pada "Beli Sekarang". Diperlukan bahasa lain diluar HTML untuk dapat memrosesnya, yaitu PHP ataupun Javascript (saya sendiri masih belum banyak mengetahui).
Tag <select>
Atribut yang digunakan antara lain:- disabled
- Untuk menampilkan daftar pilihan dalam kondisi tidak aktif. Nilainya adalah, "disabled"
- multiple
- Untuk menampilkan jumlah item yang akan ditampilkan dalam daftar , harus di ikuti dengan atribut "size". Nilai untuk multiple adalah "multiple".
- name
- Tidak mempengaruhi pada tampilan, berfungsi untuk dapat dikenali oleh bahasa pemrosesnya.
- size
- Untuk menentukan jumlah pilihan yang akan ditampilkan. Nilainya, "angka".
Contoh:
Jika ditulis:
Sesuai dengan pengalaman saya sendiri, atribut ini tidak menampilkan sebagaimana mestinya pada browser ponsel, namun tampak jelas pada browser operamini.
Contoh berikutnya dengan atribut "multiple" dan "size"
Jika ditulis:
Baik pada browser operamini, kurang maksimal pada browser ponselku .
<select disabled="disabled">Hasilnya adalah:
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>
Sesuai dengan pengalaman saya sendiri, atribut ini tidak menampilkan sebagaimana mestinya pada browser ponsel, namun tampak jelas pada browser operamini.
Contoh berikutnya dengan atribut "multiple" dan "size"
Jika ditulis:
<select multiple="multiple" size="2">Hasilnya adalah:
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>
Baik pada browser operamini, kurang maksimal pada browser ponsel
Tag <option>
Atribut yang di gunakan antara lain:- disabled
- Untuk item daftar, dalam kondisi tertentu akan menjadi tidak aktif.
- Selected
- Untuk menentukan item yang akan muncul pada tampilan standar.
- Value
- Tidak mempengaruhi apapun dalam tampilan, atribut ini sangat penting terkait dengan pemrosesan daftar yang akan di kirim ke server. Dan tentunya adalah dengan menggunakan bahasa lain diluar HTML.
Contoh:
Jika ditulis:
"disabled" untuk <option>, hasilnya tidak trelihat pada browser ponsel ataupun operamini.
Contoh dengan "selected" dan "value".
Jika ditulis:
Atribut "selected" sangat baik pada browser manapun.
<select>Hasilnya adalah:
<option>Pilihan 1</option>
<option disabled="disabled">Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>
"disabled" untuk <option>, hasilnya tidak trelihat pada browser ponsel ataupun operamini.
Contoh dengan "selected" dan "value".
Jika ditulis:
<select>Hasilnya adalah:
<option value="pil1">Pilihan 1</option>
<option selected="selected" value="pil2">Pilihan 2</option>
<option value="pil3">Pilihan 3</option>
<option value="pil4">Pilihan 4</option>
<option value="pil5">Pilihan 5</option>
</select>
Atribut "selected" sangat baik pada browser manapun.
0 comments:
Tinggalkan Komentar Anda
Terimakasih telah berkunjung, untuk kritik, saran, ataupun pertanyaan, silahkan berikan komentar anda disini: