Jika kamu suka memanfaatkan berbagai layanan yang ada di internet, kamu pasti sudah terbiasa dengan yang namanya form, walau bisa jadi sebagian tidak menyadari kalau sedang bekerja dengan form.
Update status di Twitter misalnya, status tersebut diketikkan di dalam sebuah kotak lalu untuk mengirimkannya, tombol Enter ditekan. Di layanan yang lain barangkali tersedia tombol submit untuk mengirimkan teks.
Contoh lain, tak usah jauh-jauh, di Twitter lagi. Kamu tentu pernah mengikuti polling alias pengambilan suara di Twitter dengan memilih satu dari beberapa pilihan yang tersedia. Nah, item pilihan tersebut dipilih dengan mengklik bulatan kecil di depan teks item sehingga bulatan yang tadinya kosong berubah menjadi berisi bulatan hitam. Bulatan semacam ini disebut dengan radio button.
Ada juga yang model kotak kecil dan bila diklik akan muncul tanda centang atau contreng. Kotak semacam ini disebut dengan checkbox.
Seluruh komponen yang diceritakan di atas merupakan elemen-elemen yang ada pada sebuah form. Dibandingkan dengan HTML versi sebelumnya, HTML5 memiliki elemen form yang lebih bervariasi. Namun tentu saja form yang ada di HTML versi sebelumnya masih didukung. Form yang ada di HTML versi sebelum HTML5 kami sebut dengan form klasik dan itulah yang akan menjadi topik pembahasan kali ini.
Pembuatan form diawali dan diakhiri dengan tag
. Di antara kedua tag itulah elemen-elemen form dibuat. Kebanyakan elemen form dinyatakan dengan tag . Yang membedakan jenis-jenis elemen adalah atribut type yang dimiliki oleh tag tersebut.
Tabel berikut ini menyajikan jenis elemen form klasik yang didukung oleh HTML5.
Jenis Nilai atribut type
Kotak teks text
Kotak teks password password
Tombol radio radio
Kotak cek checkbox
Upload file file
Tombol button
Tombol submit submit
Tombol reset reset
Gambar yang berfungsi sebagai tombol submit image
Input tersembunyi hidden
Langsung saja, contoh penggunaannya diberikan pada Listing 1 yang diberi nama file formklasik.html dan hasilnya dipaparkan pada gambar ini.
Perhatikan bahwa perbedaan antara kotak teks biasa dan kotak teks password adalah pada munculnya teks yang diketikkan. Kotak teks biasa akan menampilkan teks apa adanya sedangkan kotak teks password akan menampilkan teks dalam bentuk karakter bulatan atau bintang.Sedangkan tombol untuk upload file bila diklik akan menampilkan kotak dialog Open dan melalui kotak dialog tersebut kamu bisa memilih file yang akan diupload.Untuk elemen tombol, jika hanya atribut type=”button” yang disertakan, tombol akan ditampilkan sebagai sebuah kotak kecil yang bisa jadi tidak nampak sebagai tombol. Karena itu perlu ditambahkan atribut value yang nilainya akan ditampilkan sebagai teks di dalam tombol tersebut.Jika bosan dengan bentuk tombol biasa, gambar tertentu juga bisa dijadikan tombol asal menggunakan atribut type=”image”. Yang mesti diperhatikan, browser yang membuka dokumen HTML harus tahu gambarnya terletak di mana dan nama filenya apa, karena itu perlu ditambahkan atribut src yang nilainya menunjukkan letak dan nama file gambar. Oh ya, tombol yang dibuat dari gambar ini otomatis berfungsi sebagai tombol submit.Selain elemen form yang dinyatakan dengan tag <input>, setidaknya ada dua elemen form lagi yang bisa digunakan, yaitu drop down dan kotak teks berukuran besar untuk memasukkan teks yang panjang.Elemen drop down dinyatakan dengan tag <select> dan item-item pilihannya dinyatakan dengan tag <option>. Sedangkan kotak teks besar dinyatakan dengan tag <textarea>. Ukuran kotak teks tersebut bisa diatur melalui atribut cols (jumlah kolom) dan rows (jumlah baris). Contoh penggunaannya disajikan pada Listing 2 yang diberi nama select.html dan penampakannya terlihat seperti ini.
Listing 1<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Ini kotak teks:
<input type=”text” /><br />
Ini kotak teks untuk password:
<input type=”password” /><br />
<br />
Ini tombol radio: <br />
<input type=”radio” /> Pilihan 1<br />
<input type=”radio” /> Pilihan 2<br />
<input type=”radio” /> Pilihan 3<br />
<br />
Ini kotak cek: <br />
<input type=”checkbox” /> Pilihan 1<br />
<input type=”checkbox” /> Pilihan 2<br />
<input type=”checkbox” /> Pilihan 3<br />
<br />
Ini untuk upload file: <input type=”file” />
<br />
Ini tombol biasa: <input type=”button” value=”tombol”
/><br />
Ini tombol submit: <input type=”submit” /><br />
Ini tombol reset: <input type=”reset” /><br />
Ini tombol dari gambar: <input type=”image” src=”Goicon.
png” /><br />
</form>
</body>
</html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Ini kotak teks:
<input type=”text” /><br />
Ini kotak teks untuk password:
<input type=”password” /><br />
<br />
Ini tombol radio: <br />
<input type=”radio” /> Pilihan 1<br />
<input type=”radio” /> Pilihan 2<br />
<input type=”radio” /> Pilihan 3<br />
<br />
Ini kotak cek: <br />
<input type=”checkbox” /> Pilihan 1<br />
<input type=”checkbox” /> Pilihan 2<br />
<input type=”checkbox” /> Pilihan 3<br />
<br />
Ini untuk upload file: <input type=”file” />
<br />
Ini tombol biasa: <input type=”button” value=”tombol”
/><br />
Ini tombol submit: <input type=”submit” /><br />
Ini tombol reset: <input type=”reset” /><br />
Ini tombol dari gambar: <input type=”image” src=”Goicon.
png” /><br />
</form>
</body>
</html>
Listing 2<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Contoh elemen drop down <br />
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<br /><br />
Contoh kotak teks besar <br />
<textarea rows=”10” cols=”20”>Ketikkan teks di sini</
textarea>
</form>
</body>
</html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Contoh elemen drop down <br />
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<br /><br />
Contoh kotak teks besar <br />
<textarea rows=”10” cols=”20”>Ketikkan teks di sini</
textarea>
</form>
</body>
</html>
Listing 3
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Contoh drop down
yang menggunakan grup<br />
<select>
<option>Merk Mobil</option>
<optgroup label=”Buatan Jepang”>
<option>Toyota</option>
<option>Honda</option>
<option>Mazda</option>
<option>Daihatsu</option>
<option>Mitsubishi</option>
</optgroup>
<optgroup label=”Buatan Eropa”>
<option>Mercedes</option>
<option>BMW</option>
<option>Peugeot</option>
</optgroup>
</select>
</form>
</body>
</html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Contoh drop down
yang menggunakan grup<br />
<select>
<option>Merk Mobil</option>
<optgroup label=”Buatan Jepang”>
<option>Toyota</option>
<option>Honda</option>
<option>Mazda</option>
<option>Daihatsu</option>
<option>Mitsubishi</option>
</optgroup>
<optgroup label=”Buatan Eropa”>
<option>Mercedes</option>
<option>BMW</option>
<option>Peugeot</option>
</optgroup>
</select>
</form>
</body>
</html>
Untuk mempermudah pengguna dalam melakukan pemilihan item pada elemen drop down, seringkali item pilihan dikelompokkan berdasarkan kriteria tertentu. Pengelompokan tersebut dapat dilakukan dengan memanfaatkan tag <optgroup>. Contoh penggunaannya diberikan pada Listing 3 yang diberi nama optgroup.html dan diperlihatkan pada gambar disamping kiri ini.
0 komentar:
Posting Komentar