Catatan Form HTML

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>
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>
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>
Hal :6/7
<input type="text" dir=rtl name="textnama" size="40"></td>
</tr>
<td width="23%" height="19" bgcolor="blue">Jenis Kelamin</td>
<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>
<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>
<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>
<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

Catatan Form HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Catatan Form HTML

Uploaded by

Copyright:

Available Formats

FORM

Adalah Input/masukkan dari pengguna yang kemudian diproses untuk

5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan.

8. Kontrol Image digunakan untuk mengolah /mengelola gambar.

You might also like