Minggu, 01 Maret 2015

cara membuat tabel data diri dengan html

pertama ketik source code html di notepad++ atau di netbean atau yang lain .
<!DOCTYPE HTML>
<HTML>
    <HEAD>
    <TITLE>Tugas 1 Praktikum Pemprograman WEB</TITLE> <!-- untuk memberikan judul pada web yang dibuat-->
    </HEAD>
    <BODY>
   <img src="index.jpg" >
    <form>
    <table Border=0 cellspacing=2>
    <tr>
        <td>Nama</td>
        <td>:</td>
        <td><input type="text" nama="nama"/></td><!--untuk menampilkan atau input teks-->
    </tr>
    <tr>
        <td>Alamat</td>
        <td>:</td>
        <td><input type="text" nama="Alamat"/></td><!-- untuk input teks atau memasukan alamat -->
    </tr>
<tr>
        <td>Tanggal Lahir</td>
        <td>:</td>
        <td><input type="DATE" name="date"  /></td><!--untuk input tanggal lahir dengan tipe data date -->
</tr>
<tr>
        <td>Kecamatan</td>
        <td>:</td>
        <td><select nama="KC"><!-- untuk memilih kecamatan dengan bentuk combo box dengna pilihan seperti di bawah ini -->
        <option value ="none">---- Nama Kecamatan ----</option>
        <option value ="1">Kalibaru</option>
        <option value ="2">Glenmore</option>
        <option value ="3">Genteng</option>
        <option value ="4">Sempu</option>
        <option value ="5">Jajag</option>
        <option value ="6">Benculuk</option>
        <option value ="7">Purwoharjo</option>
        <option value ="8">Pesanggaran</option>
        <option value ="9">Muncar</option>
        <option value ="10">Banyuwangi</option>
        <option value ="11">Kabat</option>
        <option value ="12">Kalipuro</option>
        <option value ="13">Tegalsari</option>
        <option value ="14">Srono</option>
        <option value ="15">Bajul Mati</option>
        </select>
        </td>
</tr>
<tr>
        <td>Jenis Kelamin</td><!-- dengan mengguanakan tipe data radio kita dapat menggunakan pilihan  -->
        <td>:</td>
        <td>    <input type="radio" name="jk" value="laki - laki"/>Laki-Laki
        <input type="radio" name="jk" value="Perempuan"/>Perempuan
        </td>
</tr>

<tr>
        <td>No.HP</td>
        <td>:</td>
        <td><input type="number" name="number"/></td><!-- sedangkan tipe data number hanya untuk menginputkan angka saja -->
</tr>
<tr>
        <td>E-mail</td>
        <td>:</td>
        <td><input type="Email" name="E-mail"/></td><!-- dengan tipe data email hanya dapat menginputkan email -->
</tr>
<tr>
        <td>Blog</td>
        <td>:</td>
        <td><input type="url" name="Blog"/></td><!-- sedangkan tipe data url hanya untuk menginputkan url saja -->
<tr>
        <td colspan="2" align= "center" ><input type="Submit" name="SIMPAN" value="SIMPAN" />
        </td>
        <td align= "center" ><input type="RESET" name="RESET" value="RESET" />
        </td>
</tr>
<table>
</form>
</BODY>
</HTML>



dan maka hasilnya akan seperti ganbar di bawah ini:


Tidak ada komentar:

Posting Komentar