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

10 komentar:

  1. Gan ko link downloadnya ga ada???

    BalasHapus
  2. cara melihat hasil pendaftaran ny gimana gan

    BalasHapus
  3. mohon di upload ulang gan link rusak

    BalasHapus
  4. setelag form di buat lalu untuk store/penyimpanannya bagaima?

    BalasHapus
  5. setelag form di buat lalu untuk store/penyimpanannya bagaima?

    BalasHapus
  6. berarrti anda pelit dengan ilmunya

    BalasHapus
  7. 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
  8. 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

Diberdayakan oleh Blogger.