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

Muthiullah Hib

Muthiullah Hib

Keren tutorialnya Min, kalo boleh mau nanya nih min saya coba bikin input radio kaya gini Jenis Kelamin: Laki-laki Perempuan hasilnya berjajar ke bawah, biar bisa berjajar ke samping gimana mas? Terima kasih
Bahasaweb.com

Bahasaweb.com

@Muthiullah Hib
harusnya sih bisa kesamping yah secara otomatis, sudah cek resolusi? atau bisa ditambahkan css display: inline pada input radionya.
Balas #19
Aku hacker

Aku hacker

gimana cara ngirim hasil pendaftarannya gan, setelah di submit?
Balas #246
Aris Munandar, S.Kom.

Aris Munandar, S.Kom.

@Aku hacker
Bisa pakai php mail. Kebetulan di Bahasaweb.com belum ada tutorial cara kirim email dengan php. Mungkin secepatnya akan admin buatkan tutorial tersebut. Untuk lebih mudahnya lagi pakai PHP Mailer.
Balas #247
SUDUT DESA

SUDUT DESA

Keren min sangat bermanfaat salam kenal dari admin www.sudutdeda.club
Balas #1893
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.