Membayangkan HTML form seperti seorang resepsionis di hotel bisa menjadi perumpamaan yang tepat. Saat di hotel, petugas resepsionis menyambut tamu, meminta kartu identitas untuk pendataan, lalu memberikan kunci kamar.

Petugas resepsionis mengumpulkan informasi dari tamu dan memastikan semuanya beres, demikian pula HTML form.

Adanya HTML form mengumpulkan data dari audiens dan memastikan semua ada dalam format yang tepat. HTML form berfungsi sebagai titik pertemuan antara pengunjung dan website, memandu interaksi dan transaksi.

Di artikel ini, kita akan membahas tentang HTML form, mulai dari pengertian, elemen, jenis-jenis input, cara membuat, sampai cara validasinya.

Apa itu HTML Form?

HTML form adalah salah satu elemen dalam web development yang memungkinkan audiens untuk memasukkan data dan berinteraksi dengan website. Elemen ini biasanya digunakan untuk pendaftaran, login, pencarian, dan banyak lagi.

Struktur dari HTML form cukup sederhana, biasanya terdiri dari elemen <form> yang di dalamnya terdapat berbagai jenis kontrol seperti teks, tombol, kotak centang, dan lain-lain.

Bagi developer, adanya HTML form tidak hanya membantu dalam membangun website yang responsif dan mudah digunakan, tetapi juga memungkinkan pengumpulan data dari audiens dengan cara yang efisien.

Elemen Form HTML

Berikut beberapa elemen utama form HTML:

Inputs

Elemen < input > adalah komponen utama dalam form HTML. Inputs membuat pengunjung bisa memasukkan data, seperti teks, angka, atau bahkan file.

Ada berbagai jenis input, seperti 'text', 'password', dan 'checkbox' yang bisa kamu gunakan sesuai kebutuhan.

Inputs digunakan dengan tag < input > dan tipe yang sesuai, misalnya < input type="text" > untuk bidang teks.

Contoh: input nama pengguna dan kata sandi

Labels

<label> berfungsi untuk memberikan keterangan atau judul pada input. Dengan kata lain, labels membantu audiens memahami apa yang harus dimasukkan di kolom tertentu. Misalnya, label "Nama" menunjukkan bahwa audiens harus memasukkan namanya di kolom tersebut.

Labels dideklarasikan dengan tag < label >, seperti < label for="nama">Nama</label >.

Contoh: menambahkan keterangan atau judul pada input

Buttons

< button > dalam form HTML biasanya digunakan untuk mengirimkan form. Ada beberapa jenis buttons, seperti 'submit' yang digunakan untuk mengirimkan data atau 'reset' yang akan mengosongkan semua bidang input.

Buttons dapat dibuat dengan < input type="submit" > atau < button type="submit">Kirim</button >.

Contoh: tombol kirim dan hapus

Select

Elemen < select > memungkinkan audiens memilih beberapa daftar opsi yang disediakan. Select bisa berbentuk dropdown menu atau list yang dapat dipilih lebih dari satu.

Elemen ini dideklarasikan dengan < select > dan di dalamnya terdapat opsi yang didefinisikan dengan < option >, seperti < select> < option > Pilihan 1</ option > </select >.

Contoh: dropdown menu bahasa

Textarea

Jika kamu ingin audiens dapat menulis teks dalam beberapa baris, seperti komentar atau alamat, kamu bisa menggunakan elemen < textarea >.

Textarea dipakai untuk input teks multi-baris, ditulis sebagai < textarea> </textarea >.

Contoh: teks berbasis baris

Fieldset dan Legend

Fieldset digunakan untuk mengelompokkan elemen-elemen terkait dalam form. Di sisi lain, legend berfungsi sebagai judul untuk grup tersebut. Kedua elemen ini membantu dalam membuat form yang terstruktur dan mudah dipahami.

Fieldset dideklarasikan dengan < fieldset > dan judul grup didefinisikan dengan < legend >, seperti < fieldset > < legend > Judul Grup< /legend >< /fieldset >.

Contoh: mengelompokkan elemen terkait

