Senin, 24 September 2012

Membuat Efek Form

  Ketik Kode di bawah ini


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.nama {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:20px;
}
.nama:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:20px;
}

.kelas {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:20px;
}
.kelas:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:20px;
}

.alamat {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:30px;
}
.alamat:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:30px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form method="post" action="">


<p>&nbsp;</p>
<table width="403" height="172" border="0">
  <tr>
    <td width="141">Nama</td>
    <td width="11"> : </td>
    <td width="229"><input type="text" name="nama" id="nama" class="nama" /></td>

  <tr>
    <td>Kelas      </td>
    <td> : </td>
    <td><input type="text" name="kelas" id="kelas"  class="kelas"/></td>
  </tr>
   </tr>
  <tr>
    <td>Alamat</td>
    <td> : </td>
    <td><textarea name="alamat" id="alamat" class="alamat"></textarea></td>
  </tr>
  <tr>
    <td>Hoby</td>
    <td> : </td>
    <td><input type="checkbox" name="hoby2" id="hoby2" />
Memancing </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>  </td>
    <td><input type="checkbox" name="hoby" id="hoby" />
Sepak Bola
  </p></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td> : </td>
    <td><select name="select"><option value="Tidak Ada">Tidak Ada</option>
                              <option value="Laki-laki">Laki-laki</option>
                              <option value="Perempuan">Perempuan</option>
          </select>
   </td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td></td>
  <td>
  <input type="submit" value="Kirim">
 <input type="reset" value="Clear">
  </td>
  </tr>

</table>
<p>&nbsp;</p>
</body>
</html>

Dan Jadinya Seperti ini

Untitled Document

Nama :
Kelas :
Alamat :
Hoby : Memancing
  Sepak Bola

Jenis Kelamin                   : 








Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)