Belajar HTML Part 26 Cara Membuat Select Box di Form HTML
Jika dalam tutorial sebelumnya anda telah belajar mengenai bagaimana cara untuk membuat input type hidden di form HTML, nah dalam tutorial kali ini kita akan membahas mengenai cara membuat select box di form HTML, apaan sih itu select box ? penasaran baik akan kita bahas lebih lanjut di tutorial ini.
Video Tutorial Belajar HTML – Membuat Select Box di Form HTML
Select Box digunakan untuk membuat inputan berupa pilihan dengan tampilan drop down, secara default tag ini mengharuskan user untuk memilih 1 pilihan yang ada, baik langsung saja biar anda tidak bingung, silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Agama <select name='agama'> <option value='islam'>Islam</option> <option value='kristen'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> </p> <input type='submit' name='tombol' value='kirim' /> </form> </body> </html> |
semisal saya simpan dengan nama tag_select_form.html, lalu saya buka di browser maka hasilnya adalah seperti berikut ini :
nah hasilnya adalah seperti diatas, terlihat ketika di klik akan ada 5 pilihan, Islam, Kristen, Katholik, Hindu, Budha
baik untu penjelasan dari skrip yang saya tulis adalah seperti berikut :
- <select></select> adalah tag pembuka dan tag penutup dari inputan select ini.
- name=’agama’ adalah nama dari inputan ini yang akan dikirimkan ketika form di proses.
- <option value=’islam’>Islam</option> adalah pilihan yang akan ditampilkan untuk bagian value adalah nilai dikirim, dan karakter diantara <option></option> itu adalah yang ditampilkan di pilihan.
Attribute selected untuk memberikan nilai default
attribute ini digunakan untuk memberikan nilai default pada bagian inputan selected, attribute ini ditulis dibagian tag option, contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Agama <select name='agama'> <option value='islam'>Islam</option> <option value='kristen' selected='selected'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> </p> <input type='submit' name='tombol' value='kirim' /> </form> </body> </html> |
semisal kita simpan dengan nama attribute_selected.html, lalu kita buka di browser :
nah terlihat yang terpilih secara default adalah kristen, hal tersebut dikarenakan kita menambahkan bagian attribute selected.
Attribute size pada tag select
attribute ini digunakan untuk mengatur besar dari tampilan tag select, secara default nilainya adalah 1, sehingga ketika tag select ditampilkan pilihan yang ditampilkan hanya 1, tapi anda bisa mengatur jumlah pilihan yang ditampilkan dengan mengatur attribute size, baik contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Agama <select name='agama' size='3'> <option value='islam'>Islam</option> <option value='kristen' selected='selected'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> </p> <input type='submit' name='tombol' value='kirim' /> </form> </body> </html> |
terlihat yang tampil adalah 3 pilihan karena kita menambahkan attribute size=’3′
Attribute Multiple
attribute ini digunakan untuk menset agar inputan select dapat dipilih lebih dari 1 pilihan, caranya mudah kok hanya dengan menambahkan attribute multiple=’multiple’ di tag <select>
baik langsung saja contohnya seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Agama <select name='agama' multiple='multiple'> <option value='islam'>Islam</option> <option value='kristen' selected='selected'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> </p> <input type='submit' name='tombol' value='kirim' /> </form> </body> </html> |
semisal saya ganti dengan nama attribute_multiple_tag_select.html, lalu saya buka di browser.
terlihat kita bisa memilih dari satu, untuk memilih lebih dari satu pilihan bisa dengan menekan tombol ctrl
Attribute Outgroup
attribute ini digunakan untuk mengelompokkan pilihan yang anda buat, jadi ketika anda memberikan banyak pilihan, lebih baik gunakan attribute ini agar pilihan lebih terkelompok.
langsung saja kita perhatikan contoh skripnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Agama <select name='kemampuan_pemrogaman' multiple='multiple' size='6'> <optgroup label="web"> <option value='php'>PHP</option> <option value='javascript'>Javascript</option> <optgroup label="desktop"> <option value='c++'>C++</option> <option value='c#'>C#</option> </select> </p> <input type='submit' name='tombol' value='kirim' /> </form> </body> </html> |
semisal kita simpan dengan nama tag_optgroup_tag_select.html, lalu kita buka di browser :
nah terlihat ada label web dan desktop, karena kita menambahkan tag optgroup dengan label web dan desktop, gimana mudah kan ?
Attribute disabled
attribute ini digunakan untuk menonaktifkan dari inputan ini, anda bisa menonaktifkan keseluruhan dari tag select, ataupun hanya beberapa pilihan saja, baik contohnya adalah berikut ini :
|
1 2 3 4 5 6 7 |
<select name='agama' disabled='disabled'> <option value='islam'>Islam</option> <option value='kristen'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> |
itu adalah contoh ketika anda menonaktifkan dibagian tag select
|
1 2 3 4 5 6 7 |
<select name='agama'> <option value='islam'>Islam</option> <option value='kristen' disabled='disabled'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> |
nah itu jika anda ingin menonaktifkan di bagian pilihan tertent
Attribute id dan class
selain attribute diatas anda juga memberikan attribute id dan class pada bagian tag select, jadi memungkinkan anda untuk memberikan set style css ataupun dengan javascript, contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 |
<select name='agama' id='abc' class='def'> <option value='islam'>Islam</option> <option value='kristen'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> |
Nah bagaimana membuat select box mudah bukan ? select box sendiri memiliki fitur attribute yang lebih banyak daripada inputan lainnya, sehingga anda bisa memberikan variasi pada select box yang anda buat, baik sekian dulu tutorial kali ini, kita telah membahas mengenai cara membuat select box di dalam form HTML, dalam tutorial berikutnya kita akan membahas mengenai cara membuat inputan berupa textarea di form HTML.
[stextbox id=”info”] Anda serius ingin menguasai HTML ?Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
