Form (Formulir) Pada Web

Formulir (form) adalah elemen penting dalam desain web yang memungkinkan pengguna untuk memasukkan dan mengirimkan informasi ke server atau aplikasi web. Formulir digunakan untuk berbagai tujuan, seperti mengumpulkan data pengguna, melakukan pencarian, atau mengirimkan informasi untuk registrasi, login, atau kontak. Formulir pada web memungkinkan interaksi langsung antara pengguna dan situs web.

Elemen Utama dalam Formulir Web

  1. Tag <form>
    Elemen utama dari formulir adalah tag <form>. Tag ini membungkus seluruh elemen input dan mendefinisikan area di mana data akan dimasukkan dan dikirimkan. Formulir ini biasanya memiliki dua atribut utama:

    • action: Menentukan URL tujuan tempat data formulir akan dikirim.
    • method: Menentukan metode pengiriman data (GET atau POST).
      • GET mengirim data melalui URL.
      • POST mengirim data melalui body HTTP request, lebih aman dan digunakan untuk data yang lebih besar atau sensitif.

    Contoh:

    <form action="/submit" method="POST">
  <!-- Elemen input di sini -->
</form>

  2. Elemen Input Elemen input adalah tempat pengguna memasukkan informasi. Ada beberapa jenis elemen input yang digunakan dalam formulir, di antaranya:

    • : Untuk memasukkan teks biasa, seperti nama atau alamat email.
    • : Untuk memasukkan kata sandi (data akan disembunyikan).
    • : Untuk pilihan tunggal (hanya satu pilihan yang dapat dipilih dalam grup).
    • : Untuk pilihan ganda (lebih dari satu pilihan bisa dipilih).
    • : Untuk memasukkan teks dalam bentuk paragraf atau lebih panjang.
    • dan : Untuk dropdown menu, di mana pengguna bisa memilih dari daftar pilihan.
    • : Digunakan untuk membuat tombol kirim atau tombol aksi lain.

    Contoh:

    <label for="username">Username:</label>
<input type="text" id="username" name="username">

  3. Label
    Elemen <label> digunakan untuk memberikan keterangan atau label pada elemen input. Ini membuat formulir lebih mudah digunakan dan meningkatkan aksesibilitas. Penggunaan atribut for pada label mengaitkan label dengan elemen input yang sesuai.

    Contoh:

    <label for="email">Email:</label>
<input type="email" id="email" name="email">

  4. Button Elemen tombol digunakan untuk mengirimkan formulir atau menjalankan aksi tertentu. Elemen ini dapat berupa:

    • : Untuk mengirimkan formulir.
    • : Untuk mereset semua input dalam formulir.

    Contoh:

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

  5. Fieldset dan Legend Tag <fieldset> digunakan untuk mengelompokkan elemen dalam formulir, sementara tag <legend> memberikan deskripsi atau judul untuk kelompok elemen tersebut. Ini membantu dalam membuat formulir yang lebih terstruktur dan lebih mudah dibaca.

    Contoh:

    <fieldset>
  <legend>Informasi Kontak</legend>
  <label for="phone">Nomor Telepon:</label>
  <input type="text" id="phone" name="phone">
</fieldset>

Validasi Formulir

Validasi formulir adalah proses untuk memastikan bahwa data yang dimasukkan oleh pengguna benar dan sesuai dengan format yang diinginkan sebelum formulir dikirimkan. Validasi bisa dilakukan baik di sisi klien (menggunakan JavaScript) atau di sisi server (menggunakan bahasa pemrograman server-side).

Beberapa atribut validasi yang dapat digunakan dalam tag <input>:

  • required: Memastikan bahwa input harus diisi.
  • pattern: Menentukan pola regular expression untuk memvalidasi format input.
  • minlength dan maxlength: Menentukan jumlah karakter minimum dan maksimum yang dapat dimasukkan.

Contoh validasi:

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

Penggunaan Formulir di Web

Formulir di web digunakan dalam berbagai konteks, antara lain:

  1. Pendaftaran dan Registrasi: Untuk mengumpulkan informasi dari pengguna baru, seperti nama, email, dan kata sandi.
  2. Login: Untuk memverifikasi identitas pengguna dengan meminta nama pengguna dan kata sandi.
  3. Kontak: Untuk memungkinkan pengguna mengirimkan pertanyaan atau pesan melalui situs web.
  4. Survei atau Polling: Untuk mengumpulkan umpan balik atau informasi dari pengguna.
  5. Pencarian: Untuk memungkinkan pengguna mencari konten tertentu di situs web.

Kesimpulan

Formulir adalah elemen penting dalam interaksi pengguna dengan situs web. Dengan menggunakan formulir, pengguna dapat mengirimkan data atau informasi yang dibutuhkan oleh situs web. Desain formulir yang baik dan pengelolaan validasi yang tepat dapat meningkatkan pengalaman pengguna dan memastikan data yang dikirimkan sesuai dengan harapan.