Cara Membuat Form Pendaftaran Dengan HTML
Form pendaftaran adalah salah satu fitur wajib yang harus dimiliki oleh website koneksi, maksudnya yaitu website yang mengijinkan user untuk mengedit sebagian berkas di website kita, maka dari itu kita perlu mengetahui cara membuat suatu form pendaftaran dengan HTML. dengan adanya form pendaftaran, maka kita dapat mengumpulkan identitas user yang akan kita gunakan untuk pengembangan website.
Membuat Form Pendaftaran Dengan HTML
Form pendaftaran yang akan kita buat disini sangat sederhana, Hanya kerangka saja, Tanpa layout CSS ataupun JavaScript. hal ini ditujukan agar kamu dapat dengan mudah memahami pembuatan form secara sederhana, setelah itu kamu dapat mengembangkannya sendiri.
Untuk membuat form pendaftaran dengan HTML, ada beberapa hal yang perlu kamu siapkan. berikut ini, hal-hal yang kamu perlukan :
- Siapkan aplikasi pembantu seperti notepad (atau notepad++)
- browser (seperti google chrome, atau opra mini ataupun mozila)
- Leptop
- Kopi, biar lebih santai
Untuk membuat form kamu membutuhkan kode tag <form>, sebelumnya pernah kita bahas di tutorial berikut :
Sekarang kita langsung saja ke kode pendaftaran HTML sederhana, agar mudah kamu pahami, silahkan ketikan kode berikut ini pada file notepad :
<html> <head> <title>ini merupakan judul</title> </head> <body> <center><h6>terimakasih telah berkunjung ke ariprayogiputra.blogspot.co.id</h6></center> <center><h3>Silahkan Daftar</h3></center><br/> <form method="POST" action="proses.php"> <table> <tr><td>Nama lengkap : </td> <td><input type="text" name="nama"></td></tr> <tr><td>Jenis Kelamin : </td><td><input type="radio" name="jenis_kelamin" value="laki-laki"/>laki-laki</td></tr> <tr><td></td><td><input type="radio" name="jenis_kelamin" value="perempuan">perempuan</td></tr> <tr><td>tanggal lahir:</td> <td> <select> <option value="2016">2016</option> <option value="2015">2015</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> </select> / <select> <option value="januari">januari</option> <option value="februari">februari</option> <option value="maret">maret</option> <option value="april">april</option> <option value="mei">mei</option> <option value="juni">juni</option> <option value="juli">juli</option> <option value="agustus">agustus</option> <option value="september">september</option> <option value="oktober">oktober</option> <option value="november">november</option> <option value="desember">desember</option> </select> / <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </td> </tr> <tr><td>alamat :</td><td><textarea cols="30" rows="4" name="alamat"></textarea></td></tr> <tr><td></td><td><input type="submit"></td></tr> </table> </form> </body> </html>
Setelah itu simpan kode diatas dengan nama belajar.html, Buka dengan aplikasi browser yang kamu pakai. hasilnya kurang lebih akan tampak seperti gambar berikut ini :
Penjelasan sedikit Tag html diatas:
Pada Form diatas, kita membuat form pendaftaran dengan data nama lengkap, jenis kelamin, tanggal lahir, dan alamat. itu adalah gambaran sederhana pendaftaran identitas, namun kamu juga bisa menambahkan input data lain seperti email dan password, tergantung kebutuhan. penulisan input dengan tipe password, kita hanya perlu mengubah <input type=”text”> menjadi <input type=”password”>.
Pada kode diatas, kita juga menambahkan tag table agar tulisan lebih rapih dilihat, yang terdiri dari dua kolom dan 5 baris, namun garis border pada tabel kita beri nilai nol agar tidak terlihat.
penjelasan kode input :
- <input type=”text”> digunakan untuk memasukan data pendek seperti nama, user name, email dan sebagainya.
- <input type=”radio”> digunakan untuk pilihan data yang sedikit, seperti apakah kamu laki-laki ataukah perempuan.
- <select> yaitu kode tag yang digunakan untuk menampilkan pilihan data yang lebih banyak namun ditampilkan dalam satu wadah.
- <textarea> digunakan untuk menampilkan text yang lebih panjang seperti membuat biodata, ataupun cerita hidup, pengalaman kerja, dan sebagainya.
- <input type=”submit”> tombol untuk memproses data, nanti akan diarahkan pada file proses.php (perhatikan kode <form method=”POST” action=”proses.php”>), jika kamu klik tombolnya maka akan terjadi halaman tidak ditemukan, hal ini karena kita belum membuat file proses.php nya.
