MODUL III

MODUL III
MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME
A. MAKSUD DAN TUJUAN
1. MAKSUD
a. Membuat formulir dengan berbagai tipe
b. Membuat tampilan halaman web dengan frame
2. TUJUAN
a. Mahasiswa dapat membuat formulir dengan format yang berbedabeda yang ditampilkan dalam dokumen web
b. Mahasiswa dapat membuat halaman web dengan frame
B. DASAR TEORI
Membuat Formulir
Formulir dibentuk dengan menggunakan pasangan tag <FORM> dan
</FORM>. Dua atribut yang umum digunakan pada tag <FORM> berupa
ACTION dan METHOD.
No.
Atribut
Fungsi
1.
ACTION
Menentukan URL yang akan dijalankan dan menerima
semua masukkan dari formulir. Jika ACTION tidak
disebutkan, informasi akan dikirim ke URL yang sama
dengan Web itu sendiri.
2.
METHOD Menentukan cara pengiriman informasi, yaitu dengan
nilai GET dan POST. GET digunakan jika informasi yang
dikirim menjadi satu dengan URL, sedangkan POST
digunakan jika informasi dikirim secara terpisah dengan
URL
Tag <INPUT>
Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya
berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam
tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol
radio, kotak cek, serta tombol SUBMIT dan RESET. Tag <input> memiliki
sejumlah atribut. Atribut-atributnya dapat dilihat pada tabel dibawah:
No. Atribut
Fungsi
1.
TYPE
Menentukan tipe kotak masukan
2.
NAME
Menentukan nama data
3.
SIZE
Menentukan ukuran kotak masukan
4.
MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan
dalam kotak isian
5
VALUE
Menentukan nilai awal untuk kotak masukan
6
CHECKED
Mengatur agar kotak cek dalam keadaan terpilih pada
keadaan awal
Dan Tipe yang ada dalam atribut TYPE antara lain :
No.
Tipe
Fungsi
1.
TEXT
Sebagai kotak isian untuk memasukkan data
2.
SUBMIT
Membuat tombol. Jika tombol diklik maka URL yang
disebutkan pada atribut ACTION dalam tag <FORM>
akan dijalankan
3.
RESET
Mengembalikan nilai field teks ke default
4.
PASSWORD Membuat teks yang diketikkan diganti dengan tanda *
5.
CHECKBOX
Membuat kotak cek
6.
RADIO
Membuat tombol radio dalam bentuk 2 pilihan atau lebih
yang mana user hanya dapat memilih satu pilihan.
Type Text
Tipe text bermanfaat untuk memasukkan data seperti data seperti nama
orang atau alamat seseorang. Contoh pemakaian:
<input type=”text” name=”namaku” size=”30”
maxlength=”30”>
Pada kode diatas, field teks yang dibentuk diberi nama namaku, dengan
panjang tampilan sebanyak 30 karakter dan jumlah karekter maksimal yang
dapat diisi oleh pemakai sebesar 30 buah.
Tombol SUBMIT dan RESET
Tipe Submit pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol
yang menyebabkan URL yang disebutkan pada Action pada tag <FORM>
akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling
sederhana adalah seperti berikut:
<input type=”SUBMIT” VALUE=”Simpan”>
Dari kode tersebut maka tombol akan bertuliskan ‘Simpan’ sesuai yang ada di
value nya.
Tag <TEXTAREA> … </TEXTAREA>
Tag ini dibutuhkan untuk masukan teks yang panjang. Beberapa atribut yang
terdapat dalam tag <TEXTAREA>
No.
Atribut Fungsi
1.
NAME
Menentukan nama teksarea
2.
COLS
Menentukan lebar teksarea
3.
WRAP
Menentukan teks secara otomatis akan dilipat atau
tidak pada area teks dengan memberikan nilai Hard,
off, atau soft
4.
ROWS
Menentukan panjang teksarea
Tipe Password
Tipe password yang disebutkan pada atribut TYPE pada tag <input> akan
membuat setiap karakter yang diketikkan oleh pemakai pada field ini
disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang
diketikkan pemakai).
Tipe Checkbox
Tipe checkbox berguna untuk membuat kotak cek. Kotak cek adalah suatu
bentuk masukkan yang memungkinkan pemakai mencentang atau tidak
mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk
mouse menunjuk kotak cek.
Tombol Radio
Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang
memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio
diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE
diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang menyatakan
sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Seperti
halnya kotak cek, salah satu tombol radio bisa dilengkapi dengan atribut
CHECKED yang menyatakan bahwa tombol itulah yang menjadi nilai bawaan.
Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol
tersebut diklik.
Tag </SELECT> … </SELECT>
Tag
ini
digunakan
menggunakan
kotak
untuk
menampilkan
beberapa
kombo
(drop-down).
Untuk
pilihan
menampilkan
dengan
daftar
pilihannya dapat menggunakan tag <OPTION> dan menyertakan atribut
VALUE untuk menyatakan nilai-nilai pilihan. Sedangkan untuk menyatakan
nilai
default
(nilai
bawaan
pada
saat
halaman
ditampilkan)
dapat
menggunakan atribut SELECTED. Seperti contoh berikut :
PENGGUNAAN FRAME
Banyak
halaman
web
diinternet
yang
menggunakan
frame.
Frame
memungkinkan satu halaman web atau lebih ditampilkan pada sebuah
jendela browser.
Halaman yang berbasis frame dibentuk dengan
menggunakan pasangan <FRAMESET> dan </FRAMESET>. Di dalam tag
<FRAMESET>, atribut COLS digunakan untuk menentukan lebar masingmasing frame. Sebagai contoh, pendefinisian lebar dua buah frame
ditentukan melalui:
<FRAMESET COLS=”30%,*”>
....
</FRAMESET>
Didalam pasangan tag <FRAMESET>..</FRAMESET> disebutkan berkasberkas HTML yang menyusun frame. Hal ini dikerjakan dengan menggunakan
tag <FRAME>. Didalam tag ini, nama berkas HTML disebutkan melalui atribut
SRC.
Menggunakan Border
Atribut BORDER pada tag <FRAMESET> berguna untuk mengatur ketebalan
garis pemisah antarframe. Jika anda tidak menghendaki adanya pemisah
antar frame, tambahkan:
BORDER=”0” pada tag <FRAMESET>. Contoh:
<FRAMESET COLS=”30%, *” BORDER=”0”>
Menghilangkan Scrolling
Jika anda tidak menghendaki batang penggulung tersebut, Anda bisa
menambahkan
SCROLLING=”NO” pada tag <FRAME> yang menentukan frame kiri. Contoh:
<FRAME SRC=”framekiri.htm” SCROLLING=”NO”>
Frame Horisontal
HTML juga memungkinkan pembuatan frame horisontal. Caranya cukup
mengubah atribut COLS pada <FRAMESET> menjadi ROWS.
<FRAMESET ROWS=”10%, *”>
Gabungan Frame Horisontal dan Vertikal
Frame horisontal dan vertikal dapat digabung. Untuk membentuknya,
diperlukan <FRAMESET> berkalang.
C. PRAKTEK
1. Ketikkan script berikut, simpan dengan nama formulir.htm.
<html>
<head>
<title>Membuat Form</title>
</head>
<body>
Isikan data Pribadi Anda <br>
<form action="data.htm" method="post">
<table>
<tr><td>Nama : </td><td><input type="text" name="nama"
size="30"></td></tr>
<tr><td>alamat : </td><td><textarea cols="30" rows="5"
name="alamat"></textarea></td></tr>
<tr><td>Usia :</td><td>
<input type="radio" name="usia" value="A">Kurang dari
20<br>
<input type="radio" name="usia" value="B">Antara 20
s/d 40<br>
<input type="radio" name="usia" value="C">Lebih dari
40<br></td></tr>
<tr><td colspan="2"><input type="submit"
value="Simpan"></td></tr>
</form>
</body>
</html>
2. Dan juga buatlah script berikut dan simpan dengan nama data.htm
<html>
<head>
<title>Dari input di form</title>
</head>
<body>
Terimakasih telah mengisi data Anda.
</body>
</html>
3. Sekarang jalankan script formulir lalu isikan data dan klik tombol Input.
Perhatikan kotak address dihalaman data.htm. Sekarang gantilah nilai
POST pada atribut method dengan nilai GET, sehingga script <FORM>
menjadi
<form action="data.htm" method="get">
4. sekarang buka halaman formulir.htm di browser, masukkan data dan klik
tombol Kirim. Perhatikan perbedaannya dengan menggunakan POST.
5. Ketikkan script berikut, simpan dan jalankan dibrowser.
<BODY>
Agama
<form action="index.htm" method="post">
<select>
<option value="TI"> Katholik
<option value="TI"> Kristen
<option value="TI"> Hindu
<option value="TI"> Budha
<option value="TK" SELECTED>Islam</option></select>
</form>
</BODY>
6. Buatlah dua buah berkas HTML yang isinya sebagai berikut:
<html>
<head>
<title>Frame kiri</title>
</head>
<body bgcolor="white">
<h1>Ini frame sebelah kiri lho</h1>
</body>
</html>
Simpan dalam nama framekiri.htm
<html>
<head>
<title>Frame kanan</title>
</head>
<body bgcolor="white">
<h1>Ini frame sebelah kanan lho</h1>
</body>
</html>
Simpan dalam nama framekanan.htm
<html>
<head>
<title>Contoh penggunaan frame</title>
</head>
<frameset cols="10%, *">
<frame src="framekiri.htm">
<frame src="framekanan.htm">
</frameset>
</html>
Simpan dalam nama frame.htm
7. Jalankan file frame.htm di browser Anda. Perhatikan frame yang
terbentuk.
D. LATIHAN
1. Tambahkan pada tag <frameset> dengan border=0 pada praktek, apa
yang terjadi?
2. Ubah atribut tag <frameset> dari cols menjadi rows.
E. TUGAS
Buatlah script html untuk menampilkan formulir seperti berikut: