Bahasa Pemrograman Komputer: MEMBUAT TABEL DAN FORM DALAM HTML

Tabel

1. tabel didefinisikan dengan menggunakan tag <table> dan </table>.

2. sebuah tabel terbagi atas baris yang didefinisikan dengan tag <tr> dan </tr>.

3. sebuah baris terbagi atas sel data (kolom) yang didefinisikan dengan tag <td>

dan </td>.

4. td merupakan kependekan dari table data, yang merupakan isi dari sel data (kolom). Sel data ini dapat berisi teks, gambar, list, paragraf, form, garis horizontal, tabel, dan lain-lain.

5. contoh penulisan HTML untuk membuat tabel adalah sebagai berikut :

<table border=”1”>

<tr>

</tr>

<tr>

</tr>

</table>

6. penggunaan atribut border=1 akan membuat garis batas pada tabel sebesar 1 pixel. Semakin besar pixel yang diberikan maka akan semakin tebal garis batas tabel yang dihasilkan. Tanpa penulisan atribut border, secara default web browser tidak akan menampilkan garis batas tabel.

7. atribut width digunakan untuk ukuran dari tabel.

8. atribut cellspacing digunakan untuk spasi antara sel.

9. atribut cellpadding digunakan untuk spasi isi dari sel.

10. atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu sel data.

11. atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu sel data.

12. untuk memberikan warna dan gambar latar belakang tabel, digunakan atribut bgcolor untuk memberikan warna latar belakang pada tabel, atribut background untuk memberikan gambar latar belakang pada tabel. Kedua atribut ini ditempatkan pada tag <table>.

13. untuk memberikan warna dan gambar latar belakang sel data, digunakan atribut bgcolor untuk memberikan warna latar belakang pada sel data, atribut background untuk memberikan gambar latar belakang pada sel data. Kedua atribut ini ditempatkan pada tag <td>.

14. untuk meratakan penulisan teks pada sel data digunakan atribut ALIGN dengan value left, center, dan right.

Heading Tabel

Didefinisikan menggunakan tag <th>. TH merupakan kependekan dari table heading.

Contoh :

<table border=”1”>

<tr>

<th>Heading 1</th>

<th>Heading 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Form

1. form adalah sebuah area yang dapat berisi elemen form.

2. elemen form adalah elemen yang memungkinkan user untuk memasukkan informasi (seperti text field, drop down menu, radio button, checkbox, dan lainlain) dalam sebuah form.

3. form didefinisikan dengan tag <form> dan diakhiri dengan tag >.

4. format penulisannya adalah sebagai berikut :

<form>

<input>

</form>

Tag <input> adalah tag yang paling sering digunakan pada tag <form>. Jenisjenis input ditentukan oleh jenis atribut yang disertakan.

Tag <form> dapat mengandung atribut lain seperti :

a. method=get/post (cara pengiriman data).

b. Action= URL (alamat/lokasi tempat mengirimkan form).

c. Target=nama_jendela (nama jendela menampilkan jawaban form).

d. On submit=kode javascript (event handler untuk event submit).

Jenis input yang umum digunakan

Text Field

Digunakan bila menghendaki user untuk mengetikkan sesuatu pada form. Untuk itu pada tag <input> ditambahkan sebuah atribut type=”text” untuk menampilkan text field tersebut. Bila perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi elemen form tadi, misalnya name=”namadpn”.

<form>

Nama Depan :<input type=”text” name=”namadpn”><br>

Nama Belakang : <input type=”text” name=”namablk”>

</form>

Perhatikan bahwa tag <form> sendiri tidak akan ditampilkan pada web browser. Secara default panjang text field adalah 20 karakter, kecuali bila disertakan atribut SIZE untuk menentukan panjang text field tersebut.

Radio Button

Digunakan bila menghendaki user untuk menilih satu dari beberapa pilihan yang ada. Untuk itu pada tag <input> ditambahkan sebuah atribut type=”radio” untuk menampilkan radio button tersebut. Atribut Value diperlukan untuk memberikan nilai bagi pilihan si user, misalnya VALUE=”PRIA”. Bila perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi elemen form tadi, misalnya name=”sex”.

<form>

<input type=”radio” name=”sex” value=”pria”>PRIA<br>

<input type=”radio” name=”sex” value=”wanita”>WANITA

</form>

Checkbox

Digunakan bila menghendaki user untuk menilih satu atau lebih jawaban dari beberapa pilihan yang ada. Untuk itu pada tag <input> ditambahkan sebuah atribut type=”checkbox” untuk menampilkan checkbox tersebut. Bila perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi elemen form tadi, misalnya name=”mobil”.

<form>

<input type=”checkbox” name=”mobil”>MOBIL SEDAN <br>

<input type=”checkbox” name=”mobil”>SEPEDA MOTOR

</form>

Drop Down Menu

Digunakan bila menghendaki user untuk menilih satu dari beberapa pilihan yang ada. Namun tag yang digunakan adalah <select>. Bila perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi elemen form tadi, misalnya name=”mobil”. Atribut value diperlukan untuk memberikan nilai bagi pilihan si user, misalnya value=”mercy” bila user menjatuhkan pilihan pada mercy.

<form>

<select name=”mobil”>

<option value=”mercy”>mercy

<option value=”bmw”>BMW

<option value=”volvo”>Volvo

<option value=”audi”>Audi

</select>

</form>

Button

Elemen form yang digunakan untuk mengirimkan data yang telah dimasukkan pada elemen form lainnya. Atribut yang digunakan adalah type=”button”, sedangkan atribut value digunakan untuk memberikan teks pada tombol tersebut.

<html>

<body>

<form>

<input type=”button” value=”HALO!”>

</form>

</body>

</html>

Sumber : Praktikum Pemrograman Web STI&K Jakarta

DOWNLOAD SELENGKAPNYA DISINI