Select dan Option ~ Pemrograman dan Teknologi

Selain input yang bisa dicentang atau diberi teks dari pengguna, kalian juga bisa menambahkan daftar yang bisa dipilih dalam elemen form. Daftar tersebut bisa berupa combobox atau listbox. Untuk membuat combobox, kalian bisa menggunakan tag <select>.

Select

Tag <select> merupakan salah satu tag yang bisa kita letakkan dalam form HTML. Tag <select> bisa menampilkan pilihan dalam bentuk combobox atau listbox.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <FORM method="post" action="test.htm">
    <select name="combo">
        <option value="1">Pilihan 1</option>
        <option value="2">Pilihan 2</option>
        <option value="3">Pilihan 3</option>
        <option value="4">Pilihan 4</option>
        <option value="5" selected>Pilihan 5</option>
    </select><BR />
    </FORM>
</BODY>
</HTML>

Tag <select> menggunakan sekumpulan tag <option> untuk menampilkan pilihan di dalamnya. Saat diklik, kalian seharusnya bisa melihat pilihan berupa "dropdown list" jika kalian menggunakan browser di komputer. Kalian bisa memilih salah satu dari isinya. Jika kalian menggunakan browser di ponsel, pilihan mungkin akan ditampilkan sebagai "kotak pilihan di depan halaman".

Setiap tag <option> bisa diberi atribut value. Tapi, keberadaan atribut value dalam tag <option> bukan sebuah keharusan. Option yang tidak memiliki atribut value otomatis akan menggunakan isinya sebagai value. Selain value, kalian bisa menambahkan atribut selected untuk menandai option yang dipilih.

Memilih Beberapa Option

Selain menampilkan combobox yang hanya membolehkan satu pilihan, pengguna juga bisa dibolehkan untuk memilih beberapa pilihan sekaligus. Untuk memberikan beberapa pilihan pada pengguna, kalian bisa menambahkan atribut multiple.

<HTML>

<HEAD>

<TITLE>Belajar HTML</TITLE>

</HEAD>

<BODY>

<option value="1">Pilihan 1</option>

<option value="2">Pilihan 2</option>

<option value="3">Pilihan 3</option>

<option value="4">Pilihan 4</option>

<option value="5" selected>Pilihan 5</option>

</select><BR />

</FORM>

</BODY>

</HTML>

Atribut lain yang bisa kalian tambahkan adalah atribut size. Ini berguna jika kalian menggunakan browser di komputer yang akan menampilkan select dengan atribut multiple sebagai "listbox" yang bisa menampilkan semua pilihan sekaligus. Atribut size juga mempengaruhi pilihan yang ditampilkan dalam dropdownlist jika daftar ditampilkan sebagai combobox.

Size digunakan untuk menentukan berapa banyak pilihan yang ditampilkan. Jika pilihan terlalu banyak, akan ada scrollbar yang bisa digunakan untuk menampilkan pilihan yang tersisa.

Optgroup

Satu hal lagi yang bisa kita lakukan dengan tag select adalah mengelompokkan pilihannya dengan tag <optgroup>. Kalian memelukan atribut label dalam <optgroup> untuk memberikan "judul" pada tiap kelompok.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <FORM method="post" action="test.htm">
    <select name="combo">
        <optgroup label="kelompok pertama">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option selected>4</option>
            <option>Pilihan 5</option>
        </optgroup>
        <optgroup label="pilihan lainnya">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </optgroup>
    </select>
    </FORM>
</BODY>
</HTML>

Datalist

Tag yang sejenis dengan tag <select> adalah tag <datalist>. Bedanya, <datalist> membolehkan user mengetik di luar pilihan yang sudah disediakan. Tag ini juga berfungai seperti autocomplete. Kalian mungkin tidak bisa menggunakan tag ini di beberapa browser bawaan di ponsel atau browser lama.