Selasa, 10 Desember 2013

Membuat Form Biodata Menggunakan HTML

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">&nbsp&nbsp&nbsp&nbsp&nbsp
<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