Formulir atau form adalah salah satu komponen penting dalam dunia pengembengan web.Pada saat membangun sebuah website, kita mungkin perlu menggunakan formulir untuk melakukan pengisian data terhadap pengunjung. Hampir semua website interaktif membutuhkan form, baik untuk keperluan Login, Register, Pencarian, dan lain-lain. HTML menyediakan cara yang sangat fleksibel untuk membuat formulir dengan struktur yang jelas dan dapat dikostumisasi sesuai kebutuhan. Pada artikel ini, kita akan membahas bagaimana cara membuat form serta fungsi setiap elemen yang ada didalam form pada HTML.

Apa itu Formulir HTML?

Formulir HTML adalah elemen yang digunakan untuk mengumpulkan data dari pengunjung situs melalui input yang mereka isi dan kirimkan dengan menekan tombol submit pada form. Data tersebut nantinya akan dikirimkan ke server untuk diproses, baik melalui metode HTTP GET maupun POST. Perlu diketahui, semua elemen yang berkaitan dengan form harus berada didalam tag <form>. Berikut contoh dari penggunaan form pada HTML.

<form action="/submit" method="POST">
  <label>Your Name:</label>
  <input type="text" name="name" required>
  <button type="submit">Submit</button>
</form>

Penjelasan dari kode diatas.

• <form> merupakan tag pembuka untuk membuat formulir pada HTML.
• action menentukan URL tujuan dimana data formulir akan dikirim ke server.
• method menentukan metode pengiriman data.
• <label> berguna untuk memberikan label pada elemen form seperti input.
• <input elemen yang berguna untuk menerima input dari pengguna.
• type='text' menentukan tipe input, bahwa input yang digunakan adalah untuk teks saja.
• name nama variabel yang akan dikirim ke server.
• required memastikan bahwa pengguna harus mengisi inputan sebelum mengirim form.
• <button> berguna untuk membuat elemen tombol pada form.
• type='submit menentukan bahwa tombol yang dibuat adalah tombol submit.

Macam-Macam Metode Yang Ada Pada Formulir HTML

Umumnya, terdapat 2 metode yang sering digunakan untuk mengirim data ke server melalui form pada HTML. Dua metode tersebut adalah GET dan POST. Berikut penjelasan lengkap mengenai kedua metode tersebut.

1. GET Metode GET mengirimkan data melalui URL. Setiap input yang diisi akan ditambahkan sebagai query string di akhir URL tujuan. Contohnya seperti https://www.nganggurdev.com/en/articles?categoryName=HTML. Kita bisa menggunakan metode ini ketika data yang dikirimkan tidak mengandung data yang sensitif.
2. POST Sebaliknya, metode POST mengirimkan data melalui body dari permintaan HTTP, bukan di URL seperti metode GET. Dengan begitu, URL tidak akan menampilkan query string pada browser dan terlihat lebih rapi. Kita bisa menggunakan metode ini ketika data yang dikirimkan mengandung data penting atau sensitif seperti formulir pendaftaran, login, dan lain sebagainya.

Elemen Penting Dalam Form HTML

Dalam pembuatan form, HTML menyediakan berbagai elemen input yang dapat digunakan sesuai dengan jenis data yang ingin dikumpulkan. Beberapa elemen tersebut adalah.

• <input digunakan untuk berbagai jenis data seperti teks, email, nominal, tanggal, dan lain-lain.
• <textarea> digunakan untuk input teks yang panjang seperti komentar atau deskripsi.
• <select> dan <option> dapat digunakan untuk membuat daftar pilihan (dropdown).
• label memberikan label yang terhubung ke elemen input tertentu.

Contoh Form HTML Lengkap

Berikut contoh formulir pendaftaran pengguna yang sudah lengkap dan tentunya SEO Friendly.

<form action="/register" method="POST">
  <fieldset>
    <legend>Register Form</legend>

    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" placeholder="Your fullname...." required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@email.com" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
      <option value="">--Choose your gender--</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>

    <button type="submit">Register Now</button>
  </fieldset>
</form>

Coba implementasikan kode diatas pada device kalian masing-masing dengan nama file form-register.html. Simpan, lalu jalankan dan lihat di browser.

Kesimpulan

FOrm HTML adalah salah satu elemen penting dalam berinteraksi antara pengguna dan website. Dengan memahami struktur dan elemen-elemen penting pada formulir, kamu dapat membuat form yang fungsional dan SEO Friendly.

Terimakasih, sampai jumpa di artikel selanjutnya.