Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit. Untuk itu kalian sebaiknya membaca setiap petunjuk disini agar lebih mudah memahami cara membuat form ini.
Di bawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input.
Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan bahan-bahannya, yaitu <form>, <input>, <select>, dan <option>.
Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat sebuah form
yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL. Disini kalian hanya
mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form yang baik.
Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web kalian misalnya teks. Dari atas ke bawah :
• Text
• Password
• Checkbox
• Radio
• Select
• Textarea
Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Berbeda dengan Text area yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :
view plaincopy to clipboardprint?
1. Nama : <input type="text" size="25" />
2. Pesan Anda : <input type="textarea" cols="20" rows="20" />
Sedangkan untuk input tipe Passwordhampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
view plaincopy to clipboardprint?
1. Password : <input type="password" size="25" />
Silahkan script html tersebut kalian coba pada papan tulis di bawah.
Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari beberapa
pilihan yang disediakan.
Checkbox
Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat penggunaannya berikut ini :
view plaincopy to clipboardprint?
1. Pelajaran yang kalian sukai :
2. <input type="checkbox"> Matematika
3. <input type="checkbox"> Fisika
4. <input type="checkbox"> Kimia
5. <input type="checkbox"> Sejarah
Radio
Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
1. Pelajaran yang kalian sukai :
2. <input name="favorit" value="matematika" type="radio"> Matematika
3. <input name="favorit" value="fisika" type="radio"> Fisika
4. <input name="favorit" value="kimia" type="radio"> Kimia
5. <input name="favorit" value="sejarah" type="radio">Sejarah
Select
Select digunakan apabila tampilan pilihan yang kitasediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radioyaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :
1. Pelajaran yang kalian sukai :
2. <select name="favorit">
3. <option>Matematika
4. </option><option>Kimia
5. </option><option>Fisika
6. </option><option>Bahasa
7. </option></select>
Silahkan kode-kode diatas dicoba di papan tulis dibawah agar kalian lebih memahami aplikasinya. Jika anda ingin membuat semacam daftar isian (form)di situs web anda, artikel ini akan membahas bagaimana cara membuatnya. Tapi artikel ini hanya akan membuat form nya saja. Untuk memproses data yang diinput dari form, tidak akan dibahas disini.
Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.
-----------------mulai kode html----------------------
<form method="???" action="???">
<tag tertentu>
</form>
-----------------akhir kode html----------------------
pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika anda mengisi 'get' maka data akan terlihat di address bar web browser.
Atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"
Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset data.
1. Textfield.
Berikut adalah kode HTML untuk membuat textfield.
-----------------mulai kode html----------------------
<input type="text" name="judul" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
- pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form berbentuk textfield. atribut ini harus ada untuk membuat textfield.
- atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
- atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
- atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan, dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
2. Text Area
Berikut adalah kode HTML untuk membuat Text area.
-----------------mulai kode html----------------------
<textarea name="keterangan" cols="50" rows="5"></textarea>
-----------------akhir kode html----------------------
penjelasan:
- atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
- atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini dapat dihilangkan.
- atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan. Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.
3. Password
-----------------mulai kode html----------------------
<input type="password" name="katasandi" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
- sama seperti textfield hanya saja atribut 'type'diisi dengan nilai 'password'. Karakter yang diinput akan tidak terlihat diganti dengan simbol lingkaran atauasterisk (*).
4. Dropdown box.
-----------------mulai kode html----------------------
<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b"
selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah
orangnya!</option></select>
-----------------akhir kode html----------------------
penjelasan:
- tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1' atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka sebanyak angka tersebut pilihan akan ditampilkan.
- tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat diantara tag <option> </option> adalah kalimat yangakan ditampilkan ke browser.++ atribut 'selected' dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat dipakai pada satu option saja.
5. radio button
merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.
-----------------mulai kode html----------------------
<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">
<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">
-----------------akhir kode html----------------------
keterangan:
- atribut 'type' harus diisi 'radio'.
- untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau lebih radio button. Dalam contoh di atas, terdapat dua kelompok radio button, yaitu 'pilihan' dan 'pilihan2'.
- atribut 'value' diisi nilai yang akan diproses nanti.
- atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).
Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu
di pilhan kedua 'BMW". Berikut kodenya.
-----------------mulai kode html----------------------
Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">
<br><br>
Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">
-----------------akhir kode html----------------------
Jadi teks yang Audi, BMW, Honda, Yamaha itulah yangakan ditampilkan di browser. Sedangkan teks
yang berada di dalam 'value' itulah nilai yang akandiproses.
6. checkbox
merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).
-----------------mulai kode html----------------------
<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">
<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">
-----------------akhir kode html----------------------
keterangan:
- sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.
7. tombol reset
tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.
-----------------mulai kode html----------------------
<input type="reset" value="Batal">
-----------------akhir kode html----------------------
keterangan:
- atribut 'type' harus diisi 'reset'.
- atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
8. tombol submit
tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang
ditulis pada atribut 'action' (lihat artikel Membuat form dengan
HTML 1).
-----------------mulai kode html----------------------
<input type="submit" value="Kirim">
-----------------akhir kode html----------------------
Tidak ada komentar:
Posting Komentar