MATERI WEB & HTML Bag 3

BAB 3
MEMBUAT FORM & FRAME

3.1. FORM

Untuk membuat homepage yang interaktif, kita perlu menggunakan form. Form dapat digunakan untuk meminta input dari pengunjung tentang apapun. Baik mengisi angket, mengisi polling, mengisi guestbook juga mengisi form pembelian barang.

Semua aplikasi tersebut menggunakan prinsip pembuatan form. Form selalu diawali dengan tag FORM dan ditutup dengan tag /FORM. Di antara tag pembuka dan penutup FORM tadi dapat diisi tag INPUT yang jenisnya ada beberapa macam. Formatnya seperti berikut:

<FORM NAME="biodata" METHOD="POST" ACTION="simpan.php">

<INPUT TYPE="text" SIZE="30">

</FORM>

keterangan:

• FORM: kata ini akan menjelaskan kepada komputer bahwa anda sedang membuat form.
  
• METHOD: kata ini menentukan tentang bagaimana informasi akan dikirim. Kita memilih dengan cara "POST", artinya data langsung kita kirim begitu saja.
  
• ACTION: ke mana data akan dikirim. Pada form di atas kita menggunakan "simpan.php" yang berarti data akan dikirim ke alamat tersebut.
  
• INPUT: ini mendefinisikan bahwa kita sedang meminta input (masukan) kepada pengunjung situs.
  
• TYPE: ini menjelaskan jenis input yang kita minta. Di sini kita memilih jenis "text" yang akan menampilkan satu baris kotak input seperti terlihat di atas.
  
• NAME: yang ini berguna untuk memberikan nama kepada input ini. Kita bebas memberi nama apapun, tidak harus "nama" seperti yang tertulis di atas. NAME ini berguna untuk keperluan memproses input ini lebih lanjut.
  
• SIZE: ini adalah panjang kotak input di atas.

jenis-jenis (type) input yang lain adalah:

• CHECKBOX Kita dapat memilih lebih dari satu. Bentuk tag dari CHECKBOX adalah:

<INPUT TYPE="checkbox" NAME="hobi" VALUE="membaca">

• untuk RADIO dan CHECKBOX kita dapat memberikan pilihan awal ( tampilan default ) dengan menggunakan kata CHECKED di dalam tag INPUT.
  
• PASSWORD Antara text dengan password tidak ada perbedaan apapun kecuali pada password apa yang kita ketikkan ditampilkan dalam bentuk * sehingga tidak terbaca. Bentuk tag dengan type password adalah sebagai berikut :

     <INPUT TYPE="PASSWORD" NAME="kunci" SIZE="10" VALUE=" ">

RADIO Kita hanya diizinkan memilih satu pilihan. Berikut ini adalah bentuk perintah untuk RADIO:
 <INPUT TYPE="RADIO" NAME="jenis_kelamin"  VALUE="pria">
VALUE digunakan untuk memberikan nilai yang isinya tergantung pilihan kita.
RESET Apabila tombol ini diklik, maka mereset semua isian kita di form, kembali ke defaultnya. Kode untuk RESET adalah sebagai berikut:
 <INPUT TYPE="RESET" NAME="reset" VALUE="hapus">
SUBMIT Submit adalah tombol yang apabila diklik, isian di form akan langsung dikirim menggunakan cara tergantung atribut METHOD dan ACTION di dalam tag
Berikutnya SUBMIT memiliki kode seperti ini:
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Kirim ">

SELECT berbeda dengan RADIO dan CHECKBOX karena tidak memakai tag INPUT, tapi langsung memakai tag SELECT. Dan juga penggunaan SELECT harus ditutup dengan tag /SELECT. Sama seperti pada RADIO dan CHECKBOX, pada SELECT kita juga dapat melakukan pilihan awal ( tampilan default ), dengan menambahkan kata SELECTED pada tag OPTION seperti ini:

OPTION SELECTEDTidak ada di pilihan

• TEXTAREA Bentuk umum tag textarea adalah sebagai berikut:

<TEXTAREA> tulisan yang akan ditampilkan </TEXTAREA>

tulisan yang akan ditampilkan

Berbeda dengan text, kali ini kita tidak menggunakan tag INPUT, tetapi langsung menggunakan tag TEXTAREA. Juga sekarang kita harus menutup dengan tag . Di antara tag TEXTAREA dan tag /TEXTAREA kita dapat menuliskan apapun yang nantinya akan ditampilkan di dalam kotak yang tersedia. Atribut yang bisa kita atur di atas adalah ROWS yang akan menentukan jumlah baris dan COLS yang akan menentukan jumlah kolom. Juga ada atribut NAME yang fungsinya memberi nama, sama seperti pada input text.

3.2. FRAME
Contoh yang akan kita buat seperti berikut:
header.html
menu.html
isi.html

Dalam satu layar monitor sebenarnya kita menampilkan tiga buah file yang berbeda, yaitu file judul.html, file menu.html dan file isi.html. 
Agak mirip dengan waktu pembahasan tabel (membuat layout halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan frame ini tiga file. Disini tidak ada tag "BODY" karena file induk memang tidak memerlukannya. 
Formatnya seperti berikut:
<FRAME COLSPAN=" " ROWSPAN=" ">
......
</FRAME>
Atribut-atribut yang dapat digunakan:
BORDERCOLOR berguna untuk menentukan warna pembatas antar frame.
BORDER yang menentukan tebal batas antar frame.
ROWS berfungsi membagi bidang. Bedanya ROWS membagi menjadi beberapa baris bisa dalam persen maupun dalam pixel.
COLS akan membagi bidang menjadi beberapa kolom. Kita dapat menulis COLS="30%,70%" untuk membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%.
SRC adalah atribut yang utama, yaitu memanggil file yang akan mengisi frame. Pada file indeks.html, dengan atribut SRC kita telah memanggil file header.html, menu.html dan file isi.html.