Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman web.
Sintaks :
<form action=” URL “ method=”get/post” enctype=””>
</form>
Jenis masukan dalam suatu form dibedakan menjadi :
Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa berupa angka atau teks.
Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya banyak.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.
List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.
Button : mendefinisikan tombol untuk melakukan pemrosesan form. o Submit : untuk memenggil url, setelah selesai penginputan form. o Reset : untuk menginisialisasi setiap elemen form.
o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada dalam dokumen HTML.
o Image : digunakan sebagai pengganti button, button yang berbentuk gambar.
Praktikum 1
Ketikkan script berikut : <html>
<head>
<title>formulir</title> </head>
<p><b>Formulir Pendaftaran Kursus</b></p>
<form method="POST" action=" " name=”form_kursus”>
<table width="100%"> <tr>
<td>Nama</td> <td>:</td>
<td><input type="text" name="nama" size="39"></td> </tr>
<tr>
<td>Jenis Kelamin</td> <td>:</td>
<td><input type="radio" value="L" checked name="jkl">Laki-laki
<input type="radio" name="jkl" value="p">Perempuan</td>
</tr> <tr>
<td>Alamat</td> <td>:</td>
<td><input type="text" name="alamat" size="39"></td> </tr>
<tr>
<td>Propinsi</td> <td>:</td>
<td><select size="1" name="propinsi"> <option>Jawa Barat</option>
<td><input type="checkbox" name="kursus" value="inggris">Bahasa Inggris<br>
<input type="checkbox" name="kursus" value="komputer">Komputer</td>
</tr> </table>
<p><input type="submit" value="Submit" name="Bsubmit"><input type="reset" value="Reset" name="Breset"></p>
</form> </body> </html>
Simpan dengan nama form.html
Praktikum 2 (validasi data)
Bukalah kembali file form.html.
Tambahkan script berikut pada bagian head : <script language="VBscript"> <!--
sub Bsubmit_OnClick dim TheForm
Set Theform= document.form_kursus if IsNumerik(TheForm.nama.value) then Msgbox " Input anda salah"
Else TheForm.submit End If End Sub --> </script>
Jalankan dengan browser.
Validasi Data dengan JavaScript:
Ketikkan script berikut : <html> <head> <title>Membuat Validasi</title> <script LANGUAGE="JAVASCRIPT"> function ValidasiForm() {
}
if (document.FormTamu.email.value=="") {
alert("Kolom Email tidak boleh kosong"); return false; } } </script> </head> <body>
<form onSubmit="return ValidasiForm()" name="FormTamu" method="post" action="">
<table class="TABLE" width="307" border="0" cellspacing="0" cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Validasi </th> </tr>
<tr>
<td width="92">Nama </td> <td width="246">
<input name="nama" type="text" id="nama" size="25" maxlength="35"></td>
</tr> <tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat" size="25" maxlength="35"></td>
</tr> <tr>
<td>Email</td>
<td><input name="email" type="text" id="email" size="25" maxlength="35"></td>
</tr> <tr>
<td> </td>
<td><input type="submit" name="Submit" value="Kirim"></td> </tr> </table> </form> </body> </html> Jalankan hasilnya.
MODUL 10 CSS (Cascading Style Sheet)
CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan pengaturan pada seluruh komponen web. CSS bisa digunakan dengan berbagai metode, salah satu diantaranya adalah diletakkan pada bagian Head.
Contoh penggunaan CSS : <html>
<head><title>Membuat form bentuk cantik</title> <style type="text/css"> <!-- INPUT { background-color:#00FF00; border-style:outset; border-width: 2PX; } TEXTAREA { background-color:#00FF00; border-style:outset; border-width: 2PX; } .TABLE { border-style : solid; border-color:#00FF00; border-width: 1PX; } --> </style></head> <body>
<form name="form1" method="post" action="">
<table class="TABLE" width="350" border="0" cellspacing="0" cellpadding="3">
<th colspan="2" scope="col">Form Cantik </th> </tr>
<tr>
<td width="81">Nama </td> <td width="107">
<input name="nama" type="text" id="nama" size="25" maxlength="35"></td>
</tr> <tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat" size="25" maxlength="35"></td>
</tr> <tr>
<td>Email</td>
<td><input name="email" type="text" id="email" size="25" maxlength="35"></td>
</tr> <tr>
<td>Pesan</td>
<td> <textarea name="pesan" cols="25" rows="4" id="pesan"></textarea></td>
</tr> <tr>
<td> </td>
MODUL 11