Cara menggunakan tag select html

Example

Create a drop-down list with four options:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element define the available options in the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support

Attributes

Global Attributes

The <select> tag also supports the Global Attributes in HTML.

Event Attributes

The <select> tag also supports the Event Attributes in HTML.

More Examples

Example

Use <select> with <optgroup> tags:

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Try it Yourself »

Related Pages

HTML DOM reference: Select Object

CSS Tutorial: Styling Forms

Default CSS Settings

None.

HTML <select> tag

Example

An HTML form with a required drop-down list:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars" required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Try it Yourself »

Definition and Usage

The required attribute is a boolean attribute.

When present, it specifies the user is required to select a value before submitting the form.

Browser Support

Syntax

HTML <select> tag

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

Penggunaan dan Penulisan Tag Select

Tag select digunakan untuk membuat 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 menggunakan tag select, kita juga membutuhkan tag option yang digunakan 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 menggunakan tag select didalam tag form, namun untuk menggunakan tag select diluar tag form biasanya dikombinasikan dengan JavaScript untuk memproses hasilnya.

Ada beberapa atribut yang sering digunakan pada tag select, seperti 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 digunakan sebagai identitas dari tag select. Identitas atau nilai dari atribut name ini akan digunakan pada saat pemrosesan form oleh web server, misalnya menggunakan 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 digunakan pada tag option. Nilai dari atribut value inilah yang akan diproses oleh web server, maka dari itu sebaiknya Anda menggunakan 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 digunakan pada tag option. Jika Anda menggunakan atribut selected pada salah satu tag option maka pada saat dijalankan dibrowser, pilihan (tag option dengan atribut selected) inilah yang akan tampil sebagai nilai awal dari daftar pilihan. Atribut selected hanya memiliki 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 digunakan untuk menentukan banyaknya pilihan yang akan ditampilkan pada daftar pilihan. Secara default tag select memiliki atribut size dengan nilai 1, sehingga hanya menampilkan 1 pilihan saja yang terlihat. Namun jika Anda menambahkan atribut size="3" pada tag select, maka pada saat dijalankan dibrowser akan menampilkan sebanyak 3 pilihan dari pilihan yang tersedia.

Atribut size umumnya digunakan supaya pengunjung dapat memilih beberapa pilihan secara sekaligus. Untuk keperluan seperti ini biasanya ditambahkan juga atribut multiple yang akan kita bahas setelah ini.

Berikut ini contoh 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 digunakan untuk memungkinkan pengunjung untuk dapat memilih lebih dari satu pilihan. Namun untuk dapat memilih lebih dari satu pilihan, pengunjung harus menahan tombol ctrl pada keyboard lalu memilih pilihannya (untuk web browser desktop).

Atribut multiple biasanya digunakan secara bersamaan dengan atribut size, ini supaya memudahkan pengunjung untuk memilih beberapa pilihannya. Atribut multiple hanya memiliki 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 dapat memilih lebih dari satu pilihan bukan ide yang buruk, tetapi tidak semua pengunjung paham untuk memilih beberapa pilihan sambil menahan tombol ctrl. Jika Anda ingin pengunjung dapat memilih lebih dari satu pilihan, sebaiknya Anda menggunakan atribut checkbox pada tag input.

Atribut Disabled

Atribut disabled pada select digunakan untuk membuat daftar pilihan tidak bisa digunakan. Penggunaan atribut ini biasanya dikombinasikan dengan JavaScript agar berfungsi secara maksimal, misalnya daftar pilihan hanya bisa digunakan setelah pengunjung mengisi objek form yang lain.

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

Berikut ini contoh 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 digunakan pada tag select, atribut ini juga bisa digunakan pada tag option, sehingga pilihan (tag option dengan atribut disabled) tersebut tidak bisa 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 digunakan untuk membuat kelompok pilihan. Jika daftar pilihan Anda terlalu panjang maka Anda bisa menggunakan tag optgroup yang akan memudahkan pengunjung untuk menentukan pilihan, karena pilihan sudah dikelompokkan terlebih dahulu.
Atribut label sangat diperlukan pada tag optgroup, karena 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 huruf tebal dan pengunjung tidak bisa memilihnya.

Penulisan Tag Select Dalam Form HTML

Untuk merangkum penulisan tag select beserta atributnya, Saya sudah membuatkan contoh kode 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 saat memilih 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>

Pada artikel selanjutnya kita akan membahas Penggunaan dan Penulisan Tag Select Dalam Form HTML.

Apa itu select dalam HTML?

Apa kegunaan tag select dalam form HTML?

Apa fungsi tag option?

Apa itu select option?