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

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (7)

Similar to 07 form

Similar to 07 form (20)

More from Amiroh S.Kom

More from Amiroh S.Kom (20)

07 form