Form tidak akan berguna apabila penggunaannya tanpa melibatkan bahasa pemrograman yang lain. Mengingat fungsi dari form adalah untuk mengumpulkan data yang dimasukkan oleh user dan mengirimkannya ke halaman lain maka form memerlukan bahasa pemrograman lain untuk mengirimkan data tersebut misalnya PHP.
Walaupun demikian, bukanlah masalah kita mempelajari form terlebih dahulu. Yang penting, kita pahami dulu HTML kemudian secara bertahap, nanti kita akan membahas bahasa pemrograman lain yaitu PHP.
Tag-tag dasar HTML yang digunakan dalam form adalah form, input, textarea, select dan option.
Form
Tag form mendefinisikan/menunjukkan bahwa konten yang ada di dalam tag <form> adalah suatu form/formulir. Jika kita membuat sebuah form yang digunakan untuk mengirimkan suatu data informasi, maka kita memerlukan sebuah atribut action dimana atribut tersebut berguna untuk memberitahu browser kemana tujuan data informasi dari form tersebut akan dikirimkan.
Satu lagi atribut yang tidak boleh ditinggalkan dalam membuat form yaitu atribut method. Atribut method digunakan untuk memberitahu browser metode apa yang digunakan si form dalam mengirimkan data. Metode yang digunakan untuk mengirimkan data dalam form ada dua yaitu GET dan POST. Apabila kita tidak mengisikan metode tersebut, maka secara default form akan menggunakan metode GET.
Perbedaan antar metode GET dengan metode POST adalah cara pengirimannya. Metode GET, data yang dikirimkan akan terlihat oleh user melalui URL. Misalnya apabila kita melakukan login pada sebuah situs web, setelah kita menekan tombol submit dan bila kita melihat pada url situs bertuliskan misalnya http://www.bookface.com/index.php?username=bejo&password=bejo1234 berarti situs tersebut menggunakan metode GET dalam mengirimkan informasi data. Dan user dapat melihat data yang dikirim tersebut yaitu username=bejo dan password=bejo1234.
Penggunaan metode GET dinilai kurang aman karena data yang dikirimkan bersifat "telanjang" atau terbuka dengan kata lain user atau orang lain data mengetahui data yang dikirimkan. Maka, solusinya adalah menggunakan metode POST. Metode POST ini menyembunyikan informasi data yang dikirimkan sehingga tidak akan tampak dalam URL situs web.
Catatan:
GET hanya digunakan untuk mengirimkan informasi singkat yang bersifat tidak sensitif mengingat user dapat melihat data yang dikirim. Sebaliknya, POST dapat digunakan untuk mengirim informasi/data yang lebih panjang maupun data yang bersifat sensitif seperti data username dan password.
Berikut adalah penulisan untuk elemen form.
<form action="proses.php" method="post">
</form>
</form>
Input
Tag input adalah "bos" dalam sebuah form. Tag input dapat menjadi berbagai macam bentuk seperti :
- <input type="text"> atau yang lebih sederhana <input> adalah sebuah textbox standar. Di dalam tag input biasa berisi atribut value dan name.
Contoh tampilan:
- <input type="password"> sama seperti textbox namun karakter yang ditulis/dimasukkan oleh user disamarkan dengan karakter dot atau bulatan kecil.
Contoh tampilan:
- <input type="checkbox"> adalah sebuah pilihan yang dapat dicentang/ditandai oleh user. Untuk tipe checkbox memiliki atribut checked (<input type="checkbox" checked> atribut checked tidak membutuhkan nilai/value) dimana pilihan dengan atribut checked secara otomatis akan terpilih/tercentang.
Contoh tampilan: HTML CSS
- <input type="radio"> sama seperti checkbox hanya saja user tidak bisa memilih lebih dari satu pilihan dalam satu grup/kelompok. Input dengan tipe radio juga memiliki atribut checked
Contoh tampilan: HTML CSS
- <input type="submit"> adalah sebuah tombol, apabila tombol tersebut di tekan/klik maka semua data yang ada dalam form akan terkirim ke tempat tujuan. Untuk memunculkan tulisan pada tombol, kita bisa mengaturnya melalui atribut value, misalnya <input type="submit" value="Ayok, tekan gue coy !!">
Contoh tampilan:
Catatan:
Sama seperti tag img dan br, tag input tidak mengandung suatu konten di dalamnya sehingga tidak membutuhkan tag penutup.
Sama seperti tag img dan br, tag input tidak mengandung suatu konten di dalamnya sehingga tidak membutuhkan tag penutup.
Textarea
Textarea sama seperti textbox namun bersifat multi-line artinya textarea dapat menampung beberapa baris tulisan di dalamnya dan berukuran lebih besar. Textarea mempunyai atribut rows dan cols untuk mengatur tinggi dan lebar dari textarea itu sendiri. Contoh penulisannya:
<textarea rows="5" cols="50">A big load of text</textarea>
Dalam contoh kode diatas menunjukkan bahwa textarea memiliki tinggi sebanyak 5 baris dan lebar 50 karakter. Konten yang tertulis di dalam tag textarea, dalam contoh di atas adalah "A big load of text" akan menjadi value dalam elemen textarea.
Contoh tampilan:
Select
Tag select membutuhkan tag option agar dapat berfungsi untuk menampilkan pilihan menu dengan cara drop-down. Contoh penulisannya:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ke-3">Pilihan 3</option>
</select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ke-3">Pilihan 3</option>
</select>
Apabila form di-submit/dikirim maka pilihan menu yang terpilih yang akan terkirim. Value/nilai/data yang dikirim adalah tulisan yang berada antara tag <option> dan tag </option> kecuali kalau tag option tersebut sudah terseting/diatur nilainya melalui atribut value maka nilai/data yang dikirim adalah apa yang ada dalam atribut value. Misalnya kita memilih "Pilihan 1" maka data yang terkirim adalah "Pilihan 1" namun apabila kita memilih "Pilihan 3" maka data yang terkirim adalah "pilihan ke-3" bukannya "Pilihan 3".
Sama seperti checkbox dan radio yang memiliki atribut checked, tag select juga memiliki hal demikian namun berbeda nama yaitu selected tetapi fungsinya sama yaitu untuk menentukan menu yang terpilih secara otomatis. Misalnya:
<option selected>Pilihan 2</option>
Contoh tampilan:
Name
Semua tag yang sudah dijelaskan diatas, apabila diaplikasikan dalam halaman web sudah terlihat bagus. Namun apabila kita menekan tombol submit maka semua data yang sudah di-input dan dipilih tidak akan diproses, data tersebut akan terabaikan. Karena setiap tag entah itu tag input, textarea, select yang berada dalam form harus memiliki identitas masing-masing. Identitas tersebut adalah atribut name. Jadi setiap kita membuat form, kita harus menambahkan atribut name agar data tersebut saat terkirim dapat diterima dan dikenali oleh si penerima data. Sebagai contoh:
<input type="text" name="alamat_email">
Berikut adalah contoh form pendaftaran/signup lengkap dari yang telah dijelaskan di atas.
<form action="proses.php" method="post">
<p>Username:</p>
<p><input type="text" name="nama" value="Username..."></p>
<p>Password:</p>
<p><input type="password" name="password"></p>
<p>Jenis Kelamin:</p>
<p><input type="radio" name="jkelamin" value="laki-laki">Laki-laki
<input type="radio" name="jkelamin" value="perempuan">Perempuan
<input type="radio" name="jkelamin" value="lainnya">Bukan keduanya</p>
<p>Hobi:</p>
<p><input type="checkbox" name="hobi">Membaca
<input type="checkbox" name="hobi">Shopping
<input type="checkbox" name="hobi">Travelling
<input type="checkbox" name="hobi">Lainnya</p>
<p>Status:</p>
<p><select name="status">
<option value="lajang">Lajang</option>
<option value="pacaran">Pacaran</option>
<option value="menikah">Menikah</option>
</select></p>
<p>Alamat:</p>
<p><textarea name="alamat" cols="50" rows="5">...</textarea></p>
<p><input type="submit" name="tombol" value="Daftar Sekarang"></p>
</form>
<p>Username:</p>
<p><input type="text" name="nama" value="Username..."></p>
<p>Password:</p>
<p><input type="password" name="password"></p>
<p>Jenis Kelamin:</p>
<p><input type="radio" name="jkelamin" value="laki-laki">Laki-laki
<input type="radio" name="jkelamin" value="perempuan">Perempuan
<input type="radio" name="jkelamin" value="lainnya">Bukan keduanya</p>
<p>Hobi:</p>
<p><input type="checkbox" name="hobi">Membaca
<input type="checkbox" name="hobi">Shopping
<input type="checkbox" name="hobi">Travelling
<input type="checkbox" name="hobi">Lainnya</p>
<p>Status:</p>
<p><select name="status">
<option value="lajang">Lajang</option>
<option value="pacaran">Pacaran</option>
<option value="menikah">Menikah</option>
</select></p>
<p>Alamat:</p>
<p><textarea name="alamat" cols="50" rows="5">...</textarea></p>
<p><input type="submit" name="tombol" value="Daftar Sekarang"></p>
</form>
Contoh form di atas sudah mewakili setiap anggota "perkumpulan" (tag) dalam form dan sudah memenuhi syarat sebagai form dimana tujuan pengiriman form/atribut action, metode pengiriman/atribut method dan tag-tag pendukung beserta tombol submit telah terpasang.
Akan tetapi apabila kita menjalankan form tersebut, kita tetap membutuhkan file proses.php yang tertera dalam atribut action agar form tersebut dapat berjalan dengan semestinya karena seharusnya dalam file proses.php terdapat suatu proses untuk menangkap data yang dikirim oleh form tadi dan menyimpannya dalam database/basis data.
***
Daftar Tutorial HTML:
Tidak ada komentar:
Posting Komentar