Ceritanya saya lagi seneng ni belajar HTML,ya seneng aja,walaupun memerlukan banyak referensi belajar.Di kampus saya belajar mengenai mata kuliah Client side scripting,nah di situ diajarin tentang pembuatan template web,iframe,form Dsb menggunakan program yang namanya Micromedia Dreamweaver.Dari beberapa yang udah di ajarin,saya pengen share ni mengenai pembuatan Form dengan CSS,udah tau kan Form?? Baik kalau belum aku kasih gambaran aja,Form tu kayak umpan balik dari pengunjung ke web yang di kunjungi.contohnya aja kalau kalian pengen daftar TWITTER,pasti kalian mengisi form persyaratan buat daftar kan? nah itu salah satu contohnya. Dari code HTML dengan CSS nya yang pengen saya share ini beda,nanti kalian bisa kembangin sesuai keinginan kalian.
<html>
<head><title>haha</title><style type="text/css">
.cssform p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0;padding-left: 155px; /*width of left column containing the label elements*/border-top: 1px dashed gray;height: 1%;}
.cssform label{font-weight: bold;float: left;margin-left: -155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/}
.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/width: 180px;}
.cssform textarea{width: 250px;height: 150px;}
/*.threepxfix class below:Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html*/
* html .threepxfix{margin-left: 3px;}
</style></head><body>
<form id="myform" class="cssform" action="">
<p><label for="user">Name</label><input type="text" id="user" value="" /></p>
<p><label for="emailaddress">Email Address:</label><input type="text" id="emailaddress" value="" /></p>
<p><label for="comments">Feedback:</label><textarea id="comments" rows="5" cols="25"></textarea></p><br/><br/>
<p><br/><br/><br/><br/><br/><label for="comments">Sex:</label>Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /></p>
<p><label for="comments">Hobbies:</label><input type="checkbox" name="hobby" /> Tennis<br /><input type="checkbox" name="hobby" class="threepxfix" /> Reading <br /><input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br /></p><br/><br/><br/><br/><p><label for="terms">Agree to Terms?</label><input type="checkbox" id="terms" class="boxes" /></p><br/>
<div style="margin-left: 150px;"><input type="submit" value="Submit" /> <input type="reset" value="reset" /></div>
</form></body></html>
Hasilnya bisa lihat demo di bawah ini:
Comments