10.1 Form

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.

clip_image002

Gambar 10.1 Contoh Form

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.

Perintah untuk membuat form yaitu :

<FORM [METHOD=”POST/GET” ACTION=”URL”>

<INPUT>

<INPUT>

</FORM>

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selankjutnya.

10.2 Elemen-elemen pada Form

Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form :

Elemen Atribut fungsi
INPUT

Top of Form

Bottom of Form

 TYPE Bentuk masukan. Diisi dengan TEXT atau PASSWORD
NAME Nama komponen input
VALUE Isi/nilai dari komponen input
SIZE Panjang komponen input
MAXLENGTH Batasan panjang penulisan isi input
INPUT

Top of Form

Bottom of Form

 TYPE Bentuk masukan RADIO
NAME Nama komponen input radio
VALUE Pemberian nilai pada radio
CHEKED Memilih salah satu radio
INPUT

Top of Form

Bottom of Form

 TYPE Bentuk masukan CHECKBOX
NAME Nama komponen input checkbox
VALUE Pemberian nilai pada checkbox
CHEKED Memilih checkbox
SELECT

Top of Form

Bottom of Form

 NAME Nama komponen select /pull down list
OPTION Pilihan dalam list
VALUE Isi pada list
SELECTED Option yang dipilih
SIZE Ukuran list
TEXTAREA

Top of Form

Bottom of Form

 TYPE Bentuk komponen TEXTAREA
NAME Nama komponen textarea
ROWS Jumlah baris pada textarea
COLS Jumlah kolom pada textarea
INPUT TYPE Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET
VALUE Judul pada tombol

Contoh pembuatan form

<HTML>

<HEAD>

<TITLE>Contoh Membuat Form</TITLE></HEAD>

<BODY>

<H1 ALIGN=”CENTER”>FORM PENDAFTARAN ONLINE</H1>

<HR size=3 color=”black”>

<FORM METHOD=”POST” ACTION=”contohform.htm”>

<TABLE>


<TR>

<TD><B>Nama :</B></TD>

<TD><INPUT TYPE=”Text” NAME=”varNama” SIZE=”15″></TD>

</TR>

<TR>

<TD><B>Alamat :</B></TD>

<TD><INPUT TYPE=”Text” NAME=”varAlamat” SIZE=”30″></TD>

</TR>

<TR>

<TD><B>Agama :</B></TD>

<TD><SELECT NAME=”agama” SIZE=”1″>

<OPTION>Islam</OPTION>

<OPTION>Kristen</OPTION>

<OPTION>Budha</OPTION>

<OPTION>Hindu</OPTION>

</SELECT> </TD>

</TR>

<TR>

<TD><B>Password :</B></TD>

<TD><INPUT TYPE=”Password” NAME=”varPassword” SIZE=”10″></TD>

</TR>

</TABLE>

<B>Jenis kelamin: </B><INPUT CHECKED TYPE=”Radio” NAME=”Kelamin” VALUE=”Pria”>Pria

<INPUT TYPE=”Radio” NAME=”Kelamin” VALUE=”Wanita”>Wanita

<BR>

<B>Hobi:</B><BR>

<INPUT TYPE=”Checkbox” NAME=”Kelamin” VALUE=”Soccer”>Sepakbola

<INPUT CHECKED TYPE=”Checkbox” NAME=”Hobi” VALUE=”Badminton”>Bulutangkis

<INPUT TYPE=”Checkbox” NAME=”Hobi” VALUE=”Computer”>Komputer <BR>

<INPUT TYPE=”Checkbox” NAME=”Hobi” VALUE=”Game”>Permainan video

<INPUT CHECKED TYPE=”Checkbox” NAME=”Hobi” VALUE=”Internet”>Internet

<BR>

<B>Komentar</B><BR>

<TEXTAREA Cols=”30″ Rows=”5″ Name=”komentar”></TEXTAREA><BR>

<INPUT TYPE=”Submit” VALUE=”Send info”> <INPUT TYPE=”Reset” VALUE=”Clear form”>

</FORM>

</BODY>

</HTML>

Hasil pembuatan form dapat dilihat sebagai berikut :

clip_image004

10.2 Form Pendaftaran

VN:F [1.6.8_931]
Rating: 6.7/10 (9 votes cast)
VN:F [1.6.8_931]
Rating: 0 (from 0 votes)