MODUL II

FORM DAN TABEL

I. Tujuan
1. Praktikkan dapat memahami penggunaan form dan tabel
2. Praktikkan dapat mengaplikasikannya pada HTML maupun HTML5

II. Teori
2.1 Form
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari
pengunjung. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan
untuk mengirimkan data antar halaman web. Pengunjung dapat memasukan data melalui
elemen-elemen input dan dapat melakukan pemilihan data mengunakan elemen select list. Form
membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan
satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.
Tag yang digunakan untuk membuat form HTML adalah
<form action="#" method="post">
…
</form>
Tag form membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya, yaitu :
1. Atribut pertama adalah action yang berfungsi untuk menjelaskan kemana data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP
yang digunakan untuk memproses isi data form.
2. Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan
dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get
(dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan
terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian.
Methodpost biasanya digunakan untuk data yang lebih sensitif seperti yang berisipassword,
atauregistrasi user. Data hasil formtidak akan terlihatpada browser.

Contoh Method Get:

Contoh Method Post:

2.1.1 Input Elemen pada Form

Elemen form yang paling penting adalah elemen <input>. Elemen <input> digunakan
untuk memilih informasi pengguna. Sebuah elemen <input> dapat bervariasi, tergantung pada
jenis atribut. Elemen <input> dapat dari type text field, checkbox, password, radio button,
submit button, dan lainnya. Atribut type untuk mendefenisikan format yang akan dipakai di
dalam form :
<input type = “ “>
Jenis <input> yang paling umum digunakan :
 Tipe Deskripsi
<input type =”text”> untuk memasukkan suatu nilai text

<input type = “password“> untuk memasukkan suatu password

<input type="radio">.
<input type="checkbox">.
menyediakan beberapa pilihan,hanya satu
pilihan yang bisa dipilih.
menyediakan beberapa pilihan,bisa lebih
dari satu pilihan yang dipilih.

<textarea>...</textarea>
Inputan untuk text lebih dari saru baris
<input type="submit">.
Sebuah tombol submit digunakan untuk
mengirim data dari form ke server.

<input type=”reset">.
Mereset semua input yang ada pada Form

2.1.2 Elemen Pemilihan Data dengan Select List

Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun checkbox
sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat banyak.
Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan negara yang ada di dunia
akan jika ditampilkan pada radio button akan menyebabkan daftar yang dipaparkan sangat
banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti ini lebih baik kita menggunakan
dropdown list.
Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu select
dan option. Elemen select membungkus seluruh elemen option yang ada, untuk membentuk
sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang diinginkan.
Perhatikan kode di bawah:
<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Jadi, beberapa contoh elemen tadi jika digabungkan akan menjadi seperti berikut

Contoh:
<form name=”form1” action=”tujuan.php”
method=”post”><p> Username : <input type="text"
name="nama"><br/><p>Password : <input type="password"
name="nim"><br/><p>Alamat : <textarea name=”alamat”
></textarea><br/><p>Jenis Kelamin :
<input type="radio" name="jk" value="pria">Pria</input>
<input type="radio" name="jk"
value="wanita">Wanita</input><br/><p>Status :
<select><option value=”Menikah”>Menikah
Laboratorium Pemrograman Modul Pemrograman Web I
2.2 Tabel
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom
menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan
kelompok data dalam satu kesatuan. Sebuah tabel mempunyai judul, tempat anda menjelaskan
kolom/baris yang dilibatkan, baris untuk informasi dan sel untuk setiap itemnya.
Elemen-elemen

Elemen Penjelasan

<Table>…</Table> Mendefenisikan sebuah tabel dalam HTML jika atribut border

dituliskan, maka browser akan menampilkan tabel dengan
border.

<Caption>…</Caption> Mendefinisikan tulisan untuk judul tabel. Posisi default dari

judul adalah ditengah pada bagian paling atas tabel. Atribut
align=”bottom” dapat digunakan untuk menempatkan judul
pada bagian bawah tabel. Catatan: judul dapat diberi tag apa saja

<Tr>…</Tr> Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat

mendefinisikan atribut untuk seluruh baris: align(left, center,
right) dan/atau valign (top,middle,bottom).

<Th>…</Th> Mendefiniskan sel header tabel. Secara default teks dalam sel ini
ditebalkan dan ditampilkan di tengah.

<Td>…</Td> Mendefinisikan sebuah sel data tabel. Secara default teks dalam
sel ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel
data table dapat berisi atribut untuk mendefinisikan karakteristik
dari sel dan isinya

Ada beberapa atribut yang digunakan untuk mengubah tampilan table, yaitu sebagai berikut :

Elemen Penjelasan
Align={Left | center | Alignment horizontal untuk sel
right}
Valign={top | middle | Definisi alignment vertical dalam sel
bottom}
Colspan=n untuk membuat sel tabel ‘bersatu’ dengan sel yang lain. Atribut
ini diletakkan pada tag td dari sebuah tabel. Tag td yang
memiliki atribut colspan, akan membuat sel tabel bersatu
dengan kolom disebelahnya. Sedangkan atribut rowspan akan
Rowspan=n
membuat sel tabel bersatu dengan baris dibawahnya. Kedua
Laboratorium Pemrograman Modul Pemrograman Web I

atribut ini membutuhkan nilai (value), dimana nilai ini adalah

seberapa banyak sel tabel yang dibuat ‘bersatu’.
Border untuk mengatur ketebalan dari garis tepi (border) dari tabel
Cellpadding untuk mengatur jarak dari border sisi dalam tabel dengan isi
text tabel itu sendiri.
Cellspacing untuk mengatur jarak antara garis tepi (border) bagian dalam
dan luar.
Width untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag
td, maupun tag col). Jika diletakkan pada tag table, atribut ini
berfungsi untuk mengatur lebar tabel secara keseluruhan.
Namun jika diletakkan pada tag th atau td, atribut ini akan
berfungsi untuk mengatur lebar kolom.
Height untuk mengatur tinggi tabel, dan juga mengatur tinggi masing-
masing baris.

Perhatikan contoh di bawah ini!

<table border=”1” >

<caption> Contoh Tabel </caption>
<th> I </th>
<th> II </th>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>

III. Latihan

1. Buatlah sebuah halaman web yang berisikan tampilan dibawah ini:

Laboratorium Pemrograman Modul Pemrograman Web I

2. Buatlah sebuah halaman web yang berisikan seperti tampilan dibawah ini: