Programming Fundamental 6

2.4 Membangun Formulir Interaktif di HTML

Tag <form> berfungsi untuk membuat formulir input data pada halaman web. Form ini digunakan untuk mengirimkan data dari pengguna ke server, misalnya pada saat pengisian formulir kontak, login, atau registrasi.

2.4.1. Struktur Form Dasar

Struktur form dasar pada HTML terdiri dari:

1. Tag  <form> sebagai wadah utama semua elemen input.
2. Atribut action → Menentukan tujuan ke mana data akan dikirim (contoh: /submit).
3. Atribut method → Menentukan cara pengiriman data:

• get → Data dikirim melalui URL (umumnya untuk fungsi pencarian).
• post → Data dikirim melalui body (body) (lebih aman untuk data sensitif).

• Berikut contoh penulisan codenya:

<form action="/submit" method="post"> 

  <div>

    <label for="nama">Nama:</label>

    <input type="text" id="nama" name="nama" required />

  </div>

  <div>

    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required />

  </div>

  <div>

    <label for="pesan">Pesan:</label>

    <textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>

  </div>

  <button type="submit">Kirim</button>

</form>

Penjelasan Bagian-bagian Form

Elemen-elemen yang digunakan dalam struktur form dasar adalah:

• <div>: Digunakan untuk mengelompokkan setiap bagian form agar terstruktur dan mudah diatur.
• <label>: Memberi teks keterangan di samping elemen input. Atribut for berfungsi untuk menghubungkan label dengan atribut id dari input terkait.
• <input>: Kolom untuk mengetik data satu baris (misalnya nama, email).
• <textarea>: Area untuk teks panjang atau multi-baris (misal: pesan atau komentar).
• <button type="submit">: Tombol untuk mengirim data form ke alamat yang ditentukan pada atribut action.

Catatan Penting

Tambahkan atribut required untuk memastikan kolom input wajib diisi sebelum form dikirim.

Penggunaan atribut id pada input dan for pada <label> memastikan label dapat diklik untuk langsung mengarahkan fokus ke kolom input.

2.4.2. Tag <input> dan <textarea>

Tag <input> dipakai untuk menerima satu baris teks seperti nama atau email. Sementara itu, tag <textarea> lebih sesuai untuk teks panjang atau lebih dari satu baris, seperti pesan atau komentar.

Perlu diperhatikan juga bahwa tag <input> adalah self-closing (tidak memerlukan tag penutup), berbeda dengan <textarea> yang harus ditutup dengan </textarea>.

Berikut contoh penulisan codenya:

<h1>Contact us</h1>

<form>

  <div>

    <label for="email">Email (Required)</label>

    <input

      type="email"

      id="email"

      name="email"

      placeholder="Masukan email Anda"

      required

    />

  </div>

  <div>

    <label for="massage">Massage (Required)</label>

    <textarea

      id="massage"

      name="massage"

      placeholder="Tulis pesan Anda disini..."

      required

    >/<textarea>

  </div>

  <p class="required-note">* Required fields must be filled</p>

  <button type="submit">Send</button>

</form>

2.4.3. Komentar di HTML

Teks yang ditulis di antara <!-- dan --> merupakan sebuah komentar. Komentar tidak akan muncul pada browser, tetapi sangat berguna untuk menyisipkan catatan atau penjelasan kode di dalam dokumen HTML

Komentar sering digunakan untuk mengingatkan kembali kenapa seorang pengembang menulis bagian kode tersebut dan juga dapat memberikan informasi kepada pengembang lain yang membaca kode yang telah dibuat.

2.4.4 Jenis-jenis Input

Form HTML menyediakan beragam tipe input untuk kebutuhan yang berbeda. Tipe ini diatur melalui atribut type pada tag <input>.

Beberapa jenis input tersebut, diantaranya:

1. Teks Input

• Biasanya digunakan untuk memasukkan teks pendek seperti nama atau username.
• placeholder menampilkan teks contoh di kolom input.
• Biasanya digunakan di form login, form kontak, dsb.
• Berikut contoh penulisan codenya :

<!-- Text Input -->

<input type="text" name="nama" placeholder="Masukan nama" />

2. Email Input

• Khusus untuk alamat email, dan otomatis akan memvalidasi formatnya (harus ada simbol “@” dan domain).
• Atribut required artinya wajib diisi.
• Browser akan menolak pengiriman kalau format email salah.
• Berikut contoh penulisan codenya :

<!-- Email Input -->

<input type="email" name="email" required />

3. Password Input

• Digunakan untuk menyembunyikan teks yang diketik (misalnya sandi).
• Huruf yang diketik berubah jadi titik atau bintang (•).
• Berikut contoh penulisan codenya :

<!-- Password Input -->

<input type="password" name="password" />

4. Number Input

• Untuk angka saja, dapat diatur batas minimal dan maksimal dengan min dan max.
• Akan muncul tanda panah kecil ↑↓ di sisi kanan untuk menaikkan/menurunkan angka.
• Cocok untuk umur, jumlah, harga, dsb.
• Berikut contoh penulisan codenya :

<!-- Number Input -->

<input type="number"  name="umur" min="1"  max="100" />

5. Date Input

• Untuk memilih tanggal dari kalender bawaan browser.
• Pengguna tinggal klik ikon kalender untuk memilih tanggal.
• Berikut contoh penulisan codenya :

<!-- Date Input -->

<input type="date" name="tanggal_lahir" />

6. Checkbox

• Untuk memilih lebih dari satu pilihan (multi select).
• Checkbox bisa dicentang atau tidak.
• Biasanya dipakai untuk persetujuan, hobi, preferensi, dll.
• Berikut contoh penulisan codenya :

<!-- Checkbox -->

<input type="checkbox" id="setuju" name="setuju" />

<label for="setuju">Saya setuju dengan syarat dan ketentuan</label>

7. Radio Button

• Untuk memilih satu pilihan dari beberapa opsi (hanya satu yang bisa aktif).
• Semua radio dengan name yang sama dianggap satu kelompok.
• Hanya satu yang bisa dipilih dalam satu grup.
• Berikut contoh penulisan codenya :

<!-- Radio Button -->

<input type="radio" id="laki" name="gender" value="laki" />

<label for="laki">Laki-laki</label>

<input type="radio" id="perempuan" name="gender" value="perempuan" />

<label for="perempuan">Perempuan</label>

8. Select Dropdown

Untuk membuat daftar pilihan berbentuk dropdown

• <select> adalah wadahnya.
• <option> berisi setiap pilihan.
• Pilihan pertama bisa dikosongkan untuk menampilkan placeholder (“Pilih kota…”).
• Berikut contoh penulisan codenya :

<!-- Select Dropdown -->

<select name="kota">

  <option value="">Pilih kota...</option>

  <option value="jakarta">Jakarta</option>

  <option value="bandung">Bandung</option>

  <option value="surabaya">Surabaya</option>

</select>

Tips praktik terbaik (dalam pembuatan form)

• Selalu gunakan tag <label> di setiap input untuk meningkatkan keramahan pengguna.
• Tambahkan atribut required, min, max, atau pattern sesuai kebutuhan validasi.
• Gunakan placeholder untuk memudahkan pengguna memahami maksud dari kolom input.
• Untuk form yang panjang, kelompokkan bagian menggunakan <fieldset> dan <legend> agar lebih rapi.

Studi Kasus / Contoh Nyata

Latar Belakang:

   

Seorang developer bernama Aiman ditugaskan membuat formulir pendaftaran online untuk acara tahunan bernama TechTalk 2025, yaitu sebuah seminar teknologi yang dihadiri oleh profesional IT dan mahasiswa.

• Tujuan formulir ini adalah untuk mengumpulkan data peserta, seperti:
• Nama lengkap
• Email
• Asal institusi atau perusahaan
• Jenis tiket (Regular / VIP)
• Persetujuan untuk menerima informasi melalui email

Manajer proyek meminta agar formulir terlihat sederhana tetapi interaktif dan mudah digunakan, serta memiliki validasi dasar agar data yang masuk lebih bersih.

