11 form

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 :

11 form

More Related Content

Viewers also liked

Similar to 11 form

More from Amiroh S.Kom

11 form