Home / HTML / Membuat Form Pendaftaran menggunakan HTML

Membuat Form Pendaftaran menggunakan HTML

Ok sob langsung aja,pada postingan kali ini admin akan mencoba untuk memposting bagaimana cara membuat form pendaftaran menggunakan HTML. Kita ambil studi kasus pembuatan form pendaftaran pembuatan e-KTP. Untuk tampilannya sobat bisa lihat gambar dibawah ini :


Untuk source codenya adalah sebagai berikut :

<html>
<head>
<title>FORMULIR PENDAFTARAN E-KTP</title>
<h1><center>FORM PENDAFTARAN E-KTP</cemter></h1>
</head>
<body>
<form action=" formulir.html" method="get">
<table>
<tr>
<td>No. Pendaftaran</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varNodaftar" SIZE="30"></td>
</tr>
<tr>
<td>Nama</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varNama" SIZE="30"></td>
</tr>
<tr>
<td>Tempat, Tanggal lahir</td><td>:</td>
<ul>
<td>Tempat<INPUT TYPE="Text" NAME="varTempat" SIZE="10"></td>
<td>Tanggal<INPUT TYPE="Text" NAME="varTanggal" SIZE="10"></td>
<td>Bulan<INPUT TYPE="Text" NAME="varBulan" SIZE="10"></td>
<td>Tahun</td>
<td><SELECT NAME="tahun" SIZE="1">
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
</ul>
</select> </td>
</tr>
<tr>
<td>Pekerjaan</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varPekerjaan" SIZE="30"></td>
</tr>
<tr>
<td>Status Pernikahan</td><td>:</td>
<td>
<INPUT TYPE="Checkbox" NAME="Status" VALUE="Menikah">Menikah
<INPUT TYPE="Checkbox" NAME="Hobi" VALUE="BelumMenikah">Belum Menikah
<INPUT TYPE="Checkbox" NAME="Status" VALUE="Janda">Janda
<INPUT TYPE="Checkbox" NAME="Status" VALUE="Duda">Duda
</td>
</tr>
<tr>
<td>Alamat</td><td>:</td>
<td><textarea Cols="30" Rows="5" Name="Alamat"></textarea></td>
</tr>
<tr>
<td>Agama</td><td>:</td>
<td><SELECT NAME="agama" SIZE="1">
<option>Islam</option>
<option>Kristen</option>
<option>katolik</option>
<option>Budha</option>
<option>Hindu</option>
</select> </td>
</tr>
<tr>
<td>Rt / Rw</td><td>:</td>
<td>Rt<INPUT TYPE="Text" NAME="varRT" SIZE="10"></td>
<td>Rw<INPUT TYPE="Text" NAME="varRW" SIZE="10"></td>
</tr>
<tr>
<td>Kelurahan</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varKelurahan" SIZE="30"></td>
</tr>
<tr>
<td>Kecamatan</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varKecamatan" SIZE="30"></td>
</tr>
<tr>
<td>Kabupaten</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varKabupaten" SIZE="30"></td>
</tr>
<tr>
<td>Provinsi</td><td>:</td>
<td><INPUT TYPE="Text" NAME="varProvinsi" SIZE="30"></td>
</tr>
<tr>
<td>Jenis kelamin</td><td>:</td>
<td><INPUT TYPE="Radio" NAME="Kelamin" VALUE="Pria">Pria</td>
<td><INPUT TYPE="Radio" NAME="Kelamin" VALUE="Wanita">Wanita</td>
</tr>
<tr>
<td>Tanggal Pendaftaran</td><td>:</td>
<ul>
<td>Tanggal<INPUT TYPE="Text" NAME="varTanggal" SIZE="10"></td>
<td>Bulan<INPUT TYPE="Text" NAME="varBulan" SIZE="10"></td>
</ul>
</tr>
</table>
<br>
<br>
<br>
<form method="get" action="POST"title="Daftar"target="_blank"><input name="Button" type="submit" value="Daftar" /><form method="get" action="POST"title="Cancel"target="_blank"><input name="Button" type="submit" value="Cancel" /></form>

 </FORM>
</body>
</html>

 Karena di blog ini tidak bisa copy paste,silahkan sobat download source codenya di link berikut :


Setelah filenya sobat download,setelah itu buka dengan notepad++ atau gunakan tools text editor lainnya, lalu modifikasi scriptnya sesuai keinginan sobat.
Semoga postingan kali ini bermanfaat untuk kita semua.
Salam Berbagi
Membuat Form Pendaftaran menggunakan HTML Membuat Form Pendaftaran menggunakan HTML Reviewed by Wahyumiftahulhuda on April 10, 2014 Rating: 5

You May Also Like

10 komentar:

  1. Ibnu Yahya3 April 2015 pukul 09.53

    Gan ko link downloadnya ga ada???

    BalasHapus
  2. Unknown19 April 2015 pukul 22.32

    cara melihat hasil pendaftaran ny gimana gan

    BalasHapus
  3. Unknown12 Mei 2015 pukul 00.59

    mohon di upload ulang gan link rusak

    BalasHapus
  4. Gaexe15 Agustus 2015 pukul 18.08

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

    BalasHapus
  5. Gaexe15 Agustus 2015 pukul 18.17

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

    BalasHapus
  6. Unknown7 Januari 2016 pukul 01.43

    setelag form di buat lalu untuk store/penyimpanannya bagaima?

    BalasHapus
  7. Unknown7 Januari 2016 pukul 01.44

    setelag form di buat lalu untuk store/penyimpanannya bagaima?

    BalasHapus
  8. Elmus11 April 2016 pukul 00.33

    berarrti anda pelit dengan ilmunya

    BalasHapus
  9. Unknown26 Maret 2020 pukul 08.30

    hallo kak..
    thanks ya artikelnya sgt membantu saya dlm mempelajari pembuatan form pda html.. sukses slalu dan terus berkarya kak.. btw, nama saya meren, mahasiswi dari STMIK Atma Luhur pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  10. Unknown26 Maret 2020 pukul 08.39

    Selamat malam kak,terimakasih atas ilmu nya sangat mudah di pahami dan di mengerti,semoga bisa membagikan ilmu lain nya tetap semangat dan sukses selalu,perkenalkan nama saya JEFFRY H SUFRYANTO SIMARMATA,nim 1922500047,kelompok si2j dan link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.