wklgr9lUk77oMk94ROdmPxPMIRP2cfDBiNTDThQf

Followers

Cara Membuat Form Pendaftaran Menggunakan HTML Dengan Mudah

Sudah lama nggak nge-post tentang Design Web :D , pada kali ini saya ingin membahas tentang Cara Membuat Form Pendaftaraan dengan script HTML dengan Mudah. Iya kenapa kata mudah saya pertebal, karena dengan kata itu kita dapat menyelesaikan berbagai pekerjaan kita dengan cepat.

OK, masuk ketopik pembahasan. Berikut adalah Contoh Form Pendaftaran yang saya ambil dari miliknya Facebook.

Form Pendaftaran Dengan HTML


Contoh Form Pendaftaran

Kali ini saya akan membuat form pendaftaraan yang memiliki design yang hampir sama dengan milik FB tetapi dengan versi HTML saya sendiri. Kalian hanya perlu memasukan script dibawah ini :

<html>
<head><title>Form Pendaftaran</title></head>
<body>
<table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">
<tr>
<td>
<b><font color="black" size="10"> Mendaftar </font></b>
<p> Gratis, untuk pelajar </p>
<input type="text" Name="nama" size="20" placeholder="Nama Depan">
<input type="text" Name="nama" size="20" placeholder="Nama Belakang"><br><br>
<input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>
<input type="text" Name="remail" size="46" placeholder="Masukan Ulang Email"><br><br>
<input type="password" Name="sandi" size="46" placeholder="Kata Sandi Baru"><br>
<p><b> Tanggal Lahir </b></p>
<select name="Tanggal">
<option>-Tanggal-</option>
<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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
</select>
<select name="Bulan">
<option>-Bulan-</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<select name="Tahun">
<option>-Tahun-</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select><br><br>
<input type="radio" name="Kelamin" value="L">Laki Laki
<input type="radio" name="Kelamin" value="P">Perempuan
<br><br>
<input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
</td>
</tr>

</body>
</html>


Nah, coba kalian masukkan script diatas ke dalam notepad anda, kemudian save dalam format HTML ( saya menyarankan pakai notepad++ dengan language HTML ) kemudian jalankan di browser kalian, dan apa yang terjadi ?. Berikut Screen Shot hasil dari Form Pendaftaraan yang telah saya buat menggunakan script diatas

Form Pendaftaran Dengan HTML
Form Pendaftaran Yang Sudah Jadi

Yaa, itu lah form pendaftaran dengan menggunakan bahasa HTML, untuk keperluan lain, kalian dapat dengan mudah meng-edit bagian - bagian form tersebut.
Sekian dari saya, apabali ada pertanyaan silakan menulisnya di komentar, Terima Kasih :D
Related Posts
SHARE

Related Posts

Subscribe to get free updates

