TIB22 – PERANCANGAN

PEMROGRAMAN WEB
TABEL DAN FORMULIR
Pertemuan ke-5 dan 6
 Sub-CPMK
Mahasiswa mampu membuat tabel dan form pada
halaman web (C3, A3)

Materi
1. Pengenalan Tabel
2. Struktur Tag Tabel
3. Pengenalan Form
4. Struktur Tag Form
5. Jenis-Jenis Input dan Option dalam Form
1. Pengenalan Tabel
 1.1 Tabel
• Tabel merupakan cara untuk menampilkan
informasi dalam bentuk sel yang terdiri atas baris
dan kolom.
• Sebuah tabel dibagi menjadi baris-baris, dan tiap
baris dibagi ke dalam cell-cell.
 1.2 Fungsi Tabel
• Tabel digunakan untuk membuat tampilan
menjadi lebih rapi.

• Contohnya seperti untuk membuat formulir atau

menampilkan data dalam bentuk tabel.

• Sebelum adanya CSS, tabel juga dapat digunakan

untuk membuat layout website.
2. Struktur Tag Tabel
 2.1 Tag Tabel
• Tabel pada HTML dapat dibuat dengan
menggunakan tag

<table> . . . </table>

• Judul tabel HTML dapat menggunakan tag

<caption> . . . </caption>
 2.1 Tag Tabel (Lanj..)
• Tabel dibagi menjadi dua bagian yaitu sebagai
berikut
– Header tabel: <thead> . . . </thead>
– Body tabel: <tbody> . . . </tbody>

• Menambah baris dan data pada tabel

menggunakan tag:
– Baris: <tr> . . . </tr>
– Data pada header tabel: <th> . . . </th>
– Data pada body tabel: <td> . . . </td>
2.2 Struktur Tag Tabel
 2.3 Atribut Tabel
• Atribut yang dapat diberikan ke tag <table> sebagai
berikut
Atribut Fungsi
cellspacing Menentukan jarak antar sel
cellpadding Menentukan jarak isi sel dengan bordernya
width Menentukan lebar tabel
height Menentukan tinggi tabel
bgcolor Memberi warna background pada tabel
align Menentukan perataan tabel
border Menentukan tebal border tabel
 2.3 Atribut Tabel (Lanj..)
• Atribut juga dapat diberikan pada baris dan sel tabel
yaitu pada tag <tr> ataupun <td>
Atribut Fungsi
align Menentukan perataan text pada isi sel
valign Menentukan perataan text secara vertical
width Menentukan lebar sel
height Menentukan tinggi sel
bgcolor Member warna background pada sel
rowspan Menggabungkan sel baris berikutnya pada
kolom yang sama
colspan Menggabungkan sel kolom berikutnya pada
kolom yang sama
 2.4 Contoh Tabel
Code
 2.4 Contoh Tabel (Lanj..)
Output
2.4 Contoh Tabel (Lanj..)

Code
 2.4 Contoh Tabel (Lanj..)
Output
 2.5 Tabel Sebagai Layout
• Contoh tabel yang digunakan sebagai Layout
3. Pengenalan Form
 3.1 Form
• Formulir atau biasa disebut sebagai Form dalam web
digunakan untuk menginput data oleh pengguna
pada website.
• Data yang diinputkan biasanya akan disimpan pada
database.
• Contoh form yang biasa ada pada website seperti
form login, form registrasi user, form komentar, dan
lain sebagainya.
• Proses pengolahan data dari form akan dibahas pada
materi JavaScript, PHP dan MySQL.
4. Struktur Tag Form
 4.1 Tag dan Atribut
Form
• Form pada HTML dapat dibuat dengan
menggunakan tag <form> . . . </form>
• Tag form memiliki beberapa atribut yaitu
Atribut Fungsi
name Mengatur nama form
action Menentukan nama file yang akan
memproses data yang dikirim
method Mengatur metode pengiriman data, bisa
diisi “get” atau “post”
 4.2 Method Get
• Hanya dapat mengirim data dalam ukuran
kecil.
• Mengirimkan data sebagai bagian dari URL
tersebut sehingga data yang dikirim akan
ditampilkan pada address bar browser.
 4.3 Method Post
• Dapat mengirim data dalam ukuran besar.
• Mengirimkan data dengan menyembunyikan
data dalam HTTP headers sehingga data yang
dikirim tidak ditampilkan pada address bar
browser.
4.4 Struktur Tag Form
5. Jenis-Jenis Input dan Option
Dalam Form
 5.1 Tag Label
• Tag <label> . . . </label> digunakan untuk
membuat label dari sebuah alat input

• Tag ini biasanya ditulis sebelum tag <input>

• Atribut yang biasa digunakan dalam tag ini

adalah for yang diisi dengan nama id dari alat
input yang diberi label.
 5.2 Tag dan Atribut
Input
• Tag <input> digunakan untuk membuat alat input
dengan berbagai macam tipe.
• Atribut yang dapat digunakan pada tag input:
5.3 Jenis Tipe Input
5.3 Jenis Tipe Input
(Lanj..)
5.3 Jenis Tipe Input
(Lanj..)
 5.4 Contoh Form Input
Code
 5.4 Contoh Form Input
(Lanj..)
Output
 5.5 Tag Select
• Tag <select> . . . </select> digunakan untuk
membuat input berupa dropdown.
• Atribut yang bisa digunakan sama dengan atribut tag
<input>
• Untuk menambahkan pilihan menggunakan tag
<option> . . . </option> yang ditulis di dalam tag
<select> . . . </select>
 5.6 Contoh Select
Code

Output
 5.6 Contoh Select
(Lanj..)
Code Output
 5.7 Tag Textarea
• Tag <textarea> . . . </textarea> digunakan untuk
membuat input yang dapat diisi dengan text dalam
jumlah banyak dan lebih dari satu baris, misalnya
untuk input pesan, komentar, berita, dan lain-lain.
• Atribut yang dapat digunakan sama dengan atribut
tag <input>, namun ada beberapa tambahan sebagai
berikut
 5.8 Contoh Textarea
Code
 5.8 Contoh Textarea
Output
 Ringkasan
• Tabel merupakan cara untuk menampilkan
informasi dalam bentuk sel yang terdiri atas
baris dan kolom.

• Formulir atau biasa disebut sebagai Form

dalam web digunakan untuk menginput data
oleh pengguna pada website.
Terima Kasih