Penggunaan Dan Penulisan Tag Select Dalam Form Html

Pada artikel Cara Membuat Form di HTML Saya sudah membahas penggunaan dan penulisan tag select, pada artikel kali ini kita kan membahas lebih lanjut ihwal tag select beserta atributnya.

Penggunaan dan Penulisan Tag Select

Tag select dipakai untuk menciptakan sebuah daftar pilihan yang nantinya akan dipilih salah satu pilihan dari daftar pilihan yang tersedia oleh pengguna atau pengunjung. Pilihan yang tersedia sudah didefinisikan didalam tag select.

Untuk memakai tag select, kita juga membutuhkan tag option yang dipakai sebagai isi atau pilihan dari tag select.

Berikut ini penulisan tag select :

<select>     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option>Pilihan 3</option> </select>

Anda tidak harus memakai tag select didalam tag form, namun untuk memakai tag select diluar tag form biasanya dikombinasikan dengan JavaScript untuk memproses hasilnya.

Ada beberapa atribut yang sering dipakai pada tag select, menyerupai atribut name, value, selected, size, multiple, disabled dan label. Berikut ini Saya akan membahas penggunaan dan penulisan atribut yang sebutkan tadi pada tag select :

Atribut Name

Atribut name dipakai sebagai identitas dari tag select. Identitas atau nilai dari atribut name ini akan dipakai pada dikala pemrosesan form oleh web server, contohnya memakai PHP.

Berikut ini penulisan tag select dengan atribut name :

<select name="daftar_pilihan">     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option>Pilihan 3</option> </select>

Atribut Value

Atribut value dipakai pada tag option. Nilai dari atribut value inilah yang akan diproses oleh web server, maka dari itu sebaiknya Anda memakai nilai yang sesuai dengan isi atau pilihan dari tag option tersebut. Nilai dari atribut value pada tag option tidaklah harus sama dengan nilai atribut value pada tag option yang lain.

Berikut ini penulisan tag option dengan atribut value :

<select name="daftar_pilihan">     <option value="pil1">Pilihan 1</option>     <option value="pil2">Pilihan 2</option>     <option value="pil3">Pilihan 3</option> </select>

Usahakan untuk mengisi nilai dari atribut value dengan nilai yang singkat dan sesuai dengan isi atau pilihan dari tag option tersebut.

Atribut Selected

Atribut selected dipakai pada tag option. Jika Anda memakai atribut selected pada salah satu tag option maka pada dikala dijalankan dibrowser, pilihan (tag option dengan atribut selected) inilah yang akan tampil sebagai nilai awal dari daftar pilihan. Atribut selected hanya mempunyai satu nilai, yaitu nama dari atributnya sendiri, sehingga ditulis dengan selected="selected".

Berikut ini penulisan tag option dengan atribut selected :

<select name="daftar_pilihan">     <option value="pil1">Pilihan 1</option>     <option value="pil2" selected="selected">Pilihan 2</option>     <option value="pil3">Pilihan 3</option> </select>

Atribut Size

Atribut size dipakai untuk menentukan banyaknya pilihan yang akan ditampilkan pada daftar pilihan. Secara default tag select mempunyai atribut size dengan nilai 1, sehingga hanya menampilkan 1 pilihan saja yang terlihat. Namun bila Anda menambahkan atribut size="3" pada tag select, maka pada dikala dijalankan dibrowser akan menampilkan sebanyak 3 pilihan dari pilihan yang tersedia.

Atribut size umumnya dipakai supaya pengunjung sanggup menentukan beberapa pilihan secara sekaligus. Untuk keperluan menyerupai ini biasanya ditambahkan juga atribut multiple yang akan kita bahas sesudah ini.

Berikut ini teladan penulisan tag select dengan atribut size :

<select size="3" multiple="multiple">     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option>Pilihan 3</option> </select>

Atribut Multiple

Atribut multiple pada tag select dipakai untuk memungkinkan pengunjung untuk sanggup menentukan lebih dari satu pilihan. Namun untuk sanggup menentukan lebih dari satu pilihan, pengunjung harus menahan tombol ctrl pada keyboard kemudian menentukan pilihannya (untuk web browser desktop).

Atribut multiple biasanya dipakai secara bersamaan dengan atribut size, ini supaya memudahkan pengunjung untuk menentukan beberapa pilihannya. Atribut multiple hanya mempunyai satu nilai yaitu nama atributnya sendiri sehingga ditulis dengan multiple="multiple"

Berikut ini penulisan tag select dengan atribut multiple :

<select size="3" multiple="multiple">     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option>Pilihan 3</option> </select>

Menambahkan atribut multiple pada tag select yang memungkinkan pengunjung untuk sanggup menentukan lebih dari satu pilihan bukan ilham yang buruk, tetapi tidak semua pengunjung paham untuk menentukan beberapa pilihan sambil menahan tombol ctrl. Jika Anda ingin pengunjung sanggup menentukan lebih dari satu pilihan, sebaiknya Anda memakai atribut checkbox pada tag input.

Atribut Disabled

Atribut disabled pada select dipakai untuk menciptakan daftar pilihan tidak sanggup digunakan. Penggunaan atribut ini biasanya dikombinasikan dengan JavaScript biar berfungsi secara maksimal, contohnya daftar pilihan hanya sanggup dipakai sesudah pengunjung mengisi objek form yang lain.

Atribut disabled hanya mempunyai satu nilai yaitu nama atributnya sendiri, sehingga ditulis dengan disabled="disabled".

Berikut ini teladan penulisan tag select dengan atribut disabled :

<select disabled="disabled">     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option>Pilihan 3</option> </select>

Selain atribut ini dipakai pada tag select, atribut ini juga sanggup dipakai pada tag option, sehingga pilihan (tag option dengan atribut disabled) tersebut tidak sanggup digunakan.

Berikut ini penulisan tag option dengan atribut disabled :

<select>     <option>Pilihan 1</option>     <option disabled="disabled">Pilihan 2</option>     <option>Pilihan 3</option> </select>

Atribut Label Pada Tag Optgroup

Tag optgroup dipakai untuk menciptakan kelompok pilihan. Jika daftar pilihan Anda terlalu panjang maka Anda sanggup memakai tag optgroup yang akan memudahkan pengunjung untuk menentukan pilihan, alasannya ialah pilihan sudah dikelompokkan terlebih dahulu.
Atribut label sangat dibutuhkan pada tag optgroup, alasannya ialah atribut label yang akan akan menampilkan judul kelompok pilihan yang sudah dikelompokkan pada tag optgroup.

Berikut ini penulisan tag optgroup dengan atribut label :

<select>     <optgroup label="Kelompok 1">         <option>Pilihan 1</option>         <option>Pilihan 2</option>         <option>Pilihan 3</option>     <optgroup label="Kelompok 2">         <option>Pilihan 4</option>         <option>Pilihan 5</option>         <option>Pilihan 6</option> </select>

Nilai dari atribut label atau judul kelompok pilihan akan ditampilkan dengan karakter tebal dan pengunjung tidak sanggup memilihnya.

Penulisan Tag Select Dalam Form HTML

Untuk merangkum penulisan tag select beserta atributnya, Saya sudah menyebarkan teladan arahan form HTML-nya :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <h2>Belajar Membuat Form HTML</h2> <form action="formulir.php" method="get">     <p>Terdapat tag select dengan atribut name dan tag option dengan atribut value + selected :<br/>     <select name="daftar_pilihan">         <option value="pil1">Pilihan 1</option>         <option value="pil2" selected="selected">Pilihan 2</option>         <option value="pil3">Pilihan 3</option>     </select></p>          <p>Terdapat tag select dengan atribut name + disabled dan tag option dengan atribut value :<br/>     <select name="daftar_pilihan" disabled="disabled">         <option value="pil1">Pilihan 1</option>         <option value="pil2">Pilihan 2</option>         <option value="pil3">Pilihan 3</option>     </select></p>          <p>Terdapat tag select dengan atribut name + size="3" dan tag option dengan atribut value + disabled :<br/>     <select name="daftar_pilihan" size="3">         <option value="pil1">Pilihan 1</option>         <option value="pil2" disabled="disabled">Pilihan 2</option>         <option value="pil3">Pilihan 3</option>     </select></p>          <p>Terdapat tag select dengan atribut name + size="3" + multiple dan tag option dengan atribut value + selected (tahan tombol <b>ctrl</b> pada dikala menentukan beberapa pilihan) :<br/>     <select name="daftar_pilihan" size="3" multiple="multiple">         <option value="pil1">Pilihan 1</option>         <option value="pil2" selected="selected">Pilihan 2</option>         <option value="pil3">Pilihan 3</option>     </select></p>          <p>Terdapat tag select dengan atribut name, tag option dengan atribut value dan tag optgroup dengan atribut label :<br/>     <select name="daftar_pilihan">         <optgroup label="Kelompok 1">             <option value="pil1">Pilihan 1</option>             <option value="pil2">Pilihan 2</option>             <option value="pil3">Pilihan 3</option>         <optgroup label="Kelompok 2">             <option value="pil4">Pilihan 4</option>             <option value="pil5">Pilihan 5</option>             <option value="pil6">Pilihan 6</option>     </select></p> </form> </body> </html>