19. Pengenalan Form

HTML Dasar: Pengenalan Form

Di antara fitur penting dari HTML adalah: tag form. Yaitu sebuah tag yang kita gunakan untuk mengkoleksi inputan dari user, konsep ini sama seperti konsep formulir di dunia nyata.

Umumnya, sebuah website selalu memiliki fitur form, contoh paling umum yang sering kita temui adalah:

  • form login
  • form sign up
  • form komentar di suatu blog / media

Berikut ini contoh form HTML:

Form HTML seperti contoh di atas tersusun dari 4 buah jenis tag yaitu:

  1. Tag <form> - sebagai kontainer
  2. Tag <input> - sebagai field (kolom isian)
  3. Tag <label> - sebagai label
  4. dan Tag <button> - sebagai tombol

Mari kita bahas satu per satu.

Elemen <form>

Yang paling utama adalah tag atau element <form>. Ia adalah sebuah tag pembungkus atau kontainer yang merepresentasikan sebuah “formulir” di mana satu formulir bisa memiliki banyak kolom isian.

<form>
  ...
  <!-- berbagai macam kolom isian -->
  ...
</form>

Tag <form> sendiri tidak memiliki tampilan apa pun alias tidak terlihat secara kasat mata, akan tetapi kita tetap harus mendefinisikannya agar formulir yang kita buat bisa bekerja dengan baik.

Elemen <input>

Di dalam HTML, terdapat banyak jenis model isian mulai dari teks, file, ceklis, dan sebagainya yang insyaallah akan kita bahas lebih detil pada beberapa pertemuan berikutnya.

Dan sebagian besar jenis model isian tersebut menggunakan tag <input>.

Perhatikan kode HTML di bawah:

<input type="text" name="nama" value="Soekarno">

Hasil keluaran:

Tag input memiliki 2 buah atribut dasar yaitu:

  • type
  • dan name.

Atribut type digunakan untuk mendefinisikan tipe isian, sedangkan atribut name adalah sebagai nama dari isian tersebut.

Beberapa jenis tipe isian tag input seperti text (default), radio, checkbox, submit, button dan lain sebagainya:

<!-- tipe teks biasa -->
<input type="text"> 

<!-- tipe pilihan (seperti pilihan a, b, c, d) -->
<input type="radio">

<!-- tipe ceklis -->
<input type="checkbox">

<!-- tombol untuk submit -->
<input type="submit">

<!-- tombol bukan untuk submit -->
<input type="button">

<!--
  atribut tipe yang lain insyaallah akan
  kita bahas pada beberapa pertemuan yg akan datang
-->

Mari kita coba beberapa tipe input di atas.

Kolom Isian Teks

Yang pertama adalah kolom isian teks, ia adalah sebuah tag input dengan atribut type="text" yang berfungsi untuk mengkoleksi isian teks dari user.

Bahkan tanpa menulis type="text" pun, tipe default dari sebuah input adalah text.

Perhatikan kode berikut:

<form>
  <div>
    <label for="nama-depan">Nama Depan</label> <br>
    <input id="nama-depan" name="nama_depan" placeholder="Nama Depan">
  </div>

  <div style="margin-top: 1rem">
    <label for="nama-belakang">Nama Belakang</label> <br>
    <input id="nama-belakang" name="nama_belakang" placeholder="Nama Belakang">
  </div>
</form>

Hasil keluaran:

Pada kode di atas, kita menggunakan elemen <div> untuk membungkus elemen <label> dan <input>. Penggunaan elemen <div> di sini hanya berfungsi agar label dan input ditampilkan di dalam baris baru, jadi tanpa menggunakan <div> pun tidak masalah.

Satu lagi, karena element <label> dan <input> merupakan elemen inline, maka kita harus menggunakan “cara tertentu” (semisal menggunakan tag <br>) agar label dan input ditampilkan dalam baris baru.

Kalau tidak menggunakan div mau pun br (seperti contoh di bawah):

<form>
  <label for="nama-depan">Nama Depan</label>
  <input id="nama-depan" type="text" name="nama_depan" placeholder="Nama Depan">

  <label for="nama-belakang">Nama Belakang</label>
  <input id="nama-belakang" type="text" name="nama_belakang" placeholder="Nama Belakang">
</form>

Hasil keluarannya akan menjadi inline:

Kita juga bisa melakukan modifikasi inline mau pun block dengan CSS.

Elemen <label>

Coba perhatikan kode HTML di atas: kita memiliki dua buah elemen <label>.

Elemen <label> memang terlihat seperti elemen <span> pada umumnya, akan tetapi ia memiliki fungsi khusus: yaitu untuk melabeli sebuah field inputan.

Karena ketika screen reader membaca konten halaman HTML, lalu menemukan sebuah inputan, ia akan membaca label yang bersangkutan.

Fungsi lain dari tag <label> adalah: ketika kita mengklik label, maka browser akan meletakkan fokus pada kolom isian yang terhubung dengannya.

Kita bisa menghubungkan sebuah <label> dan <input> dengan atribut for untuk label, dan atribut id pada <input> dengan nilai yang sama persis.

Perhatikan contoh berikut:

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

Pada kode di atas, element <input> memiliki id isian-nama, dan elemen label memiliki atribut for dengan nilai yang sama yaitu isian-nama

Hasil keluaran:

Coba klik label “Nama” dan perhatikan bahwa browser akan meletakkan fokus kepada elemen input.

Radio Button

Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.

Perhatikan contoh berikut:

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="radio" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="radio" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="radio" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="radio" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="radio" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Hasil keluaran:

Pada pilihan di atas, kita hanya bisa memilih masing-masing satu saja.

Yang perlu diperhatikan adalah atribut name dari tiap radio button harus memiliki nilai yang sama dalam satu set pilihan. Pada contoh di atas, kita memiliki 2 buah set pilihan oleh karena itu namanya pun ada 2 yaitu: jenis_kelamin dan bahasa_asing.

Check Boxes

Berikutnya adalah checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.

Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="checkbox" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="checkbox" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="checkbox" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="checkbox" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="checkbox" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Berikut ini hasil keluarannya:

Pada contoh di atas kita bisa memilih (mencentang) semua opsi yang ada. 😂

Elemen Tombol Submit

Elemen input berikutnya yang akan kita bahas pada pengenalan form kali ini adalah input type submit.

Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika input ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.

Perhatikan contoh berikut:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <input type="submit" value="Simpan">
</form>

Hasil keluaran:

Kita juga bisa menggunakan element <button> di dalam sebuah form:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <button>Simpan</button>
</form>

Button yang berada di dalam sebuah form akan otomatis dianggap type="submit". Jika kita ingin membuat tombol biasa yang tidak men-submit <form>, kita bisa menambahkan atribut type="button".

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <button type="button">Simpan</button>
</form>

Pada kode di atas, ketika tombol “Simpan” diklik, ia tidak akan men-submit form karena ia bertipe tombol biasa (type="button"), bukan bertipe submit.

Bagaimana Cara Memproses Form?

Ketika sebuah <form> disubmit, baik menggunakan element <button> mau pun <input type="submit">, browser akan mengirimkan data tersebut kepada URL yang didefinisikan pada atribut action di dalam tag form.

Ada pun jika atribut action tidak didefinisikan, maka browser akan menggunakan URL sekarang sebagai tujuan pengiriman data.

Contoh:

<form action="/proses-pendaftaran">
  ...
</form>

Pada contoh di atas, ketika form disubmit, browser akan mengirimkan data yang ada menuju URL /proses-pendaftaran.

Apa yang terjadi pada URL /proses-pendaftaran?

Pada URL tersebut terdapat sebuah aplikasi/program yang berjalan di server (bukan di browser). Tugas dari program tersebut adalah mengelola data yang dikirim seperti misalnya menyimpan data tersebut ke dalam sebuah database.

Bahasa yang umum digunakan di dalam server adalah python, nodejs, PHP, dan lain sebagainya.

Untuk mendapatkan gambaran lebih jelas, kalian bisa membaca tutorial cara membuat dan memproses form HTML dengan PHP.

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 atribut apa saja yang ada pada element form.

Stay tune!