Sabtu, 22 Oktober 2016

FORMULIR PENDAFTARAN SEDERHANA HTML & CSS


*Pada kesempatan ini kita akan membahas, bagaimana dengan mudah membuat Form Pendaftaran dengan mengunakan script HTML dan sedikit CSS untuk design layoutnya.
yaa langsung saja !!!

Script HTML Form Pendafatran

<!DOCTYPE html>
<html>
<head>
<title>FORMULIR PENDAFTARAN</title>
</head>
<body>
<center><h1>FORMULIR PENDAFTARAN</h1></center>
<center><table border="0">
<tr>
  <td>Nama</td><td>:<td><input type="text" name="nama"/></td></tr>
<tr>
  <td>Alamat</td>
  <td>:<td><input type="text" name="alamat"/></td></tr>
<tr>
  <td>Tempat Lahir</td>
  <td>:<td><input type="text" name="tempat lahir"/></td></tr>
<tr>
  <td>Tanggal Lahir</td>
  <td>:<td><input type="date" name="tanggal lahir"/></td></tr>
<tr>
  <td>Jenis Kelamin</td>
  <td>:<td><input type="radio" name="jk" value="Laki-Laki"/>Laki-Laki<br>
           <input type="radio" name="jk" value="Perempuan"/>Perempuan</td></tr>
<tr>
  <td>Status</td>
  <td>:<td><input type="text" name="Status"/></td></tr>
<tr>
<tr>   
   <td>Agama</td>
   <td>:<td><input type="text" name="Agama"><tr/>
<td>Pendidikan</td>
<td>:<td><select>
                <option>--Pilih</option>
                <option>SD</option>
                <option>SMP</option>
                <option>SMA</option>
                <option>S1</option>
                <option>lain-lain</option>
        </select>
<tr>
  <td>Pekerjaan</td>
  <td>:<td><input type="text" name="Pekerjaan"/></td></tr>
<tr><br>
   <td><input type="submit" name="submit" value="simpan"/></td></tr>
  </table></center>
 </body>
</html> #

*Maka Hasilnya Seperti Berikut :


Script CSS Form Pendaftaran

<style type="text/css">
  h1{
  color: red;
  font-family: times;
  }
 body{
  color: black;
  background-color: yellow;
     }
 table{
  background: transparent;
 }
</style>

*Maka Hasilnya Seperti Berikut :


*Keterangan Script CSS :
  • Script CSS diletakan diantara </head> dan <body>
  • CSS dimulai dengan <style></style>
  • Apabila CSS disimpan pada file yang berbeda maka akan depanggil dengan <link rel="stylesheet" type="text/css" href="style.css">

~Terima kasih & Selamat Mencoba~