Membuat Form Pendaftaran di HTML
Berikut ini adalah tutorial terakhir dari materi dasar html yaitu membuat form pendaftaran di html, dimana pembaca di harapkan melatih cara-cara penulisan tag di html, tutorial ini adalah keseluruhan hasil tutorial yang di rangkum ke dalam satu materi terakhir yaitu membuat formulir pendaftaran dengan menggunakan tag-tag html yang sebelumnya telah di pelajari.
Informasi Tutorial HTML
Di seluruh tutorial html ini telah tersedia video tutorial yang bisa digunakan, dan mohon maaf apabila video belum tercantum di dalamnya dikarenakan sedang dalam proses pembuatan, dan disertakan dengan file demo, file download, serta pdf yang mungkin sekiranya pembaca memerlukannya untuk di baca secara offline.
Source code dibawah ini merupakan hasil rangkuman dari tutorial yang sebelumnya, dan diusahakan untuk seluruh tutorial tidak di copy/paste untuk latihan, tetapi silahkan di ketik secara manual, itu akan membantu anda agar terbiasa dengan penulisan kode program sehingga semakin sering anda berlatih maka secara otomatis anda dapat menghafal dan terbiasa dengan kode-kode tersebut.
Penggunaan Form Pendaftaran di HTML
Seperti namanya, form ini digunakan untuk formulir pendaftaran, anda dapat memodifikasinya sesuai dengan kebutuhan, tetapi ingat bahwa tidak ada proses penyimpanan berjalan didalamnya, ini hanya sebuah interface semata sehingga tidak ada file php untuk proses ke database, form pendaftaran bisa berupa penerimaan siswa baru pada sekolah, atau fomulir pendaftaran aplikasi web dan lain-lain.
Contoh penulisan form pendaftaran di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh form pendaftaran</title>
</head>
<body>
<h1>Pendaftaran</h1>
<hr width="20%" align="left">
<p>Isilah seluruh kolom registrasi dengan <br />sebenar-benarnya.</p>
<table>
<tr>
<td valign="top">Nama</td>
<td><input type="text" name="nama" placeholder="Masukan nama anda"></td>
</tr>
<tr>
<td valign="top">Username</td>
<td><input type="text" name="username" placeholder="Masukan username"></td>
</tr>
<tr>
<td valign="top">Password</td>
<td><input type="password" name="password" placeholder="Password"></td>
</tr>
<tr>
<td valign="top">Email</td>
<td><input type="email" name="email" placeholder="Masukan email"></td>
</tr>
<tr>
<td valign="top">Jenis Kelamin</td>
<td>
<input type="radio" name="l">Pria<br />
<input type="radio" name="p">Perempuan
</td>
</tr>
<tr>
<td valign="top">Tanggal Lahir</td>
<td>
<input type="text" style="width: 25px" placeholder="dd">
<input type="text" style="width: 25px" placeholder="mm">
<input type="text" style="width: 50px" placeholder="yyyy">
</td>
</tr>
<tr>
<td valign="top">Negara</td>
<td><input type="text" name="negara" placeholder="Negara tempat tinggal"></td>
</tr>
<tr>
<td valign="top">Kota</td>
<td>
<select>
<option>Banda Aceh</option>
<option>Denpasar</option>
<option>Serang</option>
<option>Tangerang</option>
<option>Bengkulu</option>
<option>Gorontalo</option>
<option>Jakarta</option>
<option>Sungai Penuh</option>
<option>Jambi</option>
<option>Bandung</option>
<option>Bekasi</option>
<option>Bogor</option>
<option>Cimahi</option>
<option>Cirebon</option>
<option>Depok</option>
<option>Sukabumi</option>
<option>Tasikmalaya</option>
<option>Banjar</option>
<option>Magelang</option>
<option>Pekalongan</option>
<option>Purwokerto</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Biografi</td>
<td><textarea placeholder="isilah biografi singkat anda" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Simpan"></td>
</tr>
</table>
</body>
</html>Code language: HTML, XML (xml)
Baiknya kode diatas di ketika secara manual, ini maksudkan untuk melatih dalam penulisan tag-tag di html, sehingga tidak perlu menghafal seperti menghafal sebuah buku, akan tetapi seluruh kode yang di ketik secara manual akan menjadikan kita terbiasa dan hafal dengan sendirinya seluruh kode html.
5 Komentar