Form Optimal

PENGERTIAN
 Form adalah suatu cara untuk mejadikan
halaman web menjadi lebih interaktif , karena
akan mendaptakan umpan balik dari
pengunjung situs web.
 Form dapat digunakan untuk membuat buku
tamu, formulir pemesanan, survey, meminta
komentar dan lain sebagianya.

Cara Membuat Form
 Untuk membuat sebuah form, Tag yang
digunakan adalah <FORM> … </FORM>.
 Sedangkan Atribut yang paling umum
dipakai adalah METHOD= dan ACTION=.

Penulisan :
<FORM METHOD=”post | get”
ACTION=”alamat _URL”>
….
….
</FORM>

 Di mana METHOD adalah atribut yang
digunakan untuk menunjukkan metode
pengiriman informasi ke web server.
 Dalam hal ini ada 2 pilihan, POST yang
digunakan untuk mengirimkan data yang
dimasukkan oleh user dan GET
digunakan untuk mendapatkan data dari
halaman lain. Metode GET ini hampir
tidak pernah digunakan.

 Sedangkan atribut ACTION digunakan untuk
menentukan ke mana informasi form akan
diserahkan. Jika Anda menggunakan CGI SCRIPT
pada web server, maka tentukanlah URL-Script nya.
 Pada bab ini semua contoh akan menggunakan
metode POST ke sebuah alamat e-mail. Ini adalah
cara yang paling mudah karena kita tidak perlu
mempelajari script apapun.

TAG INPUT
 Digunakan untuk mendapatkan informasi dari
pengunjung.
 Penulisan :
<INPUT TYPE=”text” NAME=”nama” VALUE=”isi item”
SIZE=”angka” MAXLENGTH=”angka”>

Keterangan Atribut
Atribut Fungsi
Type = “text | hidden |
check box | radio | image |
submit | reset “
Digunakan untuk memilih tipe
informasi yang ingin didapatkan
dari pengunjung.
Name=”nama” Untuk memberi nama item
informasi.
Value= “isi item” Untuk mengisi item informasi
default.
Size=” Angka” Untuk menentukan panjang
kolom.
Maxlength=”angka” Untuk menentukan panjang isian
yang dapat diketik oleh
pengunjung.

TEXT BOX (KOTAK TEKS)
 Untuk mendapatkan informasi-informasi kecil dari
pengunjung, misalnya nama, dan alamatnya, kita
dapat menggunakan tipe input text.
 Penulisan :
<INPUT TYPE=”text” NAME=”nama”
SIZE=”angka”>

SOURCE CODE NYA
Source HTML gambar 8.1.
<html>
<head>
<title>Form dengan Text</title>
<body>
<FORM METHOD="postt" ACTION="mero@plasa.com">
Nama Anda : <INPUT TYPE="text" NAME="nama"
SIZE="35"><br>
</FORM>
</body>
</html>

Submit dan Reset
 Tombol Submit dan Reset biasanya selalu kita
sertakan dalam sebuah form.
 Tombol submit ini digunakan untuk
mengirimkan informasi yang telah dimasukkan.
 Sedangkan tombol Reset digunakan untuk
mambatalkan seluruh pengisian. Jika tombol ini
ditekan maka semua data atau informasi yang
telah diisikan akan dihapus semua.
Penulisan :
<INPUT TYPE=”submit” VALUE=”isi item”>
<INPUT TYPE=”reset” VALUE=”isi item”>

SOURCE CODE
Source HTML gambar 8.2.
<html>
<head>
<title>Form dengan Submit dan Reset</title>
<body>
<FORM METHOD="postt" ACTION="mero@plasa.com">
<INPUT TYPE="Submit" value="kirim">
<INPUT TYPE="reset" value="batal"SIZE="35">
</FORM>
</body>
</html>

Password Boxes (Kotak
Password)
 Kita dapat menggunakan kotak password untuk
mengumpulkan informasi dari seseorang.
 Pada saat pemakai memasukkan informasi ke
dalam kotak password, informasi disembunyikan
dari pemakai dan akan diganti dengan asteriks
(*) atau bullet.
 Fasilitas ini digunakan dalam web site yang
memerlukan password untuk memasukkan
kode-kode tertentu seperti Credit Card dan
lain-lain.

Penulisan
<INPUT TYPE=”password” NAME=”nama” SIZE=”angka”>
Di mana angka adalah ukuran lebar kotak password.

 Dalam form, pengunjung juga diberi kesempatan
untuk memilih dalah satu dari sejumlah pilihan
dengan menggunakan tombol radio button atau
check box.
 Penulisan:
<INPUT TYPE=”radio” NAME=”nama” VALUE=”isi item”>Teks
<INPUT TYPE=”checkbox” NAME=”nama” VALUE=”isi item”>Teks
 Di mana VALUE adalah nilai yang akan dikirim ke
server bersama dengan NAME. Sedangkan Teks
adalah teks yang ditampilkan pada browser.
Radio Button dan CheckBox

SOURCE CODE
<html>
<head>
<title>Form dengan Radio Button dan Checkbox</title>
<body>
<FORM METHOD="post" ACTION="mero@plasa.com">
Jenis Kelamin : <br>
<INPUT TYPE="radio" NAME="jenis“ >Pria<br>
<INPUT TYPE="radio" NAME="jenis">Wanita <br><br>
Hobby Anda :<br>
<INPUT TYPE="checkbox" NAME="hobby">Makan<br>
<INPUT TYPE="checkbox" NAME="hobby">Belajar<br>
<INPUT TYPE="checkbox" NAME="hobby">Chatting<br>
<INPUT TYPE="checkbox" NAME="hobby">Browsing<br>
</FORM>
</body>
</html>

Menu Drop Down
 Dengan menu drop down, pemakai memilih informasi
dari sekumpulan pilihan yang telah ditentukan.
 Pada saat pemakai memilih menu, daftar pilihan akan
muncul sebagai menu drop down. Menu dinyatakan
dalam Tag <SELECT>…</SELECT> sedangkan daftar
pilihannya dinyatakan dengan <OPTION> yang
diletakkan di antara kedua tag tersebut.
Penulisan :
<SELECT NAME=”nama” SIZE=”angka”>
<OPTION SELECTED>…
<OPTION>…
<OPTION>…
</SELECT>

KETERANGAN
 Atribut SIZE pada tag <SELECT> di atas digunakan
untuk mengatur ukuran tampilan menu drop
down-nya.
 Sebagai contoh, jika kita mengisikan angka 3 pada
atribut SIZE, maka akan ditampilkan ke layar
secara default adalah tiga pilihan pertama.
 Sedangkan atribut SELECTED pada tag
<OPTION> digunakan untuk memilih suatu item
yang akan ditampilkan secara default.

Mendapatkan Komentar /
Text Area
 Untuk mendapatkan suatu komentar dari pengunjung,
kita harus menyediakan suatu area yang cukup untuk
menulis komentar. Untuk keperluan ini digunakan tag
<TEXTAREA>…</TEXTAREA>
Penulisan:
<TEXTAREA NAME=”nama” ROWS=”jumlah_baris”
COLS=”jumlah_kolom”>

TUGAS
 BUATLAH FORM DENGAN TAMPILAN SEBAGAI BERIKUT :

Form Optimal

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Form Optimal

Similar to Form Optimal (20)

More from Amiroh S.Kom

More from Amiroh S.Kom (20)

Form Optimal