FORMULIR

AMIROH, S.Kom
SMA DARUL ULUM 2 RSBI JOMBANG

 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.

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

 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.

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

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.

 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 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>

 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 HTML gambar 8.2.
<html>
<head>
<title>Form dengan Submit dan Reset</title>
<body>
<INPUT TYPE="Submit" value="kirim">
<INPUT TYPE="reset" value="batal"SIZE="35">
</FORM>
</body>
</html>

 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.

<html>
<head>
<title>Form dengan Radio Button dan Checkbox</title>
<body>
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>

 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>

 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.

 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”>

 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.

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

 BUATLAH FORM DENGAN TAMPILAN SEBAGAI
BERIKUT :

FORMULIR

Recommended

Recommended

More Related Content

Similar to FORMULIR

Similar to FORMULIR (20)

More from eli priyatna laidan

More from eli priyatna laidan (20)

FORMULIR