Sebelum mencoba CSS 3 dan HTML 5 dalam pembuatan form Biodata ini diharapkan anda telah menggunakan misal Google Chrome, Mozilla Firefox,Opera atau Safari versi terbaru, karena dukungan browser pada HTML 5 berjalan baik hanya di versi terbaru dari software browser yang telah disebutkan dan untuk diperhatikan juga tiap penampilan hasil dari dokumen dibawah ini sedikit ada perbedaan, di bawah ini menggunakan Google Chrome versi 12.0.xx dan Mozilla Firefox versi 4.0.1
dibawah ini adalah tampilan Keseluruhan hasil :
dibawah ini contoh pesan peringatan penampilan bila anda belum menyelesaikan penulisan email
untuk membuat form biodata seperti ini kita terlebih dahulu membuat dokumen form dengan nama file formbiodata.html dengan source code sebagai berikut :
<head> <title>Mencoba CSS 3 dan HTML 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="sayacss.css" rel="stylesheet" type="text/css" </head>
<body>
<center>
<form id=biodata>
<fieldset>
<h1>Form Pengisian Biodata</h1>
<ol>
<li>
<label for=nama>Nama</label>
<input id=nama name=nama type=text placeholder="Nama awal dan akhir anda" required autofocus>
</li>
<li>
<label for=email>Email</label>
<input id=email name=email type=email placeholder="contoh@sayacoba.org" required>
</li>
<li>
<label for=hp>No Ponsel</label>
<input id=hp name=hp type=tel placeholder="Contoh. +6283000" required>
</li>
</ol>
</fieldset>
<fieldset>
<ol>
<li>
<label for=alamat>Alamat Anda</label>
<textarea id=alamat name=alamat rows=5 required></textarea>
</li>
<li>
<label for=kodepos>Kode Pos</label>
<input id=kodepos name=kodepos type=text placeholder="Contoh. 46211" required>
</li>
<li>
<label for=kota>Kota/Kab</label>
<input id=kota name=kota type=text required>
</li>
<li>
<label for=provinsi>Provinsi</label>
<input id=provinsi name=provinsi type=text required>
</li>
<li>
<label for=negara>Negara</label>
<input id=negara name=negara type=text required>
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Kirim</button>
</fieldset>
</form>
</center>
</body>
kemudian buatlah dokumen CSS dengan nama file sayacss.css source kode sebagai berikut :
html, body, h1, form, fieldset, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 20px;
}
form#biodata {
background: #3BB9FF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}
form#biodata fieldset {
border: none;
margin-bottom: 10px;
}
form#biodata fieldset:last-of-type {
margin-bottom: 0;
}
form#biodata legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#biodata fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#biodata ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#biodata ol ol li {
background: none;
border: none;
float: left;
}
form#biodata label {
float: left;
font-size: 13px;
width: 110px;
}
form#biodata fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#biodata fieldset fieldset label:hover {
cursor: pointer;
}
form#biodata input:not([type=radio]),
form#biodata textarea {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#biodata input:not([type=submit]):focus,
form#biodata textarea:focus {
background: #eaeaea;
}
form#biodata button {
background: #384313;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}
form#biodata button:hover {
background: #1e2506;
cursor: pointer;
}
*simpanlah kedua dokumen tersebut dalam satu folder dan silahkan akses formbiodata.html
Selamat Mencoba dan berkreasi!
Tidak ada komentar:
Posting Komentar