Selamat sore bloger,Kali ini saya akan memberikan contoh source code membuat FORM REGISTRASI dengan HTML 5. Saya disini menggunakan software Notepad++ untuk membuatnya. Jika sudah terinstal silahkan langsung create document baru kemudian save dengan nama terserah anda kemudian akhiri dengan .html dibelakang nama. Oke sekarang step selanjutnya, copy source berikut ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>InfoCompt</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Welcome My Website</h1> </header>
<nav>
<ul>
<li name="mantap">Home</li>
<li name="mantap">Profile</li>
<li name="mantap">Games</li>
<li name="mantap">Information</li>
<ul>
</nav>
<section>
<article>
<header>
<hgroup>
<center><h2><strong>From Registrasi</strong></h2></center> <br />
</hgroup>
</header>
<p>Silahkan isi form dibawah ini agar kami dapat mengetahui data pribadi anda</p>
<table align>
<form action = method =post>
<tr>
<td> Nama </td>
<td> : </td>
<td><input type=text name=”nama”></td>
</tr>
<tr>
<td> Alamat </td>
<td> : </td>
<td><input type=text name=”alamat”></td>
</tr>
<tr>
<td> Tanggal Lahir </td>
<td> : </td>
<td><input type=date name=”ttl”></td>
</tr>
<tr>
<td> Telepon </td>
<td> : </td>
<td><input type=text name=”telp”></td>
</tr>
<tr>
<td> URL </td>
<td> : </td>
<td><input type=url name=”web”></td>
</tr>
<tr>
<td> Email </td>
<td> : </td>
<td><input type=email name=”alamat”></td>
</tr>
<tr>
<td> Kecamatan </td>
<td> : </td>
<td>
<select>
<option value = Pontianak> Pontianak</option>
<option value = Putussibau>Putussibau</option>
<option value = Singkawang>Singkawang </option>
<option value = Sintang>Sintang</option>
<option value = Sanggau>Sanggau</option>
<option value = Mempawah>Mempawah</option>
<option value = Ketapang>Ketapang</option>
<option value = Nangkaan>Sekadau</option>
<option value = Melawi>Melawi</option>
<option value = Bengkayang>Benkayang</option>
</select></td>
</tr>
<tr>
<td>
<input type = submit name=”Kirim” value= Kirim>
<input type = reset name=”Batal” value = Batal>
</td>
</tr>
</form>
</table>
<footer>
<p></p>
<p></p>
<p></p>
<p name="sep">Copyright InfoCompt. 2015</p>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>InfoCompt</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Welcome My Website</h1> </header>
<nav>
<ul>
<li name="mantap">Home</li>
<li name="mantap">Profile</li>
<li name="mantap">Games</li>
<li name="mantap">Information</li>
<ul>
</nav>
<section>
<article>
<header>
<hgroup>
<center><h2><strong>From Registrasi</strong></h2></center> <br />
</hgroup>
</header>
<p>Silahkan isi form dibawah ini agar kami dapat mengetahui data pribadi anda</p>
<table align>
<form action = method =post>
<tr>
<td> Nama </td>
<td> : </td>
<td><input type=text name=”nama”></td>
</tr>
<tr>
<td> Alamat </td>
<td> : </td>
<td><input type=text name=”alamat”></td>
</tr>
<tr>
<td> Tanggal Lahir </td>
<td> : </td>
<td><input type=date name=”ttl”></td>
</tr>
<tr>
<td> Telepon </td>
<td> : </td>
<td><input type=text name=”telp”></td>
</tr>
<tr>
<td> URL </td>
<td> : </td>
<td><input type=url name=”web”></td>
</tr>
<tr>
<td> Email </td>
<td> : </td>
<td><input type=email name=”alamat”></td>
</tr>
<tr>
<td> Kecamatan </td>
<td> : </td>
<td>
<select>
<option value = Pontianak> Pontianak</option>
<option value = Putussibau>Putussibau</option>
<option value = Singkawang>Singkawang </option>
<option value = Sintang>Sintang</option>
<option value = Sanggau>Sanggau</option>
<option value = Mempawah>Mempawah</option>
<option value = Ketapang>Ketapang</option>
<option value = Nangkaan>Sekadau</option>
<option value = Melawi>Melawi</option>
<option value = Bengkayang>Benkayang</option>
</select></td>
</tr>
<tr>
<td>
<input type = submit name=”Kirim” value= Kirim>
<input type = reset name=”Batal” value = Batal>
</td>
</tr>
</form>
</table>
<footer>
<p></p>
<p></p>
<p></p>
<p name="sep">Copyright InfoCompt. 2015</p>
</footer>
</body>
</html>
Nah sekarang buat file lagi kemudian save dengan nama main.css dan copykan script berikut ini :
li[name*="mantap"]{color:green;}
p[name*="sep"] {color:red;}
oke setelah semua selesai, selanjutnya pilih menu RUN di Notepad++ kemudian pilih akan dijalankan di browser mana maka akan muncul tampilan seperti ini :
Sekarang penjelasannya :
<!doctype html> merupakan tag untuk menggunakan HTML 5
<table> untuk membuat sebuah tabel di dokumen HTML
<tr> untuk membuat baris sedangkan <td> untuk kolom
<p> merupakan tag untuk membuat paragraf
<ul> untuk membuat navbar yang kemudian ada <li> untuk dropdownnya
Terima kasih
Dilarang berkomentar kotor,promo link selain link blog
EmoticonEmoticon