07 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 | Digunakan untuk memilih tipe
check box | radio | image | informasi yang ingin didapatkan
submit | reset “ 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>
<INPUT TYPE="Submit" value="kirim">
<INPUT TYPE="reset" value="batal"SIZE="35">
</FORM>
</body>
</html>

Radio Button dan CheckkBox
• 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.

SOURCE CODE
<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>

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

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.

TUGAS
• BUATLAH FORM DENGAN TAMPILAN SEBAGAI
BERIKUT :

07 form

More Related Content

What's hot

Viewers also liked

Similar to 07 form

More from Amiroh S.Kom

07 form