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

dan

. Dua atribut yang umum digunakan pada tag

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 Tag digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag dan

. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol

radio, kotak cek, serta tombol SUBMIT dan RESET. Tag 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

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:
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 akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada Action pada tag akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana adalah seperti berikut: Dari kode tersebut maka tombol akan bertuliskan ‘Simpan’ sesuai yang ada di value nya.

Tag … Tag ini dibutuhkan untuk masukan teks yang panjang. Beberapa atribut yang terdapat dalam tag No.<br /> <br /> Atribut Fungsi<br /> <br /> 1.<br /> <br /> NAME<br /> <br /> Menentukan nama teksarea<br /> <br /> 2.<br /> <br /> COLS<br /> <br /> Menentukan lebar teksarea<br /> <br /> 3.<br /> <br /> WRAP<br /> <br /> Menentukan teks secara otomatis akan dilipat atau tidak pada area teks dengan memberikan nilai Hard, off, atau soft<br /> <br /> 4.<br /> <br /> ROWS<br /> <br /> Menentukan panjang teksarea<br /> <br /> 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).<br /> <br /> Tipe Checkbox<br /> <br /> 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.<br /> <br /> Tombol Radio Tombol radio<br /> <br /> digunakan dalam bentuk 2 tombol atau lebih yang<br /> <br /> 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.<br /> <br /> Tag </SELECT> … </SELECT> Tag<br /> <br /> ini<br /> <br /> digunakan<br /> <br /> menggunakan<br /> <br /> kotak<br /> <br /> untuk<br /> <br /> menampilkan<br /> <br /> beberapa<br /> <br /> kombo<br /> <br /> (drop-down).<br /> <br /> Untuk<br /> <br /> pilihan<br /> <br /> menampilkan<br /> <br /> dengan daftar<br /> <br /> pilihannya dapat menggunakan tag <OPTION> dan menyertakan atribut VALUE untuk menyatakan nilai-nilai pilihan. Sedangkan untuk menyatakan nilai<br /> <br /> default<br /> <br /> (nilai<br /> <br /> bawaan<br /> <br /> pada<br /> <br /> saat<br /> <br /> halaman<br /> <br /> ditampilkan)<br /> <br /> dapat<br /> <br /> menggunakan atribut SELECTED. Seperti contoh berikut :<br /> <br /> PENGGUNAAN FRAME Banyak<br /> <br /> halaman<br /> <br /> web<br /> <br /> diinternet<br /> <br /> yang<br /> <br /> menggunakan<br /> <br /> frame.<br /> <br /> Frame<br /> <br /> memungkinkan satu halaman web atau lebih ditampilkan pada sebuah jendela browser.<br /> <br /> Halaman yang berbasis frame dibentuk<br /> <br /> dengan<br /> <br /> 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%,*”><br /> <br /> .... </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.<br /> <br /> 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”><br /> <br /> 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”><br /> <br /> Frame Horisontal HTML juga memungkinkan pembuatan frame horisontal. Caranya cukup mengubah atribut COLS pada <FRAMESET> menjadi ROWS. <FRAMESET ROWS=”10%, *”><br /> <br /> Gabungan Frame Horisontal dan Vertikal Frame horisontal dan vertikal dapat digabung. Untuk membentuknya, diperlukan <FRAMESET> berkalang.<br /> <br /> C. PRAKTEK 1. Ketikkan script berikut, simpan dengan nama formulir.htm. <html> <head> <title>Membuat Form</title><br /> <br /> </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"> Usia : Kurang dari 20
Antara 20 s/d 40
Lebih dari 40

2. Dan juga buatlah script berikut dan simpan dengan nama data.htm Terimakasih telah mengisi data Anda. 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

menjadi 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. Agama

<select> Katholik Kristen Hindu Budha Islam

6. Buatlah dua buah berkas HTML yang isinya sebagai berikut:

Ini frame sebelah kiri lho

Simpan dalam nama framekiri.htm

Ini frame sebelah kanan lho

Simpan dalam nama framekanan.htm Simpan dalam nama frame.htm 7. Jalankan file frame.htm di browser Anda. Perhatikan frame yang terbentuk.

D. LATIHAN 1. Tambahkan pada tag dengan border=0 pada praktek, apa yang terjadi?

2. Ubah atribut tag dari cols menjadi rows.

E. TUGAS Buatlah script html untuk menampilkan formulir seperti berikut: