Sunday, March 23, 2014
Sudah kurang lebih 1 Minggu Gudang Receh tidak posting artikel apapun, dikarenakan tugas kuliah yang numpuk dan belum selesai semua (curhat). Namun ada satu tugas yang saya paling sukai, yaitu tugas ini, posting review materi ke blog masing - masing, lumayan untuk menambah posting di blog yang masih sedikit.
Kali ini Gudang Receh membahas tentang Form dan Table pada HTML sebagai tugas review mingguan.
Form
Form adalah kolom yang berfungsi untuk mengumpulkan informasi dari blog / website kita. Misalnya informasi untuk login, register, search, dll.
Contoh form:
 |
| Pada halaman utama facebook terdapat 2 form, form login dan form register. |
 |
| Setelah login terdapat form search, form status, dan form comment. |
Contoh script untuk membuat form dengan informasi yang diminta Nama, Alamat, Jenis Kelamin, Nomor Telepon, Profesi, dan Hobi:
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="#" method="post">
Nama:<br />
<input type="text" name="nama" /><br />
Alamat:<br />
<textarea cols="60" rows="5"></textarea><br />
Jenis kelamin:<br />
<input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan<br />
Nomor telepon:<br />
<input type="text" name="nhp" /><br />
Pekerjaan:<br>
<select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select>
<br />
Hobi:<br />
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Hasilnya akan seperti dibawah ini.
Form
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
Untitled Document
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
<html>Hasilnya akan seperti dibawah ini.
<head>
<title>Tabel</title>
</head>
<body>
<table width="400" border="1">
<tr>
<td width="112">Nama</td>
<td width="21">:</td>
<td width="245"> </td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td> </td>
</tr>
</table>
</body>
</html>
| Nama | : | |
| Alamat | : | |
| Jenis kelamin | : | |
| Nomor telepon | : | |
| Pekerjaan | : | |
| Hobi | : |
Keterangan:
- Tag <tr> adalah table rows
- Tag <td> adalah table data
Kolaborasi Form dan Table
Banyak orang mengkombinasikan fungsi dari table untuk merapikan form. Dan berikut ini adalah script kombinasi keduanya.
<html>Dan hasilnya akan seperti:
<head>
<title>Form & Table</title>
</head>
<body>
<form action="#" method="post">
<table width="647" border="0">
<tr>
<td width="209">Nama</td>
<td width="10">:</td>
<td width="421"><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols="60" rows="5"></textarea></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td><input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan</td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td><input type="text" name="nhp" /></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport</td>
</tr>
</table>
</form>
</body>
</html>
Keterangan:
- Value dari atribut border pada tag <table> dapat diganti - ganti. Agar border tidak terlihat, gunakan 0.
Itulah review dari Gudang Receh tentang Form dan Table, Semoga bermanfaat.
Tags: tugas, tugas html, html, tabel, table, form,
Iptekini
