wklgr9lUk77oMk94ROdmPxPMIRP2cfDBiNTDThQf

Followers

Home  ›  Design Web

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
di Label:
SHARE

Related Posts

Subscribe to get free updates

55 comments

  1. xxxxxJanuary 17, 2015 at 1:08 PM

    mirip form pesbuk yak :D

    ReplyDelete
    Replies
    1. AdiJanuary 17, 2015 at 1:22 PM

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

      Delete
    2. UnknownMarch 20, 2017 at 10:39 PM

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

      Delete
    3. AdiApril 18, 2017 at 12:16 PM

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

      Delete
    4. Wahana Pendidikan lingkungan kitaJuly 14, 2017 at 2:47 AM

      Gan gmana cara dounload hasilnya nanti.

      Delete
    5. UnknownDecember 20, 2017 at 10:11 PM

      Apakah ada tools instan untuk membuat form seperti ini :D

      Delete
  2. Kang RozakJanuary 17, 2015 at 1:15 PM

    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. AdiJanuary 17, 2015 at 1:21 PM

      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. UnknownFebruary 11, 2016 at 11:22 AM

      Waaah siip gan ,,, aq tunggu posting slnjutnya

      Delete
  3. UnknownJanuary 17, 2015 at 2:54 PM

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

    ReplyDelete
    Replies
    1. AdiApril 17, 2016 at 9:32 AM

      Untuk pemrograman databasenya akan saya bahas di lain waktu ya gan :-d

      Delete
    2. Hazira Azza FaroniJuly 8, 2017 at 12:45 PM

      jadi script yg diatas cuma jdi pajangan blog dong

      Delete
  4. A-Man Behind UJanuary 17, 2015 at 4:35 PM

    amazing

    ReplyDelete
  5. Caesar RendraJanuary 17, 2015 at 5:27 PM

    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
  6. AnonymousJanuary 17, 2015 at 11:27 PM

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

    ReplyDelete
  7. UnknownMay 11, 2015 at 10:21 PM

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

    ReplyDelete
    Replies
    1. AdiApril 17, 2016 at 9:34 AM

      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
  8. FudinAugust 6, 2015 at 2:31 PM

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

    ReplyDelete
  9. poker onlineAugust 7, 2015 at 6:19 PM

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

    ReplyDelete
  10. hauzanAugust 8, 2015 at 9:35 PM

    Makasih ya gan langsung di coba ah

    ReplyDelete
  11. ErenkaAugust 10, 2015 at 1:34 PM

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

    ReplyDelete
  12. FladyAugust 11, 2015 at 1:37 PM

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

    ReplyDelete
  13. PerilAugust 11, 2015 at 1:38 PM

    nyimak hasilnya dulu aja gan, kalau bagus baru dipakai

    ReplyDelete
  14. AnonymousAugust 11, 2015 at 1:40 PM

    test dulu ya , :D . . . .

    ReplyDelete
  15. html5August 16, 2015 at 8:07 AM

    Berbagi hasil pekerjaan tugas --> CARA MEMBUAT FORM HTML5 SEDERHANA

    ReplyDelete
  16. PratamaOctober 4, 2015 at 6:58 PM

    Thanks gan, sangat membantu

    ReplyDelete
  17. Robusta dampitOctober 17, 2015 at 8:22 PM

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

    ReplyDelete
  18. Darmudi SusantoOctober 28, 2015 at 3:26 PM

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

    ReplyDelete
  19. UnknownJanuary 7, 2016 at 4:38 PM

    Kalau formulir sudah jadi terus menyimpannya di mana? tolong dong

    ReplyDelete
    Replies
    1. AdiApril 17, 2016 at 9:35 AM

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

      Delete
  20. metajava.comFebruary 2, 2016 at 9:29 AM

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

    ReplyDelete
  21. UnknownFebruary 20, 2016 at 11:26 AM

    cara memasukan ke blog gimana

    ReplyDelete
  22. TOPUP ALL GAMEMarch 18, 2016 at 1:11 PM

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

    ReplyDelete
  23. AnsisitiiApril 15, 2016 at 10:47 AM

    seep gan Kumpulan Prosedur dan surat

    ReplyDelete
  24. Briella Lovely GintingMay 8, 2016 at 3:40 AM

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

    ReplyDelete
  25. UnknownAugust 14, 2016 at 9:30 PM

    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
  26. AnonymousMarch 2, 2017 at 10:18 PM

    Keren

    ReplyDelete
  27. RamadhanApril 20, 2017 at 8:27 AM

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

    ReplyDelete
  28. Ikheria - Our Better Future - WorldbulidingJuly 10, 2017 at 12:26 PM

    Bang, Buatkan Form Kerberhasilan Pendaftaran

    ReplyDelete
    Replies
    1. AdiJuly 15, 2017 at 9:32 PM

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

      Delete
  29. UpdateOfficialSeptember 21, 2017 at 10:29 AM

    Membuat Database nya gmna ya gan

    ReplyDelete
  30. admin paytrenSeptember 28, 2017 at 9:02 AM

    gan kelajutanya gimana? hasil pendaftaranya msk kmna tuh

    ReplyDelete
  31. UnknownOctober 9, 2017 at 7:25 PM

    Sangat bagus sangat membantu buat tugas kuliah saya


    Mas kalo mislakan make dreamwever8 bisa ?

    ReplyDelete
  32. AnonymousNovember 26, 2017 at 12:15 AM

    Otomatis submit ke email kita itu mas?

    ReplyDelete
  33. AnonymousNovember 29, 2017 at 3:16 PM

    informasi yang bermanfaat min...
    http://cody.id/produk/blower-infrared/infrared-rework-station-cody-862d/

    ReplyDelete
  34. bit2December 14, 2017 at 2:17 PM

    ok

    ReplyDelete
  35. UnknownJanuary 13, 2018 at 11:46 PM

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

    ReplyDelete
  36. Suparyo PAYTRENFebruary 18, 2018 at 7:40 AM

    Nih klo kirimnya di tujuin ke imail gimana yah

    ReplyDelete
  37. RizalMay 7, 2018 at 6:50 PM

    Gan apakah sudah ada cara untuk menyambungkan ke database nya ?

    ReplyDelete
  38. UnknownSeptember 12, 2018 at 6:39 PM

    Ngga ada css nya tah gan

    ReplyDelete
  39. UnknownOctober 11, 2018 at 1:21 PM

    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
  40. AdminDecember 1, 2018 at 3:06 PM

    Thanks. Terbarunya ada di Cara membuat form html sederhana

    ReplyDelete
  41. petis indonesiaDecember 16, 2018 at 10:50 AM

    Thanks ini membantu gan

    ReplyDelete
  42. haidirJanuary 30, 2019 at 7:50 PM

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

    ReplyDelete
  43. Rembo syaputraMarch 9, 2019 at 12:26 AM

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

    ReplyDelete

Post a Comment