Cara Membuat Formulir dengan HTML

Sabtu, 11 Mei 2024

Halo gaes! Pada zaman teknologi modern seperti saat ini, pembuatan formulir dengan HTML menjadi hal yang sangat penting. Formulir dapat digunakan untuk berbagai keperluan, mulai dari pendaftaran, survei, hingga pengumpulan data. Dalam artikel ini, kita akan belajar bagaimana cara membuat formulir dengan HTML secara sederhana dan mudah dipahami. Yuk simak tutorial berikut!

Langkah 1: Persiapan Dokumen HTML

Langkah pertama dalam membuat formulir dengan HTML adalah dengan menyiapkan dokumen HTML. Kita bisa menggunakan text editor seperti Sublime Text, Visual Studio Code, atau Notepad++ untuk menuliskan kode-kode HTML. Berikut adalah contoh kode untuk persiapan dokumen HTML:


 <!DOCTYPE html>
 <html>
 <head>
 <title>Contoh Formulir</title>
 </head>
 <body>
 <h2>Formulir Pendaftaran</h2>
 <form action=proses.php method=post>
 <label for=nama>Nama:
 <input type=text id=nama name=nama><br>
 </label>
 <label for=email>Email:
 <input type=email id=email name=email><br>
 </label>
 <input type=submit value=Daftar>
 </form>
 </body>
 </html>

Pastikan kita sudah menuliskan kode dasar HTML seperti di atas sebelum melanjutkan ke langkah selanjutnya.

Langkah 2: Menambahkan Elemen Formulir

Setelah menyiapkan dokumen HTML, langkah berikutnya adalah menambahkan elemen-elemen formulir. Elemen-elemen formulir tersebut antara lain input, label, select, textarea, dan lain sebagainya. Berikut adalah contoh kode untuk menambahkan beberapa elemen formulir:


 <form action=proses.php method=post>
 <label for=nama>Nama:
 <input type=text id=nama name=nama><br>
 </label>
 <label for=email>Email:
 <input type=email id=email name=email><br>
 </label>
 <label for=jenis-kelamin>Jenis Kelamin:
 <input type=radio id=laki-laki name=jenis-kelamin value=laki-laki><label for=laki-laki>Laki-laki</label>
 <input type=radio id=perempuan name=jenis-kelamin value=perempuan><label for=perempuan>Perempuan</label><br>
 </label>
 <label for=alamat>Alamat:
 <textarea id=alamat name=alamat></textarea><br>
 </label>
 <input type=submit value=Daftar>
 </form>

Dalam contoh di atas, kita menambahkan input teks untuk nama dan email, input radio untuk jenis kelamin, textarea untuk alamat, dan tombol submit untuk mengirim data formulir.

Langkah 3: Mendesain Formulir

Setelah menambahkan elemen-elemen formulir, langkah selanjutnya adalah mendesain formulir agar tampil menarik dan mudah dipahami oleh pengguna. Kita dapat menggunakan CSS untuk mendesain formulir sesuai dengan keinginan. Berikut adalah contoh kode CSS untuk mendesain formulir:


 form {
 background-color: #f4f4f4;
 padding: 20px;
 border-radius: 5px;
 width: 300px;
 margin: 0 auto;
 }
 
 input[type=text],
 input[type=email],
 textarea {
 width: 100%;
 padding: 10px;
 margin: 5px 0;
 border: 1px solid #ccc;
 border-radius: 5px;
 }
 
 input[type=radio] {
 margin-right: 10px;
 }
 
 input[type=submit] {
 background-color: #4caf50;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 }

Pastikan kita menuliskan kode CSS di atas di dalam tag <style> di dokumen HTML kita. Dengan mendesain formulir, diharapkan pengguna akan merasa nyaman dalam mengisi formulir yang telah kita buat.

Langkah 4: Validasi Formulir

Terakhir, kita perlu melakukan validasi formulir agar data yang dikirimkan pengguna sesuai dengan yang diinginkan. Kita dapat menggunakan JavaScript untuk melakukan validasi formulir. Berikut adalah contoh kode JavaScript untuk melakukan validasi formulir:


 function validateForm() {
 var nama = document.forms[myForm][nama].value;
 var email = document.forms[myForm][email].value;
 if (nama == || email == ) {
 alert(Nama dan email tidak boleh kosong!);
 return false;
 }
 }

Pada contoh di atas, kita membuat fungsi validateForm() untuk memeriksa apakah input nama dan email sudah diisi atau tidak. Jika belum, maka akan muncul pesan peringatan dan pengguna tidak dapat mengirimkan formulir.

Nah, itulah empat langkah sederhana dalam membuat formulir dengan HTML. Dengan mengikuti tutorial di atas, diharapkan kita dapat membuat formulir dengan mudah dan sesuai dengan kebutuhan. Jangan lupa untuk selalu berkreasi dalam mendesain formulir agar dapat menarik perhatian pengguna. Selamat mencoba!

#HTMLForm
#FormulirHTML
#CaraMembuatForm
#HTMLCoding
#TutorialHTML