Anda di halaman 1dari 7

FORM

Adalah Input/masukkan dari pengguna yang kemudian diproses untuk


mendapatkan hasil yang diinginkan pengguna, proses penyimpanan, proses sunting
atau edit, proses hapus dan browse.
Sintaksnya:
.....
<Form Name=”Nama_Form” Method=”Post/Get” action=”URL”>
.....
</Form>
Keterangan:
1. Name adalah nama form yang sedang digunakan.
2. Method adalah metode yang digunakan dalam penyimpanan ke dalam server.
3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam
server.
Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input/masukkan
dari pengguna. Kontrol Form terdiri dari :

1. Kontrol Text digunakan untuk memberikan input atau masukkan berupa kotak
isian.
Sintaksnya :
<Input Type=”Text” [Properti]>
Ket. Property/atribut:
 Name : Nama dari kontrol text
 Size : Ukuran dari kontrol text
 Value : Text yang tertulis pada kontrol text
 Maxlength : Panjang maximal karakter yang diijinkan
 Style : Pengaturan Style dalam kontrol text, nilainya bisa berupa font,
paragraf, numbering, border, position.
 Dir : Pengaturan arah text dari kontrol text, seperti rlt(right to
left)/kanan ke kiri dan kebalikannya yaitu ltr(left to right).
Contoh :
....
<body>
<form>
Nama : <input type=”text” name=”text1” size=”40” maxlength=”50” style=”font-
family:Comic San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....
Hasil :

2. Kontrol Password adalah sebuah kontrol html yang penggunaanya mirip dengan
kontrol text akan tampil dengan text biasa, sedangkan kontrol password akan
ditampilkan dengan tanda asteris(*)atau ●.

Hal :1/7
Sintaksnya :
<Input Type=”Password” [Properti]>
Ket. Properti:
 Name
 Size
 Value
 Maxlength
 Dir
Contoh:
....
<body>
<form>
PASSWORD :<input type=”password” name=”pass” size=”20” maxlength=”50”><br>
</form>
</body>
....
Hasil :

3. Kontrol Radio digunakan untuk menampilkan salah satu pilihan dari satu
kumpulan/grup pilihan.
Sintaksnya :
<Input Type=”Radio” [Properti]>
Ket Properti:
- Name
- Value
- Checked adalah Kontrol radio yang menjadi pilihan
Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Jenis Kelamin Anda :<br>
<input type=”Radio” name=”OptJenis” Value=”Pria” checked>Pria<br>
<input type=”Radio” name=”OptJenis” Value=”Wanita” >Wanita<br>
</form>
</body>
....
Hasil :

4. Kontrol CheckBox digunakan untuk memilih beberapa pilihan dari pilihan yang
tersedia. Pengunaanya sama dengan dengan kontrol radio, perbedaanya
terletak pada pilihan yang dimungkinkan lebih dari satu.
Sintaksnya:
<Input Type=”CheckBox” [Properti]>
Ket. properti:
Hal :2/7
- Name
- Value
- Checked
Contoh:
....
<body>
<form>
<font face=”Comic San Ms”>
Hobby Anda Adalah :<br>
<input type=”CheckBox” name=”C1” Value=”Olah Raga” >Olah Raga<br>
<input type=”CheckBox” name=”C2” Value=”Musik” >Musik<br>
<input type=”CheckBox” name=C3 Value=”Jalan-Jalan” >Jalan-Jalan<br>
<input type=”CheckBox” name=C4 Value=”Nonton” >Nonton<br>
</form>
</body>
....
Hasil:

5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan.


Sintaksnya:
<select [properti]>
...<option> item 1
...<option> item2
....
....
</select>
Ket. Properti:
- Name
- Value
- Selected adlah item yang dipilih
- Size adalah banyaknya item yang ditampilkan pada layar monitor(defaultnya 1).
- Multiple adalah Tampilan dari drop down box, seperti tombol spinner.
Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Agama Yang Ada Di Indonesia Adalah :<br>
<Select size=”1” name=”CBOAgama” >
<option selected value=”Islam”>Islam</option>
<option value=”Kristen”>Kristen</option>
<option value=”Katolik”>Katolik</option>
<option value=”Hindu”>Hindu</option>
<option value=”Budha”>Budha</option>
<option value=”Keyakinan”>Keyakinan</option>

Hal :3/7
</select></font></p>
</form>
</body>
.....
Hasil:

6. Kontrol Text Area merupakan kontrol text yang dapat menliskan text lebih banyak
karena memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text.
Sintaksnya:
<TextArea [properti]>
....Isi text area....
</textarea>
Ket. Properti:
- Name
- Value
- Cols adalah jumlah kolom dari kontrol text area
- Rows adalah jumlah baris dari kontrol text area
- Maxlength
- Dir
Contoh :
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Komentar Anda:<BR>
<TEXTAREA NAME = "komentar"
ROWS = "5" COLS = "40"
WRAP>123...ABC
</TEXTAREA>
<BR>
</FORM>
</BODY>
</HTML>
Hasil:

