Pengertian Form
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna. Berikut tag dasar untuk form
<form>
input elements
</form>
Dan terdapat dua atribut yang digunakan dalam elemen form yaitu Method dan Action.
Method yang berfungsi sebagai pengiriman data pada server dengan cara ke tujuan yaitu :
- Get: mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
- Post : mengirim datanya secara terpisah.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Action yang berfungsi menentukan lokasi dari script yang akan memproses data dari form.
Berikut tag dasar dari membuat form
<html>
<head>
<title>Penggunaan Metode GET</title>
</head>
<body>
<center>
<form action="http://www.google.com" method="GET">
<table bgcolor="pink" border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="middle" colspan="2"><B>Contoh Form</B></td>
</tr>
<tr>
<td>
<input name="subAddress" value="Masukkan email anda"><input name="Klik disini" type="submit" value="Klik disana"></input>
</td>
</tr>
</table>
</center>
</body>
</html>
Hasilnya.
Dan pada praktek ini akan membuat tampilan Form data mahasiswa sederhana seperti nama dan alamat, berikut tagnya
<html>
<head>
<title></title>
</head>
<body bgcolor="Brown white">
<center>
<h1>
<font color="white" face="Arial">FORM DATA MAHASISWA<br>
UNIVERSITAS UNMUS</font>
</h1>
</center>
<pre>
Nama Anda : <input type="Text" name="Nama" size="20"></input>
Alamat : <input type="Text" name="Alamat" size="30"></input>
</pre>
</body>
</html>
Hasilnya.
Elemen - elemen input pada Form
Elemen yang paling penting dalam form adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Dan praktek kita akan membahas beberapa elemen input form beserta cara membuatnya.
1. Check Box
Check Box digunakan untuk dapat memilih lebih dari 1 pilihan.
Penulisannya : <input type="check box">
berikut contoh tag htmlnya
<html>
<body>
<h1>Contoh CheckBok</h1>
Hoby :<input type="checkbox" name="baca" value="ON">Membaca</input>
<input type="checkbox" name="tulis" value="ON">Menulis</input>
<input type="checkbox" name="makan" value="ON">Makan</input>
</body>
</html>
Hasilnya.
2. Radio Button
Radio Button digunakan untuk memilih lebih dari 1 pilihan. contohnya seperti jenis kelamin (male or famle).
Penulisannya : <input type="radio button">
berikut contoh tag htmlnya
<html>
<body>
<h1>Contoh Radio Button</h1>
Jenis Kelamin:<input type="radio" name="jk" value="baca">Laki-laki</input>
<input type="radio" name="jk" value="tulis">Perempuan</input>
</body>
</html>
Hasilnya.
3. Select dan Option
Digunakan untuk membuat daftar pilihan dalam bentuk drop-down menu list.
Penulisannya :
<select>
...
</select>
berikut contoh tag htmlnya.
<html>
<body>
<h1>Contoh Select dan Option</h1>
Agama : <select size="1" name="agama">
<option>-</option>
<option>Islam</option>
<option>Budhha</option>
<option>Hindu</option>
<option>Kristen</option>
</select>
</body>
</html>
Hasilnya.
4. Text Area
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.
Seperti dijelaskan berikut :
Nama = nama dari veriabel yang dikirim ke suatu aplikasi
Rows = panjang baris dalam karakter
Cols = tinggi kotak
Penulisannya :
<text area>
Name="area"
Cols="number"
Row="number"
........
</text area>
berikut contoh tag htmlnya.
<html>
<body>
<h1>Contoh Text Area</h1>
Alamat Lengkap : <br>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</body>
</html>
Hasilnya.
Dan yang terakhir pada pratek ini adalah kita akan membuat frame
Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.
dan pada pratek kali ini kita akan membuat contoh frame menggunakan contoh tag html form sebelumnya
Berikut contoh tag htmlnya.
<html>
<frameset rows=100,*>
<noframes>
Tugas
</noframes>
<frame src="Praktek 2.html">
<frame src="Praktek 3.html">
</frameset>
</html>
Hasilnya.
Sekian dan terima kasih bro.... untuk hari ini
Tidak ada komentar:
Posting Komentar