Radio Buttons

Radio buttons membuat audiens bisa memilih salah satu dari beberapa opsi, seperti memilih jenis kelamin.

Radio buttons ditulis menggunakan < input type="radio" >, di mana setiap pilihan memiliki tipe "radio".

Contoh: memilih jenis kelamin

Fungsi Form HTML

Berikut beberapa fungsi dari form HTML:

• Pengumpulan data: form HTML memungkinkan pengunjung website memasukkan informasi, seperti data pribadi, komentar, atau feedback. Data ini kemudian diproses oleh server untuk berbagai tujuan, seperti pendaftaran akun, pemesanan produk, atau analisis preferensi audiens.
• Interaksi dengan audiens: form HTML menjadi jembatan antara audiens dan website. Melalui form, audiens dapat berinteraksi dengan sistem, misalnya mengisi kuesioner, mendaftar berlangganan, atau berpartisipasi dalam survei.
• Otentikasi dan otorisasi: dalam sistem login, form HTML digunakan untuk mengumpulkan nama user dan password. Proses ini membantu dalam otentikasi (verifikasi identitas) dan otorisasi (pemberian hak akses).
• Pengaturan dan kontrol: form HTML bisa dipakai untuk mengendalikan berbagai aspek situs web, seperti pengaturan profil user, konfigurasi tampilan, atau pemilihan preferensi.
• Validasi dan kesalahan: dengan dukungan JavaScript, form HTML memungkinkan validasi input dari audiens. Fungsi ini membantu memeriksa apakah data yang dimasukkan valid dan memenuhi kriteria yang dibutuhkan.
• Integrasi dengan teknologi lain: form HTML dapat diintegrasikan dengan berbagai teknologi lain seperti CSS untuk penataan dan JavaScript untuk interaktivitas lanjutan, sehingga menciptakan user experience yang lebih maksimal.
• Efisiensi dan kemudahan: dengan adanya form HTML, pengumpulan dan pengolahan data menjadi lebih efisien. Kamu dapat lebih mudah merancang form yang kompleks namun tetap user-friendly. Kamu juga bisa mengelola data dengan cara yang terstruktur.

Jenis-jenis Input Form HTML

Berikut berbagai jenis input yang umum digunakan dalam form HTML:

• Teks (text): digunakan untuk mengumpulkan teks bebas, seperti nama atau alamat. Contoh penggunaannya adalah < input type="text" >.

• Nomor (number): dipakai khusus untuk angka. Input ini membantu dalam validasi dan memastikan bahwa audiens hanya dapat memasukkan angka. Contohnya, < input type="number" >.

• Tanggal (date): berfungsi dalam mengumpulkan tanggal. Input date akan memudahkan audiens dalam memilih tanggal. Contoh: < input type="date" >.

• Kata sandi (password): dipakai untuk kolom yang sifatnya sensitif. Password akan menyembunyikan karakter yang dimasukkan audiens. Gunakan < input type="password" >.

• E-mail: input ini memvalidasi bahwa input adalah alamat e-mail yang valid. Contohnya adalah < input type="email" >.

• Checkbox: untuk pilihan yes/no atau pilihan lain yang bisa dipilih lebih dari satu, gunakan < input type="checkbox" >.

• Radio: jika audiens harus memilih salah satu dari beberapa opsi, gunakan input radio dengan < input type="radio" >.

• File: untuk mengunggah file, kamu bisa menggunakan < input type="file" >.

• Range: input ini memungkinkan audiens memilih nilai dalam rentang dengan slider. Contohnya adalah < input type="range" >.

• Search: didesain khusus untuk bidang pencarian. Ditulis sebagai < input type="search" >.

Pemilihan jenis input di atas harus didasarkan pada data apa yang perlu dikumpulkan.

Pertimbangkan tipe dan format data, serta bagaimana kamu ingin audiens memasukkannya. Sebagai contoh, jika kamu mengumpulkan alamat e-mail, gunakan tipe "email" untuk validasi otomatis. Apabila kamu meminta audiens untuk memilih tanggal, tipe "date" akan memberikan interface yang intuitif.

