Berikut ini adalah cara membuat form biodata diri yang disertai foto diri anda.Untuk memulainya anda dapat menggunakan software notepad,notepad++, atau dreamweaver.Kemudian ketik tulisan berikut :
<html>
<head>
<title>Latihan Form</title>
</head>
<body>
<center><h2><b>Biodata Mahasiswa</b></h2></center>
<br>
<table bgcolor="Gainsboro" align="center" border =0 cellpadding="4" cellspacing="4">
<form name="data" action="latihan1.html" method="get">
<tr>
<td width="400">NIM : <input name="nim" size="8" maxlength="13"><br></td>
<td width="400" rowspan="3" align="center"><img src="photo.jpg" width="100" height="120"></td>
</tr>
<tr>
<td>Nama : <input name="nama" size="40"><br></td>
</tr>
<tr>
<td>Alamat : <br></td>
</tr>
<tr>
<td><textarea rows="5" cols="25">alamat isi disini
</textarea></td>
<td>Tanggal Validasi :</td>
</tr>
<tr>
<td>Jenis Kelamin : <br></td>
<td>
Tgl <select name="tgl">
<option value="pilih">1</option>
<option value="pilih">2</option>
<option value="pilih">3</option>
<option value="pilih">4</option>
<option value="pilih">5</option>
<option value="pilih">6</option>
<option value="pilih">7</option>
<option value="pilih">8</option>
<option value="pilih">9</option>
<option value="pilih">10</option>
<option value="pilih">11</option>
<option value="pilih">12</option>
<option value="pilih">13</option>
<option value="pilih">14</option>
<option value="pilih">15</option>
<option value="pilih">16</option>
<option value="pilih">17</option>
<option value="pilih">18</option>
<option value="pilih">19</option>
<option value="pilih">20</option>
<option value="pilih">21</option>
<option value="pilih">22</option>
<option value="pilih">23</option>
<option value="pilih">24</option>
<option value="pilih">25</option>
<option value="pilih">26</option>
<option value="pilih">27</option>
<option value="pilih">28</option>
<option value="pilih">29</option>
<option value="pilih">30</option>
<option value="pilih">31</option>
</select>
Bulan <select name="bln">
<option value="pilih">Januari</option>
<option value="pilih">Februari</option>
<option value="pilih">Maret</option>
<option value="pilih">April</option>
<option value="pilih">Mei</option>
<option value="pilih">Juni</option>
<option value="pilih">Juli</option>
<option value="pilih">Agustus</option>
<option value="pilih">September</option>
<option value="pilih">Oktober</option>
<option value="pilih">November</option>
<option value="pilih">Desember</option>
</select>
Tahun <Select name="thn"
<option value="pilih">1989</option>
<option value="pilih">1990</option>
<option value="pilih">1991</option>
<option value="pilih">1992</option>
<option value="pilih">1993</option>
</select>
</td>
</tr>
<tr>
<td><input name="gen" type="radio">
Laki-laki<br></td>
<td>Program Studi :</td>
</tr>
<tr>
<td><input name="gen" type="radio" checked>
Perempuan<br></td>
<td rowspan="2"><input name="ps" type="checkbox">TI<br>
<input name="ps" type="checkbox">SI<br>
<input name="ps" type="checkbox">MI<br>
</td>
</tr>
<tr>
<td>Kegemaran :<br></td></tr>
<tr><td><input name="hobi" type="checkbox">Coding<br></td></tr>
<tr><td><input name="hobi" type="checkbox">Drawing<br></td></tr>
<tr><td><input name="hobi" type="checkbox">Travel<br></td></tr>
<tr><td><input name="hobi" type="checkbox">Writing<br></td></tr>
<tr><td>
Mata Kuliah yang dipilih :
<select name="mata_kuliah">
<option value="pilih">Web Programing</option>
<option value="pilih">Java Applet</option>
<option value="pilih">Visual Programing</option>
<option value="pilih">Pemrograman Pascal</option>
<option value="pilih">Network Programing</option>
</select><br>
</td></tr>
<tr><td colspan="2" align="center">
<input type="submit" value="Proses">     
<input type="reset" value="Batal">
</form>
</tr></td>
</table>
</body>
</html>
Note : Untuk menambakan foto anda,ganti tulisan "photo.jpg" pada <img src="photo.jpg" width="100" height="120"></td> dengan nama file foto anda dan sesuaikan formatnya agar dapat terbaca dibrowser.
Setelah selesai save file dengan format html.Hasil output yang akan tampil dibrowser seperti dibawah :
Tidak ada komentar:
Posting Komentar