> Buka Notepad,Notepad++,atau Dreamweaver
> Ketik code tag Berikut .
<html>
<head>
<title>Form Pendaftaran</title>
<style>
legend {
background-color:orange;
padding:5px 15px;
color:white;
font-family:Product Sans;
}
.boxwidth {
width:500px;
height:auto;
border: 1px solid orange;
background-color:#EAEBE9;
}
td {
width:auto;
font-family:Product Sans;
color:#000;
}
select {
width:173px;
height:auto;
}
.buttonclass {
background-color:orange;
color:#FFF;
font-family:Product Sans;
border-color:orange;
}
.tfcol {
border-color:orange;
}
</style>
</head>
<body>
</body>
<fieldset class="boxwidth">
<legend>Pekerjaan</legend>
<table border="0">
<tr>
<td height="20px" align="right">Nama</td>
<td>:</td>
<td><input class="tfcol" type="text" name="Ngaran" placeholder="Masukan Nama Anda"></td>
</tr>
<tr height="15px">
<td colspan="3"</td>
</tr>
<tr>
<td align="right">KTP</td>
<td>:</td>
<td><input class="tfcol" type="text" name="Nomor KTP" placeholder="Masukan Nomor KTP" align="left"></td>
</tr>
<tr height="15px">
<td colspan="3"</td>
</tr>
<tr>
<td align="right">Jenis Kelamin</td>
<td>:</td>
<td><select class="tfcol">
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select></td>
<tr height="15px">
<td colspan="3"</td>
</tr>
<tr>
<td align="right">TTL</td>
<td>:</td>
<td><input class="tfcol" type="text" name="Tempat_Lahir" placeholder="Tempat Lahir"> <input class="tfcol" type="date"></td>
</tr>
<tr height="15px">
<td colspan="3"</td>
</tr>
<tr>
<td align="right">Agama</td>
<td>:</td>
<td><select class="tfcol">
<option value="Islam">Islam</option>
<option value="KristenP">Kristen Protestan</option>
<option value="KristenK">Kristen Katholik</option>
<option value="Budha">Budha</option>
<option value="Hindu">Hindu</option>
</select></td>
</tr>
<tr height="15px">
<td colspan="3"</td>
</tr>
<tr>
<td align="right">Status</td>
<td>:</td>
<td><select class="tfcol">
<option value="Kawin">Kawin</option>
<option value="Cerai">Cerai</option>
<option value="Janda/Duda">Janda/Duda</option>
<option value="Jomblo">Jomblo</option>
</select></td>
</tr>
</table>
<br>
<input class="buttonclass" type="button" value="Browse"> <input class="buttonclass" type="submit" name="submit" value="Daftarkan">
</fieldset>
</body>
</html>
> Dan berikut code tag Pendaftaran
> Ketik code tag berikut.
<html>
<head>
<title>Pendaftaran</title>
<style>
h1 {
font-family:Product Sans;
}
.background {
width:600px;
height:auto;
background-color:#F4F4F4;
padding:5px;
font-family:Product Sans;
}
.typetext {
width:250px;
height:40px;
}
.textemail {
width:300px;
height:40px;
}
.selectmail {
width:200px;
height:40px;
}
.katasandi {
width:505px;
height:40px;
}
.notel {
width:50px;
height:40px;
}
.nopons {
width:450px;
height:40px;
}
.buttoncolor {
width:120px;
height:50px;
background-color:#03F;
font-family:Product Sans;
color:#FFF;
font-size:24px;
border:#03F
}
a {
color:#03F;
}
.ttl {
width:505px;
height:40px;
}
</style>
</head>
<body>
<div class="background">
<h1>Daftar</h1>
<input class="typetext" type="text" placeholder="Nama Depan"> <input class="typetext" type="text" placeholder="Nama Belakang"><br>
<br>
<input class="textemail" type="text" placeholder="Nama penguna Yahoo"> <select class="selectmail"><option value="Yahoo.co.id">@yahoo.co.id</option><option value="Yahoo.com">@yahoo.com</option></select>
<br><br>
<input class="katasandi" type="password" placeholder="Kata Sandi Tampilkan">
<br><br>
<select class="notel"> <option value="ID">+62</option><option value="Other">+??</option></select> <input class="nopons" type="text" placeholder="Nomor Ponsel">
<br><br>
<input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki <input type="radio" name="jenkel" value="Perempuan">Perempuan
<br><br>
<input class="ttl" type="date" name="TTL" placeholder="Tanggal Lahir">
<br><br>
<select class="notel"> <option value="ID">+62</option><option value="Other">+??</option></select> <input class="nopons" type="text" placeholder="Nomor Pemulihan Opsional">
<br><br>
<input type="checkbox" name="setuju" value="setuju">Saya menyetujui <a href="#">ketentuan Yahoo</a> dan <a href="#">Privasi</a>
<br><br>
<input type="button" class="buttoncolor" value="Buat Akun">
</div>
</body>
</html>
Untuk belajar lebih lanjut silahkan Download file disini
Tidak ada komentar:
Posting Komentar