PEMOGRAMAN WEB design web yg menarik menggunakan CSS
<html>
<head>
<style
type="text/css">
body {
font-family:agency fb;
}
fieldset{
border:5px inset orange;
background:url(bg.jpg);
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
label {
font-size:15pt;
color:#008B8B;
font-weight:bold;
}
input[type=reset],input[type=submit]{
font-weight:bold;
color:white;
width:100px;
height:25px;
-webkit-border-radius:100px ;
-moz-border-radius:100px ;
border-color:blue;
background-color:blue;
}
input[type=text],select,textarea{
font-weight:bold;
background-color:#ADD8E6;
border: 1px solid orange;
color:blue;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}
textarea{
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
</style>
</head>
<body>
<form
action="">
<fieldset>
<p>
<label>Nama
lengkap</label>
<input
type="text" name="nama" placeholder="Nama
kamu"/>
</p>
<p>
<label>Jenis
Kelamin</label>
<input
type="radio" name="kelamin"
value="L"/><strong><font color="white">Laki-laki</font></strong>
<input type="radio"
name="kelamin" value="P"/><strong><font
color="white">perempuan</font></strong>
</p>
<p>
<label>Tempat
Tanggal Lahir</label>
<input
type="text" name="tempat" size="8"/>,
<select
name="tgl">
<option>tgl</option>
<option
value="1">01</option>
<option
value="2">02</option>
<option
value="3">03</option>
<option
value="4">04</option>
<option
value="5">05</option>
<option
value="6">06</option>
<option
value="7">07</option>
<option
value="8">08</option>
<option
value="9">09</option>
<option
value="10">10</option>
<option
value="11">11</option>
<option
value="12">12</option>
<option
value="13">13</option>
<option
value="14">14</option>
<option
value="15">15</option>
<option
value="16">16</option>
<option
value="17">17</option>
<option
value="18">18</option>
<option
value="19">19</option>
<option
value="20">20</option>
<option
value="21">21</option>
<option
value="22">22</option>
<option
value="23">23</option>
<option
value="24">24</option>
<option
value="25">25</option>
<option
value="26">26</option>
<option
value="27">27</option>
<option
value="28">28</option>
<option
value="29">29</option>
<option
value="30">30</option>
<option
value="31">31</option>
</select><b>/</b>
<select
name="bln">
<option>bln</option>
<option value="1">Januari</option>
<option
value="2">Februari</option>
<option
value="3">Maret</option>
<option
value="4">April</option>
<option
value="5">Mei</option>
<option
value="6">Juni</option>
<option
value="7">Juli</option>
<option
value="8">Agustus</option>
<option
value="9">September</option>
<option value="10">Oktober</option>
<option
value="11">November</option>
<option
value="12">Desember</option>
</select><b>/
</b>
<select
name="thn">
<option>thn</option>
<option
value="1980">1980</option>
<option
value="1981">1981</option>
<option
value="1982">1982</option>
<option
value="1983">1983</option>
<option
value="1984">1984</option>
<option
value="1985">1985</option>
<option
value="1986">1986</option>
<option
value="1987">1987</option>
<option
value="1988">1988</option>
<option
value="1989">1989</option>
<option
value="1990">1990</option>
<option
value="1991">1991</option>
<option
value="1992">1992</option>
<option
value="1993">1993</option>
<option
value="1994">1994</option>
<option
value="1995">1995</option>
<option
value="1996">1996</option>
<option
value="1997">1997</option>
<option
value="1998">1998</option>
<option
value="1999">1999</option>
<option
value="2000">2000</option>
<option
value="2001">2001</option>
<option value="2002">2002</option>
<option
value="2003">2003</option>
<option
value="2004">2004</option>
<option
value="2005">2005</option>
<option
value="2006">2006</option>
<option
value="2007">2007</option>
<option
value="2008">2008</option>
<option
value="2009">2009</option>
<option
value="2010">2010</option>
<option
value="2011">2011</option>
<option
value="2012">2012</option>
<option
value="2013">2013</option>
<option
value="2014">2014</option>
<option
value="2015">2015</option>
<option value="2016">2016</option>
<option
value="2017">2017</option>
<option
value="2018">2018</option>
</select>
</p>
<p>
<label>Agama</label>
<input
type="radio" name="agama" value="Islam" /><strong><font color="white">Islam</font></strong>
<input
type="radio" name="agama" value="Hindu"
/><strong><font color="white">Hindu</font></strong></br>
<input
type="radio" name="agama"
value="Katolik"/><strong><font color="white">Katolik</font></strong>
<input
type="radio" name="agama"
value="Protestan"/><strong><font color="white">Protestan</font></strong>
</p>
<p>
<label>Pendidikan
Terakhir</label>
<select
name="pd">
<option>-</option>
<option
value="S1"/>S1</option>
<option
value="S2"/>S2</option>
<option
value="S3"/>S3</option>
</select>
</p>
<p>
<label>Hobby</label>
<input
type="checkbox" name="hobby" value="Tidur"
/><strong><font color="white">Tidur</font></strong>
<input
type="checkbox" name="hobby" value="Membaca"
/><strong><font
color="white">Membaca</font></strong>
<input
type="checkbox" name="hobby" value="Belajar"/><strong><font
color="white">Belajar</font></strong></br>
<input
type="checkbox" name="hobby"
value="Bermain"/><strong><font color="white">Bermain</font></strong>
<input
type="checkbox" name="hobby"
value="Musik"/><strong><font color="white">Musik</font></strong>
<input
type="checkbox" name="hobby"
valuse="Intern"/><strong><font color="white">Internetan</font></strong>
</p>
<p>
<label>Alamat</label>
</br><textarea
cols="35" placeholder="Alamat rumah anda"
/></textarea>
</p>
<p>
<label>Os
yang dikuasai</label>
<input type="checkbox"
value="Windows XP"/><strong><font color="white">Windows
XP</font></strong>
<input
type="checkbox" value="Windows
7"/><strong><font color="white">Windows
7</font></strong>
<input
type="checkbox" value="linux"/><strong><font
color="white">Linux</font></strong>
</p>
<p>
<label>Komentar</lable></br>
<textarea
cols="35" rows="5" placeholder="isikan Komentar"
/></textarea></br>
</p>
<input
type="reset" name="reset" value="Reset" />
<input
type="submit" name="submit" value="kirim" />
</fieldset>
</form>
</body>
</html>
hasil Outputnya:
Komentar
Posting Komentar