Belajar HTML Part 26 Cara Membuat Select Box di Form HTML

Posted on Posted in Tutorial 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.

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 :

semisal saya simpan dengan nama tag_select_form.html, lalu saya buka di browser maka hasilnya adalah seperti berikut ini :

tag_select_html

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 :

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 :

semisal saya simpan dengan nama attribute_size_tag_select.html, lalu saya buka di browser, maka hasilnya adalah sebagai berikut :

attribute_size_tag_select2

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 :

semisal saya ganti dengan nama attribute_multiple_tag_select.html, lalu saya buka di browser.

attribute_multiple_tag_select

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 :

 

semisal kita simpan dengan nama tag_optgroup_tag_select.html, lalu kita buka di browser :

tag_optgroup_tag_select

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  :

itu adalah contoh ketika anda menonaktifkan dibagian tag 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 :

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *