…………………..

Salam Sejahtera untuk semua….

Kalin ini saya akan berikan contoh untuk membuat tampilan form registrasi dengan menggunakan bahasa HTML5.
Tidak panjang2 lagi, langsung saja berikut tampilan dan source code nya.

HTML

Tampilan Form Pendaftaran

Berikut Source Code nya :

<!DOCTYPE html> <!--menunjukkkan HTML versi 5-->
<html> <!--Tag <html> memberitahu browser bahwa ini adalah dokumen HTML.
Tag <html> merupakan akar dari sebuah dokumen HTML.
Tag <html> merupakan wadah bagi semua elemen HTML lain (kecuali untuk <! DOCTYPE> tag).-->

<head> <!--Tanda <head> merupakan wadah untuk semua elemen kepala-->
<title>Form Registrasi Pembuatan SIM</title> <!--membuat judul halaman web-->
</head>

<body background = "2.jpg"> <!-- memberikan background halaman dgn nama 1.png --> <!--Tanda <body> mendefinisikan tubuh dokumen-->
<p> <!--Tanda <p> menunjukkkan baris untuk membuat paragraf-->
<img align = "left" src="E.gif" alt="E.gif" width="120" height="150"></p> <!--memberikan gambar animasi bergerak dgn lebar 120 & tinggi 150-->

<p>
<img align = "right" src="Yes.gif" alt="Yes.gif" width="120" height="120"></p> <!--memberikan gambar animasi bergerak dgn lebar 120 & tinggi 120-->

<h1 align = "center"> <font color = "red">Pendaftaran Pembuatan SIM</h1> <!--memberikan tulisan bertype heading 1 dgn warna merah dan rata tengah-->

<form method = ""get> <!--Tanda <form> digunakan untuk membuat bentuk HTML dari input pengguna-->
<table bgcolor = "white" border="1" align = "center"> <!--membuat tabel dgn warna putih dan rata tengah-->
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td>Nama</td> <!--Baris tabel Nama-->
<td>:</td> <!--Tag <td> mendefinisikan sel standar dalam tabel HTML.-->
<td><input type = "text" name = "name" size="50" autofocus required placeholder = "Ketikan Nama Anda"></td>
<!--membuat Textfield nama bertype teks dgn ukuran 50 dan diberikan keterangan yg samar-->
</tr>

<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td>Alamat</td> <!--Baris tabel alamat-->
<td>:</td>
<td><input type = "text" name = "Alamat" size="50" autofocus required placeholder = "Ketikan Alamat Anda"></td>
<!--membuat Textfield alamat bertype teks dgn ukuran 50 dan diberikan keterangan yg samar-->
</tr>

<tr>
<td>Jenis Kelamin</td> <!--Baris tabel Jenis Kelamin-->
<td>:</td> <!--Tag <td> mendefinisikan sel standar dalam tabel HTML.-->
<td>
<input type = "radio" name = "gender" value="Cowok">Laki-Laki<br/> <!--Tanda <br> menyisipkan baris berhenti tunggal-->
<input type = "radio" name = "gender" value="Cewek">Perempuan <!--menginputkan pilihan jenis kelamin bertype radio button-->
</td>
</tr>

<tr>
<td>Tanggal Lahir</td> <!--Baris tabel Tanggal Lahir-->
<td>:</td>
<td><input type = "date" name = "date" ></td> <!--membuat Texfield untuk inputkan Tanggal Lahir bertype date-->

</tr>

<tr>
<td>Nomor Handphone</td> <!--Baris tabel nomor Handphone-->
<td>:</td>
<td><input type = "number" name = "number" size="50" autofocus required placeholder = "08xxxxxxxxx"></td>
<!--membuat Texfield untuk inputkan nomer HP dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Alamat Web</td> <!--Baris tabel alamat web-->
<td>:</td>
<td><input type = "URL" name = "URL" size="50" autofocus required placeholder = "http://www.contoh.com"></td>
<!--membuat Texfield untuk inputkan alamat web bertype URL dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Email</td> <!--Baris tabel Email-->
<td>:</td>
<td><input type = "email" name = "email" size="50" autofocus required placeholder = "sdj@contoh.com"></td>
<!--membuat Texfield untuk inputkan alamat email bertype email dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Kecamatan</td> <!--Tanda <td> mendefinisikan sel standar dalam tabel HTML.--> <!--Baris tabel Kecamatan-->
<td>:</td>
<td>
<select name = "Kecamatan"> <!-- membuat daftar kecamatan dengan banyak pilihan-->
<option value="null">--- Pilih Kecamatan ---</option> <!--nilai dari pilihan-->
<option value="Jenggawah">Jenggawah</option> <!--nilai dari pilihan-->
<option value="Sumber Sari">Sumber Sari</option> <!--nilai dari pilihan-->
<option value="Balung">Balung</option>
<option value="Mangli">Mangli</option>
<option value="Bondowoso">Bondowoso</option>
<option value="Maesan">Maesan</option>
<option value="Arjasa">Arjasa</option>
<option value="Wringin">Wringin</option>
<option value="Jatiroto">Jatiroto</option>
</select>
</td> <!--Tanda <td> mendefinisikan sel standar dalam tabel HTML.-->
</tr>
<tr>
<td colspan = "3" align = "center"> <input type = "Submit" value = "Submit"> </td> <!--memberikan tombol submit untuk menyimpan data dalam tabel-->
<!--colspan artinya mengelompokkan kolom-->
</tr>
</table>
</form> <!--Tag <form> digunakan untuk membuat bentuk HTML dari input pengguna-->

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Broken Hands.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Lamb of God.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Hourglass.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Black Label.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<video width="420" height="360" controls> <!--memberikan tempat untuk memainkan video dengan resolusi 640x420-->
<source src="Walk With Me In Hell.mp4" type="video/mp4">
Browser anda tidak mendukung elemen video <!--Pemberitahuan kesalahan-->
</video>

</body>

<footer align = "center"> <font color = "white">Terimakasih Sudah Mampir ke Halaman Ini
</footer> <!--Meberikan footer atau halaman bawah dgn warna putih rata tengah-->

</html>

 

    .........................

 Demikian tutorial membuat form registrasi dengan menggunakan bahasa HTML5.
Semoga bermanfaat. Terimakasih.