7. Kontrol Button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah
prosedur / event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button,
Submit, Reset. Button digunakan untuk mengontrol atau menjalankan suatu
prosedur atau event dari VBScript. Submit digunakan utnuk mengirim data-data ke
server (lebih banyak berhubungan dengan pemrogramman yang berbasis Server
Side seperti ASP), Sedangkan Reset digunakan untuk meghapus data-data yang
ada pada suatu form.
Hal :4/7
Sintaksnya:
<Input Type=”Button” [properti]>
<Input Type=”Submit” [properti]>
<Input Type=”Reset” [properti]>
Ket. Properti:
- Name
- Value
Contoh:
....
<BODY>
<FORM>
Cobalah untuk mengklik tombol berikut<BR>
<INPUT TYPE = "BUTTON" VALUE = "Ke Sebelumnya" ONCLICK = "self.history.back();">
<br>
Button/Tombol Submit:
<br>
<INPUT TYPE = "Submit" VALUE = "Ok">
<br>
Button/Tombol Reset:
<br>
<INPUT TYPE = "Reset" VALUE = "Cancel">
<BR>
</FORM>
</BODY>
....
Hasil:

8. Kontrol Image digunakan untuk mengolah /mengelola gambar.


Sintaksnya:
<Input Type=”Image” [properti]>
Ket properti:
- Align : meratakan teks di sekeliling gambar
- Alt : teks yang muncul jika tombol mouse berada diarea gambar
- Border : Batas tepi dari kontrol image
- Heigth : Ketinggian dari gambar
- Hspace : Pengatran batas(margin) horisontal gambar
- Ismap : Penentuan gambar sebagai imagemap
- Lowsrc : Pengaturan gambar dengan resolusi rendah
- Name
- Src
- Usemap :Penentuan gambar sebagai imagemap
- Vspace : Pengaturan batas(margin) vertikal gambar
- Width : Lebar dari gambar

Hal :5/7
Contoh :

Kode Programnya :
<html>
<head>
<title>Buku Tulis</title>
</head>
<body text="white">
<form method="POST" action="Simpan.ASP">
<table text="white" cellpadding="10" cellspacing="1" width="100%" height="100">
<tr>
<td width="100%" colspan="2" align="center" heigth="48" bgcolor="red">
<font face="Microsoft San Serif" size="6" color="white">Buku Tamu</font></td>
</tr>
<tr>
<td width="23%" heigth="19" bgcolor="blue">Password</td>
<td width="77%" heigth="19" bgcolor="blue">
<input type="password" name="passwd" size="40"></td>
</tr>
<tr>
<td width="23%" heigth="19" bgcolor="blue">Nama lengkap</td>
<td width="77%" heigth="19" bgcolor="blue">
Hal :6/7
<input type="text" dir=rtl name="textnama" size="40"></td>
</tr>
<td width="23%" height="19" bgcolor="blue">Jenis Kelamin</td>
<td width="77%" heigth="19" bgcolor="blue">
<input type="radio" value="Pria" checked name="OptJenis">Pria
<input type="radio" value="Wanita" name="OptJenis">Wanita
</td>
</tr>
<tr>
<td width="23%" height="19" bgcolor="blue">Agama</td>
<td width="77%" height="19" bgcolor="blue">
<select size="1" name="cboagama">
<option selected value="Islam">Islam</option>
<option value="Katolik">Katolik</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Keyakinan">Keyakinan</option>
</select></td>
</tr>
<tr>
<td width="23%" height="19" bgcolor="blue">Hobby</td>
<td width="33%" height="19" bgcolor="blue">
<input type="checkbox" name="c1" value="ON">Sport
<input type="checkbox" name="c2" value="ON">Nonton</td>
</tr>
<tr>
<td width="23%" height="19" bgcolor="blue"></td>
<td width="77%" height="19" bgcolor="blue">
<input type="checkbox" name="c3" value="ON">Musik
<input type="checkbox" name="c4" value="ON">Panjat Tebing</td>
</tr>
<tr>
<td width="23%" height="16" bgcolor="blue">Komentar</td>
<td width="77%" height="16" bgcolor="blue">
<textarea wrap rows="6" name="S1" cols="60"></textarea></td>
</tr>
<tr>
<td width="100" heigth="51" bgcolor="blue" colspan="2">
<p align="center">
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">
</td>
</tr>
</table>
</form></body></html>

Hal :7/7