Dalam pengembangan web, formulir adalah alat yang penting untuk mengumpulkan informasi dari pengguna. Untuk itu penting bagi anda menguasai tentang pembuatan Formulir dan Input Pada HTML. Formulir atau form memungkinkan pengguna untuk mengirimkan data seperti teks, angka, dan pilihan. Dalam tutorial ini, kami akan membahas secara detail tentang formulir dan elemen input dalam HTML, serta memberikan contoh pembuatan formulir interaktif.
Kapan Formulir Dibutuhkan?
Formulir pada web digunakan ketika Anda ingin mengumpulkan data atau informasi dari pengguna melalui interaksi langsung di halaman web. Pengguna dapat mengisi dan mengirimkan data melalui formulir, dan data tersebut kemudian dapat diproses oleh server atau digunakan untuk berbagai tujuan. Berikut adalah beberapa situasi umum di mana penggunaan formulir pada web sangat berguna:
- Pendaftaran dan Masuk
Formulir digunakan untuk memungkinkan pengguna mendaftar atau masuk ke situs web. Ini mencakup penggunaan email, kata sandi, nama pengguna, dan informasi profil lainnya. - Pengumpulan Kontak dan Informasi
Formulir dapat digunakan untuk mengumpulkan informasi kontak, seperti alamat email, nomor telepon, dan alamat pengiriman. - Pengumpulan Data Pengguna
Anda dapat menggunakan formulir untuk mengumpulkan informasi lebih lanjut tentang preferensi pengguna, seperti jenis kelamin, usia, minat, dan hobi. - Pemesanan dan Pembayaran
Formulir digunakan untuk mengumpulkan detail pemesanan atau pembayaran dari pelanggan, seperti produk yang dipesan, jumlah, dan informasi pembayaran. - Pengisian Survei dan Umpan Balik
Formulir dapat digunakan untuk mengumpulkan umpan balik dari pengguna atau untuk mengumpulkan data dalam survei. - Mengunggah Berkas
Jika Anda memerlukan pengguna untuk mengunggah berkas, seperti gambar, dokumen, atau video, formulir digunakan untuk mengelola proses ini. - Pencarian Data
Meskipun tidak selalu terlihat sebagai “formulir” tradisional, kotak pencarian pada situs web juga merupakan bentuk formulir yang memungkinkan pengguna mencari informasi. - Komunikasi dengan Pengguna
Formulir juga dapat digunakan untuk berkomunikasi dengan pengguna melalui kotak teks atau area teks besar seperti kotak komentar atau forum. Interaksi Sosial
Formulir digunakan dalam fitur interaksi sosial, seperti komentar pada posting blog, berbagi konten, dan mengirim pesan kepada pengguna lain.
Pada dasarnya, formulir digunakan ketika Anda memerlukan interaksi langsung dengan pengguna untuk mengumpulkan data atau memberikan pengalaman kustom. Penting untuk merancang formulir dengan baik untuk memastikan pengalaman pengguna yang baik, termasuk memperhatikan kejelasan label, validasi data, responsif, dan aksesibilitas.
Pengenalan Formulir dan Input Pada HTML
Formulir dalam HTML dibuat menggunakan tag <form>, yang merupakan kontainer untuk elemen-elemen input. Elemen-elemen input memungkinkan pengguna memasukkan data seperti teks, angka, pilihan, dan banyak lagi.
Struktur Dasar Formulir
1 2 3 | <form action="proses.php" method="post"> <!-- Elemen-elemen input --> </form> |
Keterangan:
action: Atribut yang menentukan URL atau skrip tujuan untuk memproses data formulir. Pada contoh di atas atribut action berisi proses.php yang artinya formulir akan diproses oleh file proses.php, namun pada tutorial html ini kita akan mengabaikan isi dari file proses.php.method: Atribut yang menentukan metode pengiriman data formulir, seperti"post"atau"get".
Elemen Input dalam Formulir
1. <input>: Input Teks
Elemen <input> digunakan untuk memasukkan teks, kata sandi, atau data singkat lainnya.
1 | <input type="text" name="username" placeholder="Masukkan username"> |
2. <textarea>: Area Teks Besar
Elemen <textarea> digunakan untuk memasukkan teks panjang atau paragraf.
1 | <textarea name="komentar" rows="4" cols="50">Tulis komentar Anda di sini...</textarea> |
3. <select>: Dropdown Pilihan
Elemen <select> membuat dropdown dengan pilihan yang dapat dipilih pengguna.
1 2 3 4 | <select name="jenis_kelamin"> <option value="pria">Pria</option> <option value="wanita">Wanita</option> </select> |
Contoh Pembuatan Formulir Interaktif
Untuk latihan membuat form atau formulir pada laman web dengna html, silahkan buat file dengan nama latihan_html_007.html dan silahkan masukkan kode berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <title>Contoh Formulir dan Input HTML</title> </head> <body> <h1>Formulir Interaktif</h1> <form action="proses.php" method="post"> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" required> <br> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <br> <label for="pesan">Pesan:</label> <textarea id="pesan" name="pesan" rows="4" cols="50" required></textarea> <br> <label for="jenis_kelamin">Jenis Kelamin:</label> <select id="jenis_kelamin" name="jenis_kelamin"> <option value="pria">Pria</option> <option value="wanita">Wanita</option> </select> <br> <input type="submit" value="Kirim"> </form> </body> </html> |
Jika file di atas kita jalankan melalui web browser, maka akan menampilkan tampilan halaman web yang berisi formulir seperti pada gambar berikut ini:
Formulir dan elemen input dalam HTML memungkinkan Anda untuk mengumpulkan informasi dari pengguna dengan interaksi yang mudah dan intuitif. Dengan memahami konsep dasar formulir, serta penggunaan elemen input seperti <input>, <textarea>, dan <select>, Anda dapat membuat formulir interaktif yang mengumpulkan data dengan efisien. Silahkan melakukan percobaan dengan atribut dan gaya yang berbeda untuk menciptakan formulir yang sesuai dengan kebutuhan Anda.
Tutorial lengkap html dapat anda lihat pada Index Tutorial HTML: Tingkat Dasar Hingga Tingkat Lanjut.