Memahami dan menerapkan jenis input yang tepat tidak hanya akan membuat form lebih efisien dalam mengumpulkan data yang valid, tetapi juga meningkatkan pengalaman pengguna dengan menyediakan kontrol yang tepat dan mudah digunakan.

Cara Membuat Form HTML

Berikut cara membuat form HTML sederhana:

Langkah 1: membuat tag form

Pertama, mulailah dengan tag < form >. Tag ini akan mengelompokkan semua elemen input bersama-sama.

Langkah 2: menambahkan elemen input

Langkah kedua, tambahkan elemen input yang diperlukan. Berikut beberapa contohnya.

Input nama: untuk meminta nama audiens.

Input password: untuk meminta kata sandi.

Langkah 3: menambahkan tombol submit

Jika sudah, tambahkan tombol untuk mengirimkan form.

Langkah 4: menutup tag form

Terakhir, tutup tag form dengan < /form >.

Sebagai contoh, kamu ingin membuat form pendaftaran. Berikut kodenya:

Output:

Form akan menampilkan bidang untuk nama, opsi radio untuk memilih jenis kelamin, dan checkbox untuk memilih berlangganan newsletter atau tidak. Di bawahnya, ada tombol "Daftar" untuk mengirimkan informasi.

Cara Validasi Data Form HTML

Validasi data adalah proses verifikasi untuk memastikan informasi yang dimasukkan audiens memenuhi kriteria tertentu.

Validasi data membantu mencegah input yang tidak valid, memastikan integritas data, dan meningkatkan pengalaman pengguna.

• Keamanan: validasi mencegah input berbahaya yang mungkin bisa dieksploitasi.
• Integritas data: validasi memastikan data yang dikumpulkan sesuai dengan format yang diinginkan.
• Pengalaman pengguna: validasi memberikan feedback langsung jika audiens memasukkan data yang tidak valid, sehingga mereka bisa memperbaikinya tanpa harus mengirimkan form terlebih dahulu.

Contoh Validasi Menggunakan HTML

HTML5 menyediakan atribut validasi bawaan yang memudahkan pemeriksaan data.

Contoh: validasi e-mail

Output:

Jika audiens mencoba mengirimkan form tanpa alamat e-mail yang valid, browser akan menampilkan pesan error.

Contoh validasi menggunakan JavaScript

Untuk validasi yang lebih kompleks, kamu bisa menggunakan JavaScript.

Contoh: validasi panjang kata sandi

Output:

Jika kata sandi kurang dari 8 karakter, pesan peringatan akan ditampilkan dan form tidak bisa dikirimkan.

FAQ (Frequently Ask Question)

Apa Itu metode GET dan POST dalam form HTML?

GET dan POST adalah dua metode yang digunakan untuk mengirim data dari form ke server. GET mengirim data melalui URL, sementara POST mengirim data dalam badan permintaan dan lebih aman untuk data sensitif.

Dapatkah menggunakan gambar sebagai tombol submit dalam form HTML?

Pada umumnya, kamu bisa menggunakan gambar sebagai tombol submit dengan menggunakan elemen < input > dengan tipe "image".

Apa Itu atribut "action" dalam Form HTML?

Atribut "action" dalam tag < form > berfungsi untuk menentukan URL tempat data form akan dikirim saat audiens mengeklik tombol submit.

Kenapa input type radio bisa memilih lebih dari satu?

Sebenarnya, input type radio tidak memungkinkan audiens memilih lebih dari satu opsi. Jika kamu memiliki beberapa input radio dengan atribut name yang sama, audiens hanya dapat memilih salah satu dari opsi tersebut.

Penutup

HTML form adalah alat untuk menghubungkan audiens dengan website.

Dengan HTML form, pengunjung dapat memasukkan dan mengirimkan informasi, termasuk pendaftaran, login, dan pengumpulan feedback. Menggunakan berbagai elemen seperti teks, nomor, tanggal, dan tombol, serta fitur validasi, HTML form memastikan user mendapatkan pengalaman mengunjungi website yang nyaman dan aman.