PROGRAM CSS PADA FORM PENDAFTARAN HTML
PROGRAM HTML :
<html>
<head>
<title>
form
</title>
<style type="text/css">
body{
font-family: arial;
}
input [type=submit]{
background: linear-gradient(to bottom,#0088CC, #0044CC);
border: 1px solid #0088CC;
color: #FFF;
margin: 4px 10px;
padding: 5px;
width: 100px;
}
input[type=submit]:hover{
cursor: pointer;
}
input[type=submit]:active
{
background: #0044CC;
}
input[type=reset]{
background: linear-gradient(to bottom,#0088CC, #0044CC) ;
border: 1px solid #0044CC;
color: #FFF;
margin: 4px 10px;
padding: 5px;
width: 100px;
}
input [type=reset]:active{
background: #0044CC;
}
select,
input[type*=date],
input[type=text],
input[type=tel],
input[type=email],
input[type=url],
input[type=password]
{
border: 1px solid #CCC;
border-radius : 5px;
padding: 5px;
width: 225px;
}
fieldset{
border-radius: 5px;
background-color: #eeeeee;
width: 500px;
}
textarea{
border: 1px solid #CCC;
border-radius: 5px;
padding: 5px;
width: 225px;
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>form data diri</legend>
<table>
<tr>
<td>nama lengkap</td>
<td>:</td>
<td><input type="text" name="nama"/></td>
</tr>
<tr>
<td>password</td>
<td>:</td>
<td><input type="password" name="pass"/></td>
</tr>
<tr>
<td>
jenis kelamin
</td>
<td>:</td>
<td>
<input type="radio" nama="jk" value="laki-laki" />
laki-laki
<input type="radio" name="jk" value="perempuan" />
perempuan
</td>
</tr>
<tr>
<td>
tanggal lahir
</td>
<td>:</td>
<td>
<input type="date" name="bd" />
</td>
</tr>
<tr>
<td>
hobi
</td>
<td>
:
</td>
<td>
<input type="checkbox" name="h1" value="futsal" />
futsal
<input type="checkbox" name="h2" value="Berenang"/>
Berenang
<input type="checkbox" name="h3" value="bolavoli"/>
bola voli
<input type="checkbox" name="h4" value="membaca" />
membaca
</td>
</tr>
<tr>
<td>
Agama
</td>
<td>:</td>
<td>
<select name="agama" >
<option value="">--pilih--</option>
<option value="islam">islam</option>
<option value="protestan">protestan</option>
<option value="katolik">katolik</option>
<option value="hindu">hindu</option>
<option value="budha">budha</option>
</select>
</td>
</tr>
<tr>
<td>alamat</td>
<td>:</td>
<td>
<textarea cols="25" rows="5" placeholder="masukkan alamat"></textarea>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" value="kirim" />
<input type="reset" value="batal" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
OUTPUT PROGRAM :
