HTML Dasar: Macam-Macam Element Form

Pada pertemuan kali ini kita akan membahas berbagai macam element yang berada di dalam element <form>.

Kita telah mencoba element <input> pada pertemuan-pertemuan sebelumnya, akan tetapi masih ada banyak lagi element lain yang bisa kita gunakan untuk menyusun sebuah form pada HTML.

Element-element tersebut adalah:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

Mari kita coba satu persatu element di atas.

Element <input>

Seperti yang sudah kita ketahui, element <input> merupakan element form terbanyak yang digunakan. Ia memiliki banyak tipe dan banyak tampilan mulai dari teks, password, email, tanggal, dan lain sebagainya.

Perhatikan contoh berikut:

<label for="isian-nama">Nama</label> <br>
<input id="isian-nama" type="text" name="name">

Hasil keluaran:

Contoh di atas merupakan tipe paling dasar dari element <input>.

Selanjutnya, kalian bisa membaca tentang tipe-tipe yang ada pada element input untuk mengenal lebih jauh tentang element <input>.

Element <select> dan <option>

Element form berikutnya adalah: select dan option.

Kita bisa menggunakan keduanya untuk membuat sebuah dropdown pilihan.

Element <select> berperan sebagai kontainer, sedangkan element <option> berperan sebagai daftar pilihan atau opsi.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia">Rahasia</option>
</select>

Hasil keluaran:

Kita telah membuat satu buah dropdown jenis kelamin dengan 3 buah opsi pilihan.

Pilih Opsi Aktif

Opsi yang aktif secara default adalah adalah opsi yang pertama. Akan tetapi, kita bisa mengatur opsi mana yang aktif secara default dengan memberikan atribut selected pada suatu <option>.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr" selected>Perempuan</option>
  <option value="rahasia">Rahasia</option>
</select>

Hasil keluaran:

Pada hasil di atas, opsi “Perempuan” otomatis ter-select saat pertama kali halaman dimuat.

Disable Opsi

Kita juga bisa men-disable sebuah opsi dengan menambahkan atribut disabled pada tag <option>.

Opsi yang memiliki atribut disabled tidak akan bisa dipilih.

Perhatikan contoh berikut:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia" disabled>Rahasia</option>
</select>

Hasil keluaran:

Kita juga bisa menggabungkan atribut disabled serta selected dalam satu opsi secara bersamaan:

<label for='jenis-kelamin'>Jenis Kelamin</label> <br>
<select id="jenis-kelamin" name="jenis_kelamin">
  <option disabled selected>Pilih Jenis Kelamin</option>
  <option value="lk">Laki-laki</option>
  <option value="pr">Perempuan</option>
  <option value="rahasia" disabled>Rahasia</option>
</select>

Hasil keluaran:

Atribut size

Kita juga bisa menggunakan atribut size pada tag <select> untuk mengatur berapa item yang akan ditampilkan. Nilai default dari atribut ini adalah 1.

Perhatikan contoh berikut:

<select size="4">
  <option>Jakarta</option>
  <option>Surabaya</option>
  <option>Bandung</option>
  <option>Bekasi</option>
  <option>Makassar</option>
  <option>Samarinda</option>
</select>

Hasil keluaran:

Select multi opsi

Kita juga bisa menggunakan atribut multiple pada tag <select> untuk mengaktifkan fitur multi opsi, di mana kita bisa memilih lebih dari satu opsi pada satu element <select>.

Perhatikan contoh berikut:

<label for="kota">Kota</label>
<select id="kota" multiple>
  <option>Jakarta</option>
  <option>Surabaya</option>
  <option>Bandung</option>
  <option>Bekasi</option>
  <option>Makassar</option>
  <option>Samarinda</option>
</select>

Hasil keluaran:

Kita bisa menahan tombol Ctrl di windows atau linux, atau tombol Cmd pada MacOS lalu memilih opsi mana saja yang kita inginkan.

Element <textarea>

Element berikutnya yang bisa kita gunakan untuk mengambil inputan user adalah element <textarea>.

Ia merupakan element “teks” akan tetapi bisa memuat lebih dari satu baris.

