Belajar Membuat Form HTML

Teman-teman kali ini kita akan belajar membuat form di dalam sebuah tabel agar penggunaannya lebih rapi dan terstrukur. Form digunakan untuk inputan dari user, seperti input nama, alamat, password, email dll.
Langsung saja pada cara-caranya.

Berikut contoh script membuat form biodata :


<form action="#" method="post">
<table border="0" width="600">
<tr>
<td colspan="2" align="center"><h1>Input Biodata</h1></td>
</tr>

<tr>
<td colspan="2" bgcolor="#CCCCCC"><h2>Data Diri</h2></td>

</tr>

<tr>
<td>Nama</td>
<td><input type="text" name="name" size="50"></td>
</tr>

<tr>
<td>Tempat Tanggal Lahir</td>
<td><input type="text" name="ttl" size="50"></td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="sex" value="pria" >Laki-laki
<input type="radio" name="sex" value="wanita">Perempuan
</td>
</tr>

<tr>
<td>Agama</td>
<td>
<select>
<option name="islam">Islam
<option name="kristen">Kristen
<option name="katolik">Katolik
<option name="hindu">Hindu
<option name="budha">Budha
</select>
</td>
</tr>

<tr>
<td>Alamat</td>
<td><textarea name="alamat" cols="30" ></textarea></td>
</tr>

<tr>
<td>Upload
<td><input type="file" name="foto"></td>
</tr>

<tr>
<td>Status</td>
<td><input type="text" name="status" size="50"></td>
</tr>

<tr>
<td>Telp</td>
<td><input type="text" name="telp" size="50"></td>
</tr>

<tr>
<td>Website</td>
<td><input type="text" name="web" size="50"></td>
</tr>

<tr>
<td>Email</td>
<td><input type="text" name="email" size="50"></td>
</tr>

<tr>
<td height="40" colspan="2"></td>

</tr>


<tr>
<td colspan="2" bgcolor="#CCCCCC"><h2>Pendidikan</h2></td>

</tr>

<tr>
<td>Sekolah Dasar/SD</td>
<td><input type="text" name="sd" size="50"></td>
</tr>

<tr>
<td>Sekolah Menengah Pertama/SMP</td>
<td><input type="text" name="smp" size="50""></td>
</tr>

<tr>
<td>Sekolah Mengah Atas/Kejuruhan</td>
<td><input type="text" name="sma" size="50"></td>
</tr>

<tr>
<td>Perguruan Tinggi</td>
<td><input type="text" name="pt" size="50"></td>
</tr>

<tr>
<td height="40" colspan="2"></td>

</tr>

<tr>
<td colspan="2" bgcolor="#CCCCCC"><h2>Pengalaman Kerja</h2></td>

</tr>

<tr>
<td colspan="2"><textarea name="pk" cols="50" ></textarea></td>
</tr>

<tr>
<td colspan="2"><input type="submit" name="simpan" value="save" /><input type="reset"  value="reset" /></td>
</tr>
</table>
</form>

Tampilan :