Penggunaan HTML dan CSS
Pada kesempatan kali ini kita akan mempraktikan bagaimana cara membuat form statis hanya dengan menggunakan HTML dan CSS dasar, ini merupakan salah satu tugas matkul saya waktu kuli hehe. HTML merupakan kepanjangan dari HyperText Markup Language yang berfungsi sebagai kerangka pada sebuah bahasa, misalkan kita ingin menggabungkan bahasa PHP, Javascript itu bisa kita sisipkan HTML didalamnya sebagai kerangka dalam membuat sebuah page yang nantinya akan kita perindah dengan adanya CSS(Cascading StyleSheet),
Kita akan mempraktikan bagaimana cara membuat source code seperti contoh pada gambar diatas dengan bantuan CSS.
file form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas form</title>
<link rel="stylesheet" href="styles/tugas.css">
</head>
<body>
<form action="" name="form" method="post">
<fieldset>
<legend>Formulir Pendaftaran Calon Peserta</legend>
<table border="0">
<tr>
<td colspan="2">Nama</td>
<td width="30"></td>
<td ><input type="text" name="nama" class="nama"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">No. Induk Penduduk</td>
<td></td>
<td><input type="text" name="Penduduk" class="Penduduk"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">Kelamin</td>
<td></td>
<td>
<label class="laki" >
<input type="radio" name="radio" checked>
<span class="kotak"></span>
<span class="pria">Pria</span>
</label>
</td>
<td width="40"></td>
<td>
<label class="wanita">
<input type="radio" name="radio" checked="">
<span class="wanita">Wanita</span>
</label>
</td>
</tr>
<tr>
<td colspan="2">TTL</td>
<td></td>
<td><input type="text" name="ttl" class="ttl"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">Agama</td>
<td></td>
<td>
<label for="Agama"></label>
<select name="Agama" id="Agama">
<option value="islam">Islam</option>
<option value="hindu">Hindu</option>
<option value="protestan">Protestan</option>
<option value="katolik">Katolik</option>
<option value="BUdha">Buddha</option>
<option value="Konghucu">Konghucu</option>
</select>
</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">Status</td>
<td></td>
<td>
<label for="Status"></label>
<select name="Status" id="Status">
<option value="Kawin">Kawin</option>
<option value="belum">Belum kawin</option>
<option value="single">Single</option>
<option value="dua">Diputusin</option>
</select>
</td>
<td colspan="2"></td>
</tr>
<tr>
<td><input type="button" name="submit" value="Browse" class="Browse"></td>
<td><input type="button" name="submit" value="Simpan" class="Simpan"></td>
<td colspan="4"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
kita hubungkan dengan css, sebelum itu kita buat terlebih dahulu file css-nya yaitu style.css
body{
background:#f4d8d8;
}
fieldset{
width: 800px;
border-top: 3px dashed #16ee1b;
border-left: 3px dashed blue;
border-bottom: 2px dotted green;
border-right: 2px dotted #a83dec;
margin: 0 auto;
border-radius: 5px;
}
legend{
background: salmon;
border-radius: 5px;
padding: 5px;
color: #faf7f5;
font-family: times;
}
legend:hover{
background: lightskyblue;
color: red;
text-shadow: 2px 1px 2px blue;
transition: all 2s;
}
table{
margin-left: 145px;
color: #f29a3c;
}
.pria{
color: black;
}
.wanita{
color: black;
}
.ttl{
border: 1px solid #55f289;
color: #17f876;
}
nav{
display: inline-block;
}
.nama{
border:1px solid #55f289;
color: blue;
}
.Penduduk{
border:1px solid #55f289;
color: red;
}
.dropdown{
position: relative;
display: inline-block;
}
.Browse{
background: #f4d8d8;
color:#ac6644;
border-top: 2px solid #f4f0f7;
border-left: 2px solid #f4f0f7;
border-right: 2px solid #a39d9b;
border-bottom: 2px solid #a39d9b;
}
.pria{
margin-right: -30px;
}
.status:hover
.drop-content{
display: block;
}
.status:hover
.stbtn{
background-color:green;
color: yellow;
min-width: 120px;
}
.Browse:hover{
background-color: #5dccf0;
color:#f0f4f5;
border-top: 2px dashed #f6465f;
border-left: 2px dashed #f6465f;
border-right: 2px dashed#383132;
border-bottom: 2px dashed #383132;
border-radius: 4px;
transition: all 1s;
}
.Simpan{
background: #f4d8d8;
color:#ac6644;
border-top: 2px solid #f4f0f7;
border-left: 2px solid #f4f0f7;
border-right: 2px solid #a39d9b;
border-bottom: 2px solid #a39d9b;
border-radius: 4px;
}
.Simpan:hover{
background-color: #5dccf0;
color:#f0f4f5;
border-top: 2px dashed #1a5be0;
border-left: 2px dashed #1a5be0;
border-right: 2px dashed#383132;
border-bottom: 2px dashed #383132;
transition: all 1s;
}
Maka setelah itu kita bisa langsung menginputkan walaupun ini belum terhubung ke database karena contoh source code ini masih bersifat belum dihubungkan dengan database.
tampilan sebelum di inputkan data
setelah input data
Semoga contoh diatasdapat membantu pemahaman.
0 Response to "Membuat Form Pendaftaran Statis dengan HTML dan CSS Pemula"
Post a Comment