PKL di STMIK AKAKOM (16 April 2014)

Hari ke-61 PKL di STMIK AKAKOM (Rabu, 16 Apr 2014), hari ini saya dan dua teman saya mengikuti kuliah Pak Rahmat. Materi yang dibahas kali ini adalah tentang pembuatan form dengan HTML. Yah, sebenarnya saya sudah cukup menguasai materi tersebut sehingga tidaklah begitu sulit bagi saya untuk memahami materi yang diberikan. Dan berikut adalah contoh coding untuk membuat form biodata:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Biodata</title>
</head>

<body>
<form action="" method="post">
  <table width="596" border="0">
    <tr>
      <td width="190">Nama</td>
      <td width="8">:</td>
      <td width="376"><input type="text" name="nama" /></td>
    </tr>
    <tr>
      <td>Hobby</td>
      <td>:</td>
      <td>
      <select name="hobby">
      <option value="Not Selected" selected="selected">-Pilih Hobby-</option>
      <option value="Sepak Bola">Sepak Bola</option>
      <option value="Bulu Tangkis">Bulu Tangkis</option>
      <option value="Renang">Renang</option>
      <option value="Membaca">Membaca</option>
      <option value="Ngefap">Ngefap</option>
      
      </select>
      </td>
    </tr>
    <tr>
      <td>Agama</td>
      <td>:</td>
      <td>
      <select name="agama">
      <option value="Not Selected" selected="selected">-Pilih Agama-</option>
      <option value="Islam">Islam</option>
      <option value="Protestan">Protestan</option>
   <option value="Katholik">Katholik</option>
      <option value="Hindu">Hindu</option>
      <option value="Budha">Budha</option>
      </select>
      </td>
    </tr>
    <tr>
      <td>Jenis Kelamin</td>
      <td>:</td>
      <td><input type="radio" name="jenkel" value="laki" />Laki-laki&nbsp;&nbsp;&nbsp;<input type="radio" name="jenkel" value="perempuan" />Perempuan&nbsp;&nbsp;&nbsp;<input type="radio" name="jenkel" value="lain" />Lain-lain</td>
    </tr>
    <tr>
      <td>Email</td>
      <td>:</td>
      <td><input type="email" name="email" /></td>
    </tr>
    <tr>
      <td>Password</td>
      <td>:</td>
      <td><input type="password" name="password" /></td>
    </tr>
    <tr>
      <td><input type="submit" name="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="Reset" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

Saya menggunakan table untuk merapikan interface form sehingga penempatannya tidak "morat-marit"

Dari kode diatas akan membentuk tampilan di browser seperti berikut ini:

Friend's Blog: