Tag Select dan Option di HTML

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas tag select dan option di html. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halamanĀ kursus.

Pada materi sebelumnya kita sudah mempelajari beberapa materi elemen-elemen form. Materi tersebut yaitu:

Input fields tag berfungsi sebagai input isian. Sedangkan button sebagai pemicu pengiriman form.

Selain input isian, ada juga input pilihan. Salah satu input pilihan (selection field) yang paling sering digunakan adalah select. Jadi kamu bisa gunakan select sebagai input pilihan jika dibutuhkan.

Cara Membuat Selection Field dengan Tag Select

Seperti membuat tag lain. Membuat tag select juga cukup mudah. Yang terpenting memahami cara penulisan tag yang benar. Terutama konsep buka dan tutup tag. Serta Parent Child. Baik Lansung saja lihat contoh tag select berikut.

<select>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>PHP</option>
</select>

Tag select adalah parent dari tag option. itu artinya tag option berada diatara tag buka dan tutup tag select.

Tag Select dan Option Lengkap Atribut

Untuk menjadi elemen form yang baik. Tentunya ada atribut yang harus dibuat. Berikut ini atribut yang ada di tag select dan option.

Atribut Tag Select

  • name (name=”kode”)
  • multiple (multiple=””)

Atribut Tag Option

  • value (value=”1″)
  • selected (selected=””)
  • disabled (disabled=””)

Tentunya atribut ini dibuat sesuai dengan kebutuhan kita. Berikut ini atribut standar yang harus ada di tag select dan option.

<label>Pilih Kode: </label>
<select name="kode">
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
  <option value="4">PHP</option>
</select>

Nah, atribut yang paling penting dari elemen form adalah name. Tanpa name data tidak bisa diambil. Selanjutnya value. Value adalah nilai sesungguhnya yang akan dikirim. Kamu bisa menyesuaikannya. Dan tidak harus sama dengan text di tengah tag option. Kemudian ada tag label. Sesuai namanya label berarti pembawa informasi. Label ini juga penting dalam mendesain antarmuka yang baik.

Kesimpulan

Sekarang dapat kamu bandingkan input field dengan selection field. Pada input field nilai ditentukan pengguna. Sedangkan selection field nilai di tentukan oleh aplikasi. Seperti 1,2,3 dan 4 pada contoh di atas.

Latihan Membuat Selection Filed

Buat file select.php dan aksi_select.php untuk mengirim dan menerima data. Lihat contoh latihan lalu disini.

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *