Tugas review materi pertemuan 4 ( cara membuat from dengan HTML )
NIM : 13.12.7131
Kelas : 13-S1SI-01
Tugas review materi pertemuan 4
Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web.
Properti masukan pada elemen form:
1. Text box <input type="text">
- Text box Digunakan untuk memasukan input yang berupa teks.
- Size = ukuran dari textbox dalam karakter
- Maxsize = maksimal jumlah karakter yang dapat di input
- Name = nama variable yang dikirim ke suatu aplikasi
- Value = akan menampilkan isinya sebagai nilai default
2. Password <input type="password">
- Password Digunakan untuk memasukan password
- Size = ukuran textbox dalam karakter
- Maxsize = maksimal jumlah karakter yang dapat di input
- Name = nama variable yang dikirim ke suatu aplikasi
3. Hidden <input type"hidden">
- Hidden Digunakan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
- Name = nama dari variable yang dikirim ke suatu aplikasi
- Value = nilai dari variable
4. Check Box <input type="checkbox">
- Check box digunakan untuk dapat memilih lebih dari satu pilihan.
- Name = nama dari variable yang dikirim ke suatu aplikasi
- Value = nilai dari variable
- Checked (checkbox yang sudah ditandai)
5. Radio Button <input type="radio">
- Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
- Name = nama veriabel yang dikirim ke suatu aplikasi
- Value = nilai dari variable
- Checked (radio button yang sudah di tandai)
6. Push Button <input type="button">
- Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
- Name = nama dari variable yang dikirim ke suatu aplikasi
- Value = label teks di atas tombol
7. Submit <input type="submit">
- Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang di tentukan dalam atribut ACTION dalam elemen FORM.
- Name = nama dari variable yang dikirim ke suatu aplikasi
- Value = label teks di atas tombol
8. Image Submit Button <input type="image" src="url">
- Digunakan untuk menggantikan tombol standar submit dengan image.
- Name = nama dari variable ayng dikirim ke suatu aplikasi
9. Reset <input type="reset">
- Digunakan untuk mereset semua masukan dalam form.
- Value = label teks di button
10. Text Area <textarea>....</textarea>
- Elemen untuk memasukan teks secara leluasa seperti notepad.
- Name = nama dari veriabel yang dikirim ke suatu aplikasi
- Rows = panjang baris dalam karakter
- Cols = tiggi kotak
11. Select <select>....</select>
- Daftar isi dalam property select menggunakan tag <option>
- Size = jumlah pilihan yang dapat terlihat
- Name = nama dari veriabel yang dikirim ke suatu aplikasi
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>
Ketika form dikirim untuk diproses, nilai dari tag option akan
dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali
jika kita memberikan tag value. Jika tag value berisi nilai, maka nilai
value lah yang akan dikirim.
Sama seperti tag option type checkbox dan type radio, atribut checked dapat ditambahkan agar tag select berisi nilai awal, contoh penggunaanya sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga" selected>Pilihan 3</option>
</select>
Berikut ini adalah contoh script HTML untuk Menbuat form:
<html>
<head>
<title>Cara Membuat Form</title>
</head>
<body bgcolor="#000000">
<form action="#" method=get>
<table align="center" bgcolor="#CCFFFF" width="300" border="0" cellspacing="1" cellpadding="1">
<tr>
<td colspan="4" bgcolor="#00FF00"><center><b>Formulir Pendaftaran</b></center></td>
</tr>
<tr>
<td >Nama</td>
<td colspan="3"><input type="text" name="nama"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td colspan="3">
<input type="radio" name="gender" value="pria">laki-laki
<input type="radio" name="gender" value="wanita">Perempuan
</td>
</tr>
<tr>
<td>Alamat</td>
<td colspan="3"><textarea name="alamat" cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td ><select name=tanggal>
<option value=1>01
<option value=2>02
<option value=3>03
<option value=31>31
</select>
</td>
<td ><select name=bulan>
<option value=1>01
<option value=2>02
<option value=12>12
</select>
</td>
<td><select name=tahun>
<option value=1982>1982
<option value=1983>1983
<option value=2010>2010
</select>
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td colspan="3"><select name=pekerjaan>
<option value="pelajar">mahasiswa/pelajar
<option value="wiraswasta">wiraswasta
<option value="karyawan">karyawan
<option value="PNS">PNS
</select>
</td>
</tr>
<tr>
<td>Hobby</td>
<td colspan="3">
<input type="checkbox" name="hobby" value="browsing">browsing
<input type="checkbox" name="hobby" value="makan">makan
<input type="checkbox" name="hobby" value="nonton">nonton
</td>
</tr>
<tr>
<td>Komentar</td>
<td colspan="3"><textarea name="komentar" cols="30" rows="3"></textarea>
</tr>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="kirim data"></td>
<td colspan="2" align="center"><input type="reset" value="ulangi"></td>
</tr>
</table>
</body>
</html>
