Panduan untuk membuat formulir HTML sederhana merupakan topik yang penting dalam pengembangan web. Formulir HTML memungkinkan pengguna untuk memasukkan informasi ke dalam halaman web dan mengirimkannya ke server untuk diproses.
Dalam artikel ini, Adi Prayitno akan membahas langkah-langkah dasar dalam membuat formulir HTML sederhana, termasuk menyiapkan file HTML, menambahkan input, menambahkan tombol submit, dan memproses data formulir di sisi server. Jadi, jika Anda tertarik untuk belajar cara membuat formulir HTML sederhana, simak panduan berikut ini.
Panduan untuk membuat formulir HTML sederhana
 |
| HTML Form illustration |
Menyiapkan File HTML
Langkah pertama dalam membuat formulir HTML sederhana adalah menyiapkan file HTML. Untuk melakukan ini, buka editor teks seperti Notepad atau Sublime Text dan buat file baru dengan ekstensi .html. Anda dapat memberikan nama file yang sesuai dengan keinginan Anda. Setelah itu, tambahkan kode dasar HTML ke dalam file dan simpan.
Berikut adalah contoh kode dasar HTML yang dapat Anda gunakan sebagai awal dalam membuat formulir HTML sederhana:
<!DOCTYPE html><html><head><title>Judul Halaman Web Anda</title></head><body></body></html>
Dalam kode di atas, tag HTML, head, dan body digunakan untuk mengelompokkan elemen-elemen HTML dalam dokumen. Tag HTML mendefinisikan awal dan akhir dari dokumen HTML, sementara tag head berisi informasi metadata tentang halaman web seperti judul, deskripsi, dan meta tag lainnya. Tag body berisi konten aktual dari halaman web, seperti teks, gambar, dan elemen formulir.
Setelah membuat file HTML dasar, Anda siap untuk menambahkan elemen formulir HTML ke dalamnya.
Menambahkan Input
Langkah berikutnya dalam membuat formulir HTML sederhana adalah menambahkan elemen input ke dalam file HTML Anda. Elemen input digunakan untuk meminta pengguna memasukkan informasi ke dalam formulir Anda. Ada beberapa jenis elemen input yang dapat digunakan, seperti input teks, input angka, checkbox, dan lain sebagainya.
Berikut adalah contoh kode untuk menambahkan elemen input teks ke dalam file HTML Anda:
<!DOCTYPE html><html><head><title>Judul Halaman Web Anda</title></head><body><form><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><br><br></form></body></html>
Kode di atas menambahkan elemen input teks dengan atribut "name" dan "id" bernama "nama". Atribut "name" digunakan untuk mengidentifikasi data yang akan dikirim ke server saat pengguna mengirimkan formulir, sedangkan atribut "id" digunakan untuk mengidentifikasi elemen input dalam file HTML.
Label digunakan untuk memberikan label pada input, sehingga pengguna tahu informasi apa yang diminta dari mereka. Dalam contoh di atas, label "Nama" ditambahkan di depan input teks. Tag <br> digunakan untuk menambahkan baris baru setelah input.
Anda dapat menambahkan jenis elemen input lainnya dengan mengubah nilai atribut "type" menjadi "number" untuk input angka, "checkbox" untuk checkbox, "radio" untuk tombol radio, dan lain-lain.
Menambahkan Tombol Submit
Setelah menambahkan elemen input ke dalam formulir HTML, langkah selanjutnya adalah menambahkan tombol submit yang akan memungkinkan pengguna mengirimkan data formulir ke server.
Berikut adalah contoh kode untuk menambahkan tombol submit ke dalam file HTML Anda:
<!DOCTYPE html><html><head><title>Judul Halaman Web Anda</title></head><body><form><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><br><br><input type="submit" value="Kirim"></form></body></html>
Kode di atas menambahkan tombol submit dengan atribut "value" bernama "Kirim". Saat pengguna mengklik tombol ini, data formulir akan dikirimkan ke server dan dapat diproses di sisi server.
Anda dapat menambahkan atribut "action" dan "method" ke dalam tag <form> untuk menentukan URL dan metode HTTP yang akan digunakan untuk mengirim data formulir. Atribut "action" menentukan URL ke mana data formulir akan dikirimkan, sedangkan atribut "method" menentukan metode HTTP yang digunakan, seperti GET atau POST.
Misalnya, jika Anda ingin mengirim data formulir ke file PHP bernama "proses.php" dan menggunakan metode POST, maka kode <form> Anda akan terlihat seperti ini:
<form action="proses.php" method="post">
Pastikan bahwa file PHP yang Anda tuju ada dan dapat diproses oleh server Anda.
Memproses Data Formulir
Setelah menambahkan elemen input dan tombol submit ke dalam formulir HTML Anda, langkah terakhir adalah memproses data formulir yang dikirimkan oleh pengguna ke server.
Untuk memproses data formulir, Anda dapat menggunakan bahasa pemrograman seperti PHP atau JavaScript. Di sini, kami akan memberikan contoh penggunaan PHP untuk memproses data formulir.
Berikut adalah contoh kode PHP untuk memproses data formulir yang dikirimkan melalui metode POST:
<!DOCTYPE html><html><head><title>Judul Halaman Web Anda</title></head><body><form action="proses.php" method="post"><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><br><br><input type="submit" value="Kirim"></form><?php// memproses data formulirif ($_SERVER["REQUEST_METHOD"] == "POST") {$nama = $_POST["nama"];echo "Halo, $nama!";}?></body></html>
Kode di atas menambahkan kode PHP di dalam file HTML Anda untuk memproses data formulir. Kode PHP berada di antara tag <?php dan ?>. Di sini, kami menggunakan variabel $nama untuk menyimpan nilai yang dikirimkan melalui input teks dengan atribut "name" bernama "nama". Kemudian, kami menggunakan pernyataan echo untuk menampilkan pesan selamat datang yang mencakup nilai yang dikirimkan oleh pengguna.
Perlu diingat bahwa kode PHP harus dijalankan di sisi server dan tidak akan berfungsi jika hanya dijalankan di sisi klien. Oleh karena itu, pastikan server Anda mendukung PHP dan bahwa file PHP yang digunakan untuk memproses data formulir sudah ada di server.
Kesimpulan
Dalam membuat formulir HTML sederhana, Anda perlu menyiapkan file HTML dan menambahkan elemen input dan tombol submit ke dalamnya. Elemen input digunakan untuk mengambil nilai yang diinputkan oleh pengguna, sedangkan tombol submit digunakan untuk mengirimkan data formulir ke server.
Setelah itu, data formulir yang dikirimkan perlu diproses di sisi server menggunakan bahasa pemrograman seperti PHP atau JavaScript. Anda dapat menggunakan atribut "action" dan "method" pada tag <form> untuk menentukan URL dan metode HTTP yang digunakan untuk mengirimkan data formulir.
Dengan mengikuti panduan ini, Anda dapat membuat formulir HTML sederhana dan memproses data formulir yang dikirimkan oleh pengguna ke server.
Penutup
Demikianlah panduan untuk membuat formulir HTML sederhana. Dengan mengikuti langkah-langkah yang dijelaskan di atas, Anda dapat membuat formulir yang dapat digunakan untuk mengumpulkan data dari pengguna dan memprosesnya di sisi server.
Pastikan untuk menguji formulir Anda dengan baik sebelum menggunakannya secara live, dan pastikan juga untuk melindungi data yang dikirimkan oleh pengguna agar tidak disalahgunakan. Semoga panduan ini bermanfaat bagi Anda! - Adi Prayitno