55 comments

  1. Replies
    1. Iya, sengaja saya mengambil desainnya facebook karena saya seorang facebookers :D tapi untuk script kode nya saya bikin sendiri

      Delete
    2. Mas aku ko gada tulisan namanya sihh padahal udah di koreksi apa yang kurang??

      Delete
    3. mungkin ada bagian yang kelewatan gan, terutama di bagian placeholder nya, placeholder="Nama Depan"

      Delete
    4. Apakah ada tools instan untuk membuat form seperti ini :D

      Delete
  2. Bagus nih gan mau saya pake ah . . Seandainya saya pasang form ini di blog, gimana masukin email penerima pendaftarannya gan? sorry nanya :D

    ReplyDelete
    Replies
    1. Kalo itu main di PHP gan, ini scriptnya masih murni HTML, nanti kalo ane dah mahir Pemrograman Web ane kasih tutornya Lagi :D

      Delete
    2. Waaah siip gan ,,, aq tunggu posting slnjutnya

      Delete
  3. Keren. Trus, kalo ada yg daftar, database nya masuk kemana?

    ReplyDelete
    Replies
    1. Untuk pemrograman databasenya akan saya bahas di lain waktu ya gan :-d

      Delete
    2. jadi script yg diatas cuma jdi pajangan blog dong

      Delete
  4. dan form seperti ini,,
    terkadang banyak disalahgunakan..
    termasuk lah salah satunya

    untuk menipu orang
    wkowk
    ironis :'(


    kunjungannya ya gan :v
    http://caesparta.blogspot.com/2015/01/wujud-asli-hantu-pohon-ketapang.html

    ReplyDelete
  5. Ok.. Mas...
    http://thegreenfairies.blogspot.com

    ReplyDelete
  6. nah, disini saya bingung gan.. hasil daftarnya masuk kemana?

    ReplyDelete
    Replies
    1. Nantinya, isi dari form registrasi tersebut akan di kirim ke sebuah database dimana semua data registrasinya berkumpul. untuk mengirimnya ke database akan saya bahas lain waktu ya gan :-D

      Delete
  7. Wah keren gan,,.
    izin coba ya.. :D (y)

    ReplyDelete
  8. thanx pencerahan nya.. hahah ini yg kami cari buat pemula..

    ReplyDelete
  9. Makasih ya gan langsung di coba ah

    ReplyDelete
  10. wah ini yg dulu ane cari2 :D thanks gan..izin bookmark + coba (y)

    ReplyDelete
  11. bagus gan, namun apa tidak memberatkan pada blog gan yang akibatnya blognya loadingnya lama

    ReplyDelete
  12. nyimak hasilnya dulu aja gan, kalau bagus baru dipakai

    ReplyDelete
  13. thanks
    kunjungi blog ane http://kopidampit.blogspot.com/

    ReplyDelete
  14. Makasih gan infonya mau tanya nih, itu buat blogspot bisa apa gak?
    Trus kalo ada yang registrasi disitu akan di arahkan kemana?

    ReplyDelete
  15. Kalau formulir sudah jadi terus menyimpannya di mana? tolong dong

    ReplyDelete
    Replies
    1. untuk menyimpan data data registrasi nantinya mengarah ke database yang akan saya bahas lain waktu gan =D

      Delete
  16. Terimaksih gan ilmu nya and salam kenal http://tubuhyangsehat.com

    ReplyDelete
  17. Bang Saya kurang ngerti tentang pembuatan FORM ini.
    bang tolong dong buatin formulir nya nanti saya akan bayar berapa saja asal pasti

    ReplyDelete
  18. Cara membuat akun yahoo html gmn gan.. Lagi pusing ni.. Form akun yahoo nya ya gan..
    Tx

    ReplyDelete
  19. bagus sih tapi tidak bisa aktif kalau di posting,tampilan form ada tapi tidak bisa di gunakan
    .bisa kasih tau cara mengaktifkannya gak soalnya saya butuh nih dengan hal positif

    ReplyDelete
  20. Bagus sekali Blognya....
    Ijin Share ya
    Thanks :)

    ReplyDelete
  21. Replies
    1. kalau ada waktu ane akan posting form ini dengan database. Sekarang lagi sibuk juga hehe

      Delete
  22. gan kelajutanya gimana? hasil pendaftaranya msk kmna tuh

    ReplyDelete
  23. Sangat bagus sangat membantu buat tugas kuliah saya


    Mas kalo mislakan make dreamwever8 bisa ?

    ReplyDelete
  24. Otomatis submit ke email kita itu mas?

    ReplyDelete
  25. Terima kasih ilmunya kak. Artikel ini memberi ilmu baru bagi saya.

    ReplyDelete
  26. Nih klo kirimnya di tujuin ke imail gimana yah

    ReplyDelete
  27. Gan apakah sudah ada cara untuk menyambungkan ke database nya ?

    ReplyDelete
  28. stlh mmbca artkl ini ad yang ing sy tnykn ini gan, mengapa dlm scripnya ad penulisan input type="text" Name="remail"? apak mksdnya hrs diisi email kita? trmksh ya mhn informasinya
    Kunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
    Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id

    ReplyDelete
  29. Mas klw tekan kirim itu terkirim kemana ya, soalnya saya mau pake

    ReplyDelete
  30. database nya udah di bikin blm bang .,.,.,

    ReplyDelete

Post a Comment