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.
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
-
-
- sumber dari:www.klikbelajar.com
Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :
- Nama : <input type="text" size="25" />
- Pesan Anda : <input type="textarea" cols="20" rows="20" />
Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />
Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
- Password : <input type="password" size="25" />
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 :
- Pelajaran yang kalian sukai :
- <input type="checkbox"> Matematika
- <input type="checkbox"> Fisika
- <input type="checkbox"> Kimia
- <input type="checkbox"> Sejarah
Pelajaran yang kalian sukai :
Matematika
Fisika
Kimia
Sejarah
Radio
Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
- Pelajaran yang kalian sukai :
- <input name="favorit" value="matematika" type="radio"> Matematika
- <input name="favorit" value="fisika" type="radio"> Fisika
- <input name="favorit" value="kimia" type="radio"> Kimia
- <input name="favorit" value="sejarah" type="radio"> Sejarah
Pelajaran yang kalian sukai :
Matematika
Fisika
Kimia
Sejarah
Select
Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :
- Pelajaran yang kalian sukai :
- <select name="favorit">
- <option>Matematika
- </option><option>Kimia
- </option><option>Fisika
- </option><option>Bahasa
- </option></select>
Pelajaran yang kalian sukai :
TAG FORM
Form merupakan sebuah tag HTML yang digunakan untuk menandakan sebuah formulir (borang) inputan pada dokumen HTML.
Sebagai contoh :
- <FORM>
- nama: <INPUT>
- email: <INPUT>
- </FORM>
<FORM>
nama: <INPUT>
email: <INPUT>
</FORM>
Tag diatas akan menghasilkan tampilan sebagai berikut :
nama:
email:
Contoh diatas dimana tag FORM tidak menggunakan atribut apapun tidak akan dapat bekerja dengan baik, dikarenakan formulir isian yang kita buat pada tag diatas tidak diikuti dengan sebuah tindakan. Tindakan ini membutuhkan suatu atribut dari tag FORM itu sendiri yang disebut dengan ACTION.
ACTION
ACTION merupakan atribut dari tag FORM yang digunakan untuk memproses inputan yang dimasukan pada tag FORM. Tindakan pemrosesan inputan dari formulir isian yang kita buat akan berupa logika dalam bahasa pemrograman web seperti PHP atau CGI.
Sebagai contoh :
- <FORM ACTION="proses.php">
- nama: <INPUT>
- email: <INPUT>
- <INPUT TYPE=SUBMIT>
- </FORM>
<FORM ACTION="proses.php">
nama: <INPUT>
email: <INPUT>
<INPUT TYPE=SUBMIT>
</FORM>
Tag diatas merupakan pengembangan dari contoh sebelumnya, hanya saja pada tag ini ditambahkan ACTION="proses.php" yang akan mengarahkan isian dari formulir yang kita buat ke file proses.php dimana isian formulir tersebut akan diproses. Tag tersebut juga ditambah INPUT TYPE=SUBMIT berupa sebuah tombol yang digunakan untuk mengirim data ketika tombol tersebut di-klik.
Hasilnya akan seperti ini:
nama:
email:
METHOD
Atribut METHOD ini digunakan untuk menentukan metode pengiriman data dari formulir isian ke file pemroses. Metode yang digunakan ada dua macam, yaitu : GET dan POST.
Perbedaan dari method GET dan POST adalah apabila kalian menggunakan method GET maka di address bar akan tampil data yang dikirimkan dari proses tersebut.
Lihat perbedaannya :
Dengan method GET URL-nya:
http://klikbelajar.com/Auto%20Sugest/autoComplete/show.php?negara=Albania&Submit=submit
Dengan method POST URL-nya :
http://klikbelajar.com/Auto%20Sugest/autoComplete/show.php
Untuk menggunakan metode ini maka dibutuhkan satu file pemroses yang isinya merupakan program untuk mengolah data-data yang dikirim dari formulir isian.
Berikut ini adalah dua paket file untuk pemrosesan tipe POST dan GET, sedikit bahasa PHP digunakan disini untuk menampilkan isi dari form yang telah diisi.
Contoh :
Masukkan nama dan email pada formulir berikut
nama:
email:
Bottom of Form
Bottom of Form
CARA MEMBUAT FORM
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.
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 Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :
- Nama : <input type="text" size="25" />
- Pesan Anda : <input type="textarea" cols="20" rows="20" />
Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />
Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
- Password : <input type="password" size="25" />
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 :
- Pelajaran yang kalian sukai :
- <input type="checkbox"> Matematika
- <input type="checkbox"> Fisika
- <input type="checkbox"> Kimia
- <input type="checkbox"> Sejarah
Pelajaran yang kalian sukai :
Matematika
Fisika
Kimia
Sejarah
Radio
Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
- Pelajaran yang kalian sukai :
- <input name="favorit" value="matematika" type="radio"> Matematika
- <input name="favorit" value="fisika" type="radio"> Fisika
- <input name="favorit" value="kimia" type="radio"> Kimia
- <input name="favorit" value="sejarah" type="radio"> Sejarah
Pelajaran yang kalian sukai :
Matematika
Fisika
Kimia
Sejarah
Select
Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :
- Pelajaran yang kalian sukai :
- <select name="favorit">
- <option>Matematika
- </option><option>Kimia
- </option><option>Fisika
- </option><option>Bahasa
- </option></select>
Pelajaran yang kalian sukai :
TAG FORM
Form merupakan sebuah tag HTML yang digunakan untuk menandakan sebuah formulir (borang) inputan pada dokumen HTML.
Sebagai contoh :
- <FORM>
- nama: <INPUT>
- email: <INPUT>
- </FORM>
<FORM>
nama: <INPUT>
email: <INPUT>
</FORM>
Tag diatas akan menghasilkan tampilan sebagai berikut :
nama:
email:
Contoh diatas dimana tag FORM tidak menggunakan atribut apapun tidak akan dapat bekerja dengan baik, dikarenakan formulir isian yang kita buat pada tag diatas tidak diikuti dengan sebuah tindakan. Tindakan ini membutuhkan suatu atribut dari tag FORM itu sendiri yang disebut dengan ACTION.
ACTION
ACTION merupakan atribut dari tag FORM yang digunakan untuk memproses inputan yang dimasukan pada tag FORM. Tindakan pemrosesan inputan dari formulir isian yang kita buat akan berupa logika dalam bahasa pemrograman web seperti PHP atau CGI.
Sebagai contoh :
- <FORM ACTION="proses.php">
- nama: <INPUT>
- email: <INPUT>
- <INPUT TYPE=SUBMIT>
- </FORM>
<FORM ACTION="proses.php">
nama: <INPUT>
email: <INPUT>
<INPUT TYPE=SUBMIT>
</FORM>
Tag diatas merupakan pengembangan dari contoh sebelumnya, hanya saja pada tag ini ditambahkan ACTION="proses.php" yang akan mengarahkan isian dari formulir yang kita buat ke file proses.php dimana isian formulir tersebut akan diproses. Tag tersebut juga ditambah INPUT TYPE=SUBMIT berupa sebuah tombol yang digunakan untuk mengirim data ketika tombol tersebut di-klik.
Hasilnya akan seperti ini:
nama:
email:
METHOD
Atribut METHOD ini digunakan untuk menentukan metode pengiriman data dari formulir isian ke file pemroses. Metode yang digunakan ada dua macam, yaitu : GET dan POST.
Perbedaan dari method GET dan POST adalah apabila kalian menggunakan method GET maka di address bar akan tampil data yang dikirimkan dari proses tersebut.
Lihat perbedaannya :
Dengan method GET URL-nya:
http://klikbelajar.com/Auto%20Sugest/autoComplete/show.php?negara=Albania&Submit=submit
Dengan method POST URL-nya :
http://klikbelajar.com/Auto%20Sugest/autoComplete/show.php
Untuk menggunakan metode ini maka dibutuhkan satu file pemroses yang isinya merupakan program untuk mengolah data-data yang dikirim dari formulir isian.
Berikut ini adalah dua paket file untuk pemrosesan tipe POST dan GET, sedikit bahasa PHP digunakan disini untuk menampilkan isi dari form yang telah diisi.
Contoh :
Masukkan nama dan email pada formulir berikut
nama:
email:
Bottom of Form
Bottom of Form