Cara membuat Form dan Table dengan HTML
Selamat pagi sahabat blogger, :) Semangat hari ini masih bisa beraktivitas. Hari ini Saya akan berikan sedikit pemahaman kode pada HTML5 untuk membuat Form dan Tabel. Silahkan di cek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Latihan 1 - Sokhi Registration</title>
<style type="text/css">
form {
-moz-box-shadow: 0px 0px 8px #dcdcddc;
-webkit-box-shadow: 0px 0px 8px #dcdcddc;
box-shadow: 0px 0px 8px #dcdcddc;
border: 1px gray solid;
padding: 5px;
display: block;
}
h9 {
font-size: 20pt;
color: green;
margin: 0px;
border-bottom: 2px gray solid;
padding: 5px;
margin-bottom: 5px;
display: block;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" bgcolor="yellow">
<tr><td colspan="2"><h4><center>Tambah Pejabat</center></h4></td></tr>
<tr><td>
<table border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="gray solid"><th>No</th><th>Tahun</th><th>Nama Periode</th></tr>
<tr><td>1</td><td>2013</td><td>Periode Hamim 2</td></tr>
<tr><td>2</td><td>2014</td><td>Hamim 3</td></tr>
<tr><td>3</td><td>2014</td><td>Hamim 3</td></tr>
</table>
</td><td>
<table>
<form action="#" method="post">
<tr><td>Periode Jabatan</td>
<td><select name="periode jabatan">
<option value="0">-Pilih Periode-</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select></td></tr>
<tr><td>Jabatan</td>
<td><select name="jabatan">
<option value="0">-Pilih Jabatan-</option>
<option value="Directure">Directure</option>
<option value="Manager">Manager</option>
<option value="Staff">Staff</option>
<option value="Office Boy">Office Boy</option>
</select></td></tr>
<tr><td>Nama Pejabat</td>
<td><input type="text" name="nama pejabat" /></td><br/>
<tr><td>Unit Kerja</td>
<td><select name="unit kerja">
<option value="0">-Pilih Fakultas-</option>
<option value="Teknik">Teknik</option>
<option value="Hukum">Hukum</option>
<option value="Ekonomi">Ekonomi</option>
<option value="FKIP">FKIP</option>
</select></td></tr>
<tr><td>Unit Kerja</td>
<td><select name="unit prodi">
<option value="0">-Pilih Prodi-</option>
<option value="Informatika">Informatika</option>
<option value="Perminyakan">Perminyakan</option>
</select></td></tr>
<tr><td>
</td>
<td><input type="submit" value="Simpan" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
<input type="button" value="Kembali" name="button" />
</td></tr>
</table>
</table>
</form>
</body>
</html>
demikianlah kode pada HTML5 silahkan di coba dan semoga berhasil
*Notepad++
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Latihan 1 - Sokhi Registration</title>
<style type="text/css">
form {
-moz-box-shadow: 0px 0px 8px #dcdcddc;
-webkit-box-shadow: 0px 0px 8px #dcdcddc;
box-shadow: 0px 0px 8px #dcdcddc;
border: 1px gray solid;
padding: 5px;
display: block;
}
h9 {
font-size: 20pt;
color: green;
margin: 0px;
border-bottom: 2px gray solid;
padding: 5px;
margin-bottom: 5px;
display: block;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" bgcolor="yellow">
<tr><td colspan="2"><h4><center>Tambah Pejabat</center></h4></td></tr>
<tr><td>
<table border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="gray solid"><th>No</th><th>Tahun</th><th>Nama Periode</th></tr>
<tr><td>1</td><td>2013</td><td>Periode Hamim 2</td></tr>
<tr><td>2</td><td>2014</td><td>Hamim 3</td></tr>
<tr><td>3</td><td>2014</td><td>Hamim 3</td></tr>
</table>
</td><td>
<table>
<form action="#" method="post">
<tr><td>Periode Jabatan</td>
<td><select name="periode jabatan">
<option value="0">-Pilih Periode-</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select></td></tr>
<tr><td>Jabatan</td>
<td><select name="jabatan">
<option value="0">-Pilih Jabatan-</option>
<option value="Directure">Directure</option>
<option value="Manager">Manager</option>
<option value="Staff">Staff</option>
<option value="Office Boy">Office Boy</option>
</select></td></tr>
<tr><td>Nama Pejabat</td>
<td><input type="text" name="nama pejabat" /></td><br/>
<tr><td>Unit Kerja</td>
<td><select name="unit kerja">
<option value="0">-Pilih Fakultas-</option>
<option value="Teknik">Teknik</option>
<option value="Hukum">Hukum</option>
<option value="Ekonomi">Ekonomi</option>
<option value="FKIP">FKIP</option>
</select></td></tr>
<tr><td>Unit Kerja</td>
<td><select name="unit prodi">
<option value="0">-Pilih Prodi-</option>
<option value="Informatika">Informatika</option>
<option value="Perminyakan">Perminyakan</option>
</select></td></tr>
<tr><td>
</td>
<td><input type="submit" value="Simpan" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
<input type="button" value="Kembali" name="button" />
</td></tr>
</table>
</table>
</form>
</body>
</html>
demikianlah kode pada HTML5 silahkan di coba dan semoga berhasil
*Notepad++
0 comments:
Thanks for commented