Sekarang kita akan membahas fungsi tag Select dalam pembuatan Form HTML.
Fungsi Tag Select dalam pembuatan Form HTML
Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.
Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:
<select >
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select >
Masukkan code select tersebut diantara syntax <body> dan </body>. Nah,code itu hanya memasukkan pilihan selectnya saja.
nda tidak harus menggunakan tag select di dalam form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya. Tapii,pakai JavaScript sihh lebih susah :v Terserah jugaasihh,hehe:v
Atribut name: Untuk Pemrosesan Tag Select
Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut nameinilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:
<select name=”judul_pilihan”>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
</select >
Atribut value: Sebagai Nilai untuk Tag Option
Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:
<select>
<option value="pil1">Pilihan 1</option>
<option value="pil2">Pilihan 2</option>
<option value="pil3">Pilihan 3</option>
</select>
Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan.
Atribut selected: Menampilkan Nilai Default dari Tag Select
Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:
<select>
<option >Pilihan 1</option>
<option selected="selected">Pilihan 2</option>
<option>Pilihan 3</option>
</select>
Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select
Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrlpada keyboard.
Atribut multiple akan lebih mudah digunakan jika ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini adalah “multiple”. Berikut contoh penggunaan atribut multiple, dan dikombinasikan dengan atribut size:
<select size="3" multiple="multiple">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select>
Tag optgroup dan atribut label
Tag optgroup digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda panjang, menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu.
Atribut label diperlukan untuk menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup:
<select>
<optgroup label="Kelompok 1">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<optgroup label="Kelompok 2">
<option>Pilihan 5</option>
<option>Pilihan 6</option>
<option>Pilihan 7</option>
</select>
Dalam penulisan tag optgroup, kita membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul untuk grup pilihan tersebut. Di dalam web browser, tag optgroup ini akan ditampilkan dalam huruf tebal (bold), namun user tidak dapat memilihnya karena fungsi tag ini memang hanya sebagai keterangan saja.
Bingung? Hehee,lupaa ngasih ssannya :v Nihh screenshoot semuanyaa gann...
Untuk hasilnya seperti inii,disetiap option bisa diklik dan diganti dengan kalimat yaa gaan. Edit sekreatif mungkin ajaa biar lebih menarikk...
Nahh,sekian bahasan kita tentang syntax code form dan select ini yaagaan:) Semoga bermanfaat:D
Wassalammualaikum.Wr.Wb.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon