Kali ini saya akan Membahas mengenai bahaimana cara Membuat form agar dilihat lebih menarik menggunakan Css
Pertama cobalah buat html dengan nama form.html, kemudian ketik kode html untuk form nya seperti ini:
<html>
<head>
<title>Form Pelanggan</title>
</head>
<div id="wrapper">
<form>
<fieldset>
<legend>Form pelanggan</legend>
<table cellpadding="0" >
<tr>
<td width="122" >Nama</td>
<td width="26" align="center" valign="top">:</td>
<td width="353" ><input name=nama type=text value="" required>
</td>
</tr>
<tr>
<td >Alamat</td>
<td align="center" valign="top">:</td>
<td ><input name="alamat" type=text value="" /></td>
</tr>
<tr>
<td >Kota</td>
<td align="center" valign="top">:</td>
<td ><input name="kota" type=text value="" /></td>
</tr>
<tr>
<td >Agama</td>
<td align="center" valign="top">:</td>
<td >
<select name="agama" >
<option value=0 selected>ISLAM</option>
<option value=1 selected>KRISTEN</option>
<option value=2 selected>HINDU</option>
<option value=3 selected>BUDHA</option>
</select>
</td>
</tr>
<tr>
<td >Telepon</td>
<td align="center" valign="top">:</td>
<td ><input name=notelp type=text value="" size=20 ></td>
</tr>
<tr>
<td valign="top" >Keterangan</td>
<td align="center" valign="top">:</td>
<td ><textarea name=ket cols="45" rows="5" id="textarea"></textarea>
</td>
</tr>
<tr>
<td valign="top" > </td>
<td> </td>
<td >
<input type=submit value="Simpan" ></td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
Hasilnya nanti akan terlihat seperti ini :
Setelah itu tambahkan kode Css sebelum koding </head> sepetri ini:
<style type="text/css">
<!--
.judul {font-size: large;font-weight: bold;}
-->
#wrapper {
width:60%;
margin:0 ;
font-family:Arial, Helvetica, sans-serif;
}
legend {
color:#ed1fdf;
font-size:16px;
padding:0 8px;
background:#fff;
-moz-border-radius:4px;
box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
padding:10px 8px;
text-transform:uppercase;
font-family:Helvetica, sans-serif;
font-weight:bold;
}
fieldset {
border-radius:1px;
background: #fff;
background: -moz-linear-gradient(#fff, #ed1fdf);
background: -o-linear-gradient(#fff, #ed1fdf);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e668ed));
/
background: -webkit-linear-gradient(#fff, #ed1fdf);
padding:20px;
border-color:rgba(4, 129, 177, 0.4);
font-size: 12px;
}
input,
textarea {
color: #373737;
background: #fff;
border: 1px solid #CCCCCC;
color: #aaa;
font-size: 14px;
line-height: 1.2em;
margin-bottom:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
input[type="text"]{
padding: 1px 1px;
height: 25px;
width:280px;
}
input[type="text"]:focus,
input[type="password"]:focus {
background:#ffc7f7;
text-indent: 0;
z-index: 1;
color: #373737;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 310px;
border-color:#ccc;
box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
opacity:0.6;
}
input[type="submit"], input[type="reset"] {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 5px 14px 5px 12px;
text-decoration: none;
}
textarea {
padding:1px;
width:96%;
height:100px;
}
textarea:focus {
background:#ffc7f7;
text-indent: 0;
z-index: 1;
color: #373737;
opacity:0.6;
box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
border-color:#ccc;
}
.small {
line-height:14px;
font-size:12px;
color:#999898;
margin-bottom:3px;
}
select:focus{ background:#ffc7f7;
color: #373737;
box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
border-color:#ccc;
}
</style>
Hasil dari form yang kita buat tadi akan terlihat seperti ini:
