Selamat datang di seri “Belajar HTML”! Pada tutorial kali ini, kita akan menyelami salah satu komponen paling interaktif dan fundamental di dunia web: Form HTML. Form adalah elemen krusial yang memungkinkan pengguna untuk memasukkan data dan berinteraksi dengan sebuah situs web, mulai dari formulir kontak sederhana hingga pendaftaran akun yang kompleks.

Apa itu Form HTML?

Form HTML adalah sebuah bagian dari dokumen HTML yang berisi elemen-elemen interaktif (disebut juga kontrol) yang memungkinkan pengguna untuk memasukkan informasi. Data yang dimasukkan ini kemudian dapat dikirim ke server untuk diproses lebih lanjut, misalnya untuk disimpan di database, dikirim sebagai email, atau digunakan untuk login.

Elemen Dasar: Tag <form>

Semua elemen form harus berada di dalam tag pembuka <form> dan tag penutup </form>. Tag ini bertindak sebagai wadah untuk semua inputan dan tombol yang ada di dalamnya.

<form>
  </form>

Atribut Penting pada Tag <form>

Ada dua atribut utama yang sangat penting untuk dipahami dalam tag <form>:

• action: Atribut ini menentukan ke mana data formulir akan dikirim saat pengguna menekan tombol submit. Nilainya biasanya adalah sebuah URL dari skrip di sisi server (seperti file PHP, Python, atau lainnya) yang akan memproses data tersebut.
• method: Atribut ini menentukan metode HTTP yang akan digunakan saat mengirimkan data. Dua nilai yang paling umum digunakan adalah:
  • GET: Data formulir akan ditambahkan ke URL. Metode ini cocok untuk formulir yang tidak sensitif seperti pencarian, di mana pengguna bisa melihat dan mem-bookmark hasilnya.
  • POST: Data formulir akan dikirim dalam body dari permintaan HTTP. Metode ini lebih aman dan lebih disukai untuk mengirim data sensitif seperti kata sandi atau informasi pribadi karena datanya tidak terlihat di URL.

Contoh:

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

Mengumpulkan Data dengan Elemen <input>

Elemen <input> adalah elemen form yang paling serbaguna. Tampilannya bisa sangat beragam tergantung pada nilai dari atribut type-nya.

Berikut adalah beberapa tipe input yang paling sering digunakan:

• type="text": Membuat sebuah kotak input teks satu baris untuk memasukkan nama, username, dll.
• type="password": Sama seperti text, namun karakter yang dimasukkan akan disamarkan (biasanya dengan tanda bintang atau titik).
• type="email": Dikhususkan untuk input alamat email dan memiliki validasi bawaan di browser modern.
• type="number": Untuk memasukkan angka.
• type="checkbox": Membuat sebuah kotak centang yang memungkinkan pengguna untuk memilih satu atau beberapa pilihan dari sebuah daftar.
• type="radio": Membuat sebuah tombol radio. Berbeda dengan checkbox, pengguna hanya bisa memilih satu opsi dari beberapa pilihan yang memiliki name yang sama.
• type="submit": Membuat sebuah tombol yang ketika diklik akan mengirimkan data formulir ke alamat yang ditentukan di atribut action.
• type="file": Memungkinkan pengguna untuk memilih dan mengunggah file dari perangkat mereka.
• type="date": Menyediakan antar muka kalender untuk memilih tanggal.

Setiap elemen <input> harus memiliki atribut name. Atribut ini berfungsi sebagai nama variabel untuk data yang dimasukkan, yang nantinya akan digunakan oleh server untuk mengidentifikasi setiap data.

Memberi Label dengan Tag <label>

Untuk aksesibilitas dan pengalaman pengguna yang lebih baik, setiap elemen input sebaiknya memiliki label yang terhubung dengannya menggunakan tag <label>. Atribut for pada tag <label> harus memiliki nilai yang sama dengan id dari elemen input yang bersangkutan.

Contoh Penggunaan <input> dan <label>:

<form action="/login" method="POST">
  <label for="username">Nama Pengguna:</label><br>
  <input type="text" id="username" name="user_username"><br>

  <label for="password">Kata Sandi:</label><br>
  <input type="password" id="password" name="user_password"><br><br>

  <input type="submit" value="Masuk">
</form>

Input Teks Multibaris dengan <textarea>

Jika Anda membutuhkan input teks yang lebih panjang, seperti kolom komentar atau biografi, gunakan tag <textarea>.

<label for="komentar">Komentar:</label><br>
<textarea id="komentar" name="user_komentar" rows="4" cols="50"></textarea>

• rows: Menentukan jumlah baris teks yang terlihat.
• cols: Menentukan lebar dari area teks.

Pilihan Dropdown dengan <select> dan <option>

Untuk menyajikan daftar pilihan dalam bentuk menu dropdown, Anda bisa menggunakan kombinasi tag <select> dan <option>.

<label for="kota">Pilih Kota:</label>
<select id="kota" name="user_kota">
  <option value="jakarta">Jakarta</option>
  <option value="surabaya">Surabaya</option>
  <option value="malang" selected>Malang</option>
  <option value="bandung">Bandung</option>
</select>

• Tag <select> bertindak sebagai pembungkus.
• Setiap tag <option> merepresentasikan satu pilihan. Atribut value pada <option> adalah data yang akan dikirim ke server. Atribut selected dapat ditambahkan untuk membuat sebuah opsi terpilih secara default.

Mengelompokkan Elemen dengan <fieldset> dan <legend>

Untuk merapikan formulir yang panjang dan kompleks, Anda bisa mengelompokkan elemen-elemen yang saling berhubungan menggunakan tag <fieldset>. Tag <legend> kemudian digunakan untuk memberikan judul atau caption pada grup tersebut.

Contoh Formulir Pendaftaran Lengkap:

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Pendaftaran</title>
</head>
<body>

    <h2>Formulir Pendaftaran Anggota Baru</h2>

    <form action="/proses-registrasi" method="POST">
        <fieldset>
            <legend>Data Diri</legend>
            <p>
                <label for="nama">Nama Lengkap:</label>
                <input type="text" id="nama" name="nama_lengkap" placeholder="Masukkan nama Anda...">
            </p>
            <p>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email_user">
            </p>
            <p>
                <label for="password">Kata Sandi:</label>
                <input type="password" id="password" name="password_user">
            </p>
        </fieldset>

        <fieldset>
            <legend>Informasi Tambahan</legend>
            <p>
                <label>Jenis Kelamin:</label>
                <label><input type="radio" name="jenis_kelamin" value="pria"> Pria</label>
                <label><input type="radio" name="jenis_kelamin" value="wanita"> Wanita</label>
            </p>
            <p>
                <label for="alamat">Alamat:</label><br>
                <textarea id="alamat" name="alamat_user" rows="3"></textarea>
            </p>
            <p>
                <label for="provinsi">Provinsi:</label>
                <select id="provinsi" name="provinsi_user">
                    <option value="jawa_timur">Jawa Timur</option>
                    <option value="jawa_tengah">Jawa Tengah</option>
                    <option value="jawa_barat">Jawa Barat</option>
                </select>
            </p>
        </fieldset>

        <p>
            <input type="submit" value="Daftar">
        </p>
    </form>

</body>
</html>

Dengan memahami elemen-elemen dasar form HTML ini, Anda sudah memiliki bekal yang cukup untuk mulai membuat halaman web yang lebih interaktif. Pada seri selanjutnya, kita akan membahas lebih dalam mengenai atribut-atribut dan elemen-elemen form lainnya yang lebih canggih. Selamat mencoba dan teruslah berlatih!