Penggunaan Dan Penulisan Tag Select Dalam Form Html

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

Penggunaan dan Penulisan Tag Select

Tag select dipakai untk 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 untk memakai tag select diluar tag form biasanya dikombinasikan dengan JavaScript untk memproses hasilnya.

Ada bbrapa atribut yang sering dipakai pada tag select, ibarat atribut name, value, selected, size, multiple, disablayar led 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 untk 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 dibroser, pilihan (tag option dengan atribut selected) inilah yang akan tampil sebagai nilai awal dari daftar pilihan. Atribut selected hnya mempunyai satu nilai, yakni 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 untk menentukan banyaknya pilihan yang akan ditampilkan pada daftar pilihan. Setips default tag select mempunyai atribut size dengan nilai 1, sehingga hnya menampilkan 1 pilihan saja yang terlihat. Namun bila Anda menambahkan atribut size="3" pada tag select, maka pada dikala dijalankan dibroser akan menampilkan sebanyak 3 pilihan dari pilihan yang tersedia.

Atribut size umumnya dipakai supaya pengunjung sanggup menentukan bbrapa pilihan setips sekaligus. Untuk keperluan ibarat ini biasanya ditambahkan juga atribut multiple yang akan kita bahas sehabis ini.

Berikut ini pola 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 untk memungkinkan pengunjung untk sanggup menentukan lebih dari satu pilihan. Namun untk sanggup menentukan lebih dari satu pilihan, pengunjung harus menahan tombol ctrl pada keyboard kemudian menentukan pilihannya (untk WEB broser desktop).

Atribut multiple biasanya dipakai setips bersamaan dengan atribut size, ini supaya memudahkan pengunjung untk menentukan bbrapa pilihannya. Atribut multiple hnya mempunyai satu nilai yakni 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 untk sanggup menentukan lebih dari satu pilihan bukan inspirasi yang buruk, tetapi tidak semua pengunjung paham untk menentukan bbrapa pilihan sambil menahan tombol ctrl. Jika Anda ingin pengunjung sanggup menentukan lebih dari satu pilihan, sebaiknya Anda memakai atribut checkbox pada tag input.

Atribut Disablayar led

Atribut disablayar led pada select dipakai untk menciptakan daftar pilihan tidak sanggup digunakan. Penggunaan atribut ini biasanya dikombinasikan dengan JavaScript biar berfungsi setips maksimal, contohnya daftar pilihan hnya sanggup dipakai sehabis pengunjung mengisi objek form yang lain.

Atribut disablayar led hnya mempunyai satu nilai yakni nama atributnya sendiri, sehingga ditulis dengan disablayar led="disablayar led".

Berikut ini pola penulisan tag select dengan atribut disablayar led :

<select disablayar led="disablayar led">     <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 disablayar led) tersebut tidak sanggup digunakan.

Berikut ini penulisan tag option dengan atribut disablayar led :

<select>     <option>Pilihan 1</option>     <option disablayar led="disablayar led">Pilihan 2</option>     <option>Pilihan 3</option> </select>

Atribut Label Pada Tag Optgroup

Tag optgroup dipakai untk menciptakan kelompok pilihan. Jika daftar pilihan Anda terlalu panjang maka Anda sanggup memakai tag optgroup yang akan memudahkan pengunjung untk menentukan pilihan, alasannya pilihan sudah dikelompokkan terlebih dahulu.
Atribut label sangat diharapkan pada tag optgroup, alasannya 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 pola instruksi 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 + disablayar led dan tag option dengan atribut value :<br/>     <select name="daftar_pilihan" disablayar led="disablayar led">         <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 + disablayar led :<br/>     <select name="daftar_pilihan" size="3">         <option value="pil1">Pilihan 1</option>         <option value="pil2" disablayar led="disablayar led">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 (tahaan tombol <b>ctrl</b> pada dikala menentukan bbrapa 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>

Pada article selanjutnya kita akan membahas Penggunaan dan Penulisan Tag Select Dalam Form HTML.
Sumber https://mas-abdi.blogspot.com/