Assalamualaikum...
pada postingan sebelumnya membuat form pendaftaran dengan html untuk kali ini sedikit berbeda karan ada tambahan CSS untuk membuat tampilan lebih menarik ..
HTML:
<html>
<head>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #F08080;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #E0FFFF;
}
input[type=reset] {
width: 100%;
background-color: #4682B4;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]:hover {
background-color: #E0FFFF;
div {
border-radius: 5px;
background-color: #E0FFFF;
padding: 40px;
}
</style>
<title>Form Pendaftaran</title>
</head>
<body bgcolor=#E0FFFF>
<p align="center">
<font size=20 face="calibri">Form Pendaftaran Mahasiswa Baru</font>
</br>
<div>
<form action="url" method="post">
<table align="center" width=300 height=500>
<tr>
<td><font face="calibri">Nama</font></td>
<td><input type="text" size=50></td>
</tr>
<tr>
<td align="top"><font face="calibri">Alamat</font></td>
<td><textarea cols=50 rows=10></textarea></br></td>
</tr>
<tr>
<td><font face="calibri">Agama</font></td>
<td><input type="radio" name="agama" value="islam">Islam
<input type="radio" name="agama" value="kristen">kristen
<input type="radio" name="agama" value="katolik">Katolik
<input type="radio" name="agama" value="budha">Budha
<input type="radio" name="agama" value="hindu">Hindu
<input type="radio" name="agama" value="konghucu">Konghucu</td>
</tr>
<tr>
<td><font face="calibri">Jenis Kelamin</font></td>
<td><select>
<option> Pria</option>
<option>Wanita</option></select></td>
</tr>
<tr>
<td><label for="Sekoah"><font face="calibri">Asal SMA</label></font></td>
<td>
<select id="Sekolah" name="Sekolah">
<option> SMA</option>
<option>SMK</option>
<option>MA</option>
</select></td>
</tr>
<tr>
<td></td>
<td align="center"><input type="submit" value="KIRIM"><input type="reset" value="BATAL"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
note: untuk bagian yang berwarna biru itu merupakan bagian CSS .
Tampilan yang akan di tampilkan :
Sekian dan terimakasih
Wassalamualaikum ...............
0 komentar
Posting Komentar