Perhatikan contoh berikut:

<form>
  <label for="nama">Nama</label> <br>
  <input id="nama" name="nama" value="Suparman"> <br>

  <label for="alamat">Alamat</label> <br>
  <textarea id="alamat" name="alamat">Surabaya</textarea> <br>
</form>

Hasil keluaran:

Pada hasil di atas kita bisa perhatikan bahwa:

• Element textarea memiliki ukuran tinggi (height) yang lebih besar dari pada input teks biasa.
• Element textarea bisa diisi lebih dari satu baris dengan menekan enter.
• Element area memiliki fitur “resize” di pojok kanan bawah.

Mengatur ukuran textarea

Kita bisa mengatur ukuran dari textarea menggunakan dua buah atribut:

• rows
• dan cols

Atribut rows untuk jumlah baris, sedangkan atribut cols untuk lebar dari element textarea.

Perhatikan contoh berikut:

<form>
  <label for="nama">Nama</label> <br>
  <input id="nama" name="nama" value="Suparman"> <br>

  <label for="alamat">Alamat 1</label> <br>
  <textarea
    id="alamat-1"
    name="alamat_1"
    rows="5"
    cols="20"
  >Surabaya</textarea> <br>

  <label for="alamat-2">Alamat 2</label> <br>
  <textarea
    id="alamat-2"
    name="alamat_2"
    rows="3"
    cols="30"
  >Malang</textarea> <br>
</form>

Hasil keluaran:

Atau kita juga bisa mendefinisikan panjang dan tinggi suatu element textarea menggunakan CSS height dan width.

Element <button>

Element berikutnya yang bisa kita gunakan dalam membuat sebuah formulir isian adalah: button.

Button memiliki 2 buah tipe:

• type="button"
• dan type="submit"

Tombol dengan type="submit" akan dianggap sebagai pen-submit suatu form. Jika ia diklik, maka form yang ada bersangkutan akan tersubmit. Ada pun tombol dengan type="button", maka ia hanya dianggap tombol biasa tanpa tugas khusus.

Perhatikan contoh berikut:

<button onclick="alert('Tombol ini diklik!')">
  Klik Saya!
</button>

Hasil keluaran:

Element <fieldset> dan <legend>

Element form berikutnya yang bisa kita gunakan adalah element <fieldset> dan element <legend>.

Dua element ini digunakan untuk mengelompokkan kolom isian dalam suatu formulir HTML.

Perhatikan hasil keluaran berikut:

Kode HTML dari hasil keluaran di atas adalah sebagai berikut:

<form>
  <fieldset>
    <legend>Data Diri</legend>
    <label for="nama">Nama</label><br>
    <input id="nama" name="nama"><br>
    <label for="asal">Asal</label><br>
    <input id="asal" name="asal"><br>
  </fieldset>
  <br>
  <fieldset>
    <legend>Blog & Sosmed</legend>
    <label for="instagram">Instagram</label><br>
    <input id="instagram" name="instagram" type="url"><br>
    <label for="facebook">Facebook</label><br>
    <input id="facebook" name="facebook" type="url"><br>
    <label for="twitter">Twitter</label><br>
    <input id="twitter" name="twitter" type="url"><br>
    <label for="Youtube">Youtube</label><br>
    <input id="Youtube" name="Youtube" type="url"><br>
  </fieldset>
</form>

Element <datalist>

Berikutnya adalah element <datalist>, elemen ini hampir sama seperti gabungan antara input dan select.

Jadi element datalist akan memberikan kita “autocomplete” dari data yang sudah kita siapkan.

Perhatikan kode HTML di bawah:

<form>
  <input list="nama-kota">
  <datalist id="nama-kota">
    <option value="Surabaya">
    <option value="Jakarta">
    <option value="Makassar">
    <option value="Bekasi">
    <option value="Bandung">
    <option value="Semarang">
    <option value="Samarinda">
  </datalist>
</form>

Hasil keluaran:

Coba ketikkan huruf “b” pada input di atas, maka browser akan memberikan saran autocomplete dari data yang sudah kita definisikan dalam element <datalist>.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam tipe dari element input HTML.

Stay tune!