Situasi yang Dihadapi Aiman:

• Aiman membuat formulir menggunakan tag <form>, namun awalnya hanya berisi input teks tanpa label, sehingga pengguna kesulitan memahami kolom isian.
• Tim desain meminta agar setiap kolom diberi label yang jelas, tombol kirim terlihat menonjol, dan form menampilkan pesan jika ada data yang belum diisi.
• Aiman memutuskan menggunakan elemen-elemen berikut:
• <label> untuk memberi keterangan pada setiap input,
• <input> dengan tipe berbeda seperti text, email, radio, dan checkbox,
• <select> untuk pilihan jenis tiket,
• <button> untuk tombol kirim,
• serta atribut seperti required untuk validasi sederhana.

Pertanyaan Studi Kasus:

1. Tag HTML apa yang digunakan untuk membungkus seluruh elemen formulir?
2. Bagaimana cara agar setiap kolom input memiliki keterangan yang jelas untuk pengguna?
3. Tulis contoh kode untuk membuat pilihan jenis tiket dengan opsi “Regular” dan “VIP”.
4. Bagaimana cara agar formulir tidak bisa dikirim jika pengguna belum mengisi kolom “Email”?
5. Apa fungsi atribut name pada elemen input dalam formulir HTML?

Solusi / Jawaban Studi Kasus

Berikut penulisan form code tersebut secara lengkap:

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" name="width=device-width, initial-scale=1.0">

  <title>Formulir Pendaftaran TechTalk 2025</title>

</head>

<body>

  <h1>Pendaftaran TechTalk 2025</h1>

  <form action="submit" method="post">

    <label for="fullname">Nama Lengkap:</label><br>

    <input type="text" id="fullname" name="fullname" required><br><br>

    <label for="email">Email:</label><br>

    <input type="email" id="email" name="email" required><br><br>

    <label for="institution">Institusi/Perusahaan:</label><br>

    <input type="text" id="institution" name="institution" required><br><br>

    <label for="ticket">Jenis Tiket:</label><br>

    <select id="ticket" name="ticket">

      <option value="regular">Regular</option>

      <Option value="vip">VIP</option>

    </select><br><br>

    <label>

      <input type="checkbox" name="subscribe" value="yes">Saya bersedia menerima informasi acara melalui email

    </select><br><br>

    <button type="submit">Daftar Sekarang</button>

  </form>

</body>

</html>

Penjelasan:

• Untuk membungkus seluruh elemen input dapat menggunakan tag <form>:
• action menentukan kemana data dikirim.
• method bisa get atau post tergantung kebutuhan.
• Agar setiap kolom input memiliki keterangan yang jelas untuk pengguna, maka bisa menggunakan <label> agar pengguna tahu fungsi setiap kolom:
• Atribut for harus sesuai dengan id input-nya.
• Agar formulir tidak bisa dikirim jika pengguna belum mengisi kolom “Email”, dapat menggunakan atribut required dan type="email". Dengan demikian browser otomatis akan menolak pengiriman jika format email tidak valid.
• Fungsi atribut name digunakan untuk mengidentifikasi data yang dikirim ke server. Contoh: Jika pengguna mengisi name="fullname", maka data yang dikirim akan berbentuk pasangan: fullname=Aila Aiman.

Kesimpulan Studi Kasus

Berdasarkan studi kasus tersebut dapat kita simpulkan bahwa:

• Membangun formulir interaktif di HTML bukan hanya tentang mengumpulkan data, tetapi juga menciptakan pengalaman pengguna yang baik dan validasi data yang efektif.
• Dengan menggunakan elemen seperti <form>, <label>, <input>, <select>, dan atribut seperti required serta type, developer dapat:
• Menyajikan formulir yang jelas, mudah diisi, dan terstruktur,
• Meminimalkan kesalahan input dari pengguna,
• Serta mempermudah integrasi dengan sistem backend untuk pengolahan data lebih lanjut.
• Formulir yang interaktif dan informatif adalah komponen penting dalam hampir semua aplikasi web modern, baik untuk pendaftaran, login, pemesanan, maupun pengumpulan feedback pengguna.