Dalam materi kali ini penulis ingin menyampaikan beberapa
hal mengenai form, baik itu untuk input ataupun button. Namun sebelum kita
menuju ke kodingan, alangkah lebih baiknya kita memahami terlebih dahulu apa
itu form dan untuk apa form tersebut digunakan.
FORM merupakan area yang digunakan untuk menampung beberapa
objek khusus dalam HTML sehingga dapat diproses secara dinamis. Form sendiri
memiliki beberapa artibut yang harus disisipkan dalam membantu dalam prosesnya.
Atribut itu sendiri terdiri dari: name,
action, method. Name berisikan nama objek yang nantinya menjadi jembatan
panggilan saat proses dilakukan. Misalnya pada saat kita ingin memprosesnya
menggunakan PHP, maka form tersebut akan dipanggil berdasarkan namenya. Sedangkan untuk action berisikan URL file yang akan
melakukan prosesnya itu sendiri. Misalkan pada saat kita ingin memprosesnya
menggunakan PHP sedangkan file PHP itu sendiri diletakan di halaman yang
berbeda dengan halaman form HTML ini, maka url tempat PHP itu disisipkan harus
diletakan dalam action. Tetapi untuk
file PHP yang diletakan dalam satu halaman dengan form HTML ini tidak perlu
disisipkan URLnya, atau dengan kata lain
actionnya dikosongkan seperti dalam
contoh program yang penulis berikan. Dan yang terakhir ialah
mengenai method. Method merupakan
metode untuk pengiriman data yang isinya antara GET atau POST. Untuk penggunaan
GET dan POST sendiri memang sama saja yaitu untuk pengiriman data, namun untuk
membedakannya sendiri ialah pada saat kita menggunakan GET dalam method, maka
apa yang kita inputkan akan tampil bersamaan dengan URL dari halaman tersebut,
sedangkan untuk POST maka inputan yang dimasukan tidak akan terlihat dalam URL.
Semua penggunaan sesungguhnya kembali pada kebutuhan. Namun untuk inputan
(terutama password) diharapkan untuk tidak menggunakan method GET, karena jika
nanti menggunakan method tersebut sangat berbahaya terhadap akun yang
digunakan. Misalnya contoh sederhana jika Anda sedang membuka akun disamping
teman Anda dan terrnyata password Anda ditampilkan diatas layar bersamaan
dengan URL dari halaman yang sedang Anda buka, maka teman Anda akan dapat
melihat password yang Anda gunakan. Maka dengan demikian penulis sangat menyarankan
untuk penggunaan method POST pada saat membuat inputan password.
Selain mengenai form, penulis ingin menjelaskan pula sedikit
mengenai isi form, yaitu sebuah inputan yang diantaranya meliputi name, type, value. Untuk name sendiri sama halnya seperti pada form,
yaitu untuk dipanggil pada saat proses berjalan. Untuk type sendiri ialah menentukan tipe dari inputan yang akan dibuat,
misalkan kita ingin membuat inputan password, maka kita kita akan menggunakan
inputan password. Walau memang dapat menggunakan inputan text atau yang lainnya, namun untuk password yang
menggunakan tulisan alangkah lebih baiknya jika menggunakan input type=”password”
seperti dalam program yang sudah penulis berikan. Dan untuk type sendiri bukan hanya ada text dan
password, namun juga ada: hidden
(yang nantinya inputan tersebut tidak akan terlihat di layar / auto), radio, checkbox dan beberapa tombol yang meliputi: submit, button, reset. Untuk
submit digunakan untuk memproses data pada form menuju file yang ditunjuk
atribut action pada form. Untuk button
tidak memerlukan action dan biasanya digabung dengan javascript. Dan yang
terakhir ialah reset yang mana pasti
sudah Anda tahu kegunaannya yang hanya mereset inputan sebelum diproses jika
memang ingin semua yang ingin Anda input dibersihkan kembali.
Selain input, ada juga form inputan lain yang biasanya digunakann
untuk menyisipkan komentar, dan untuk hal itu penulis yakin tidak perlu
dijelaskan panjang lebar seperti apa bentuk formnya, yang jelas namanya textarea. Untuk penyisipannya agar tidak
bingung maka lebih baik jika menyesuaikan terlebih dahulu antara teori dengan
contohnya, dengan demikian perhatikan contoh program berikut ini:
<html>
<head/>
<body>
<br/>
<button
name='out'>Logout</button
<br/><br/>
<center>
<form
name ='form_html' action='' method='post'>
Nama
: <input type='text' name='nama'><br/><br/>
<input type='hidden' name='jabatan'
value='karyawan'>
Password:
<input type='password' name='password'><br/><br/>
Jenis
kelamin : <input type='radio' name='jenkel' value='P' checked>Pria
<input
type='radio' name='jenkel' value='W'>Wanita<br/><br/>
Hobby
: <input type='checkbox' name='hobby' value='basket'>Basket
<input
type='checkbox' name='hobby'
value='futsal'>Futsal<br/><br/><br/>
Motto
: <textarea name='motto' cols='50' rows='5'>Masukan motto
Anda</textarea><br/><br/><br/>
<input
type='submit' name='submit' value='SUBMIT'/> <input type='reset'
value='RESET'/>
</form>
</center>
</body>
</html>
Dan hasil yang akan
didapat dari contoh program diatas antara lain sebagai berikut:
Ada sedikit perintah yang lupa penulis sisipkan dalam
contoh, ialah untuk SELECT yang digunakan untuk membuat dropdown option. Namun tetap
saja penulis akan memberikan contoh penggunaannya. Untuk penggunaan select
sendiri memiliki atribut yang terdiri dari name
dan multiple. Untuk name sama
seperti biasanya ialah untuk memanggil form pada saat proses, sedangkan untuk
multiple ialah untuk membuat pilihan yang dapat memilih lebih dari satu. Contohnya
pada saat kita ingin memberikan pilihan Agama yang dianut, maka kita tidak
memerlukan multiple, karena sudah dapat dipastikan setiap orang hanya memiliki
satu agama untuk dianutnya, sedangkan untuk hobby kiita dapat memilih beberapa
maka dengan demikian kita memerlukan multiple. Dan untuk SELECT sendiri
memiliki yang disebut additional tags, yang nama terdiri dari OPTION yang
berguna untuk menambahkan item pilihan dengan atributnya ialah value yang
digunakan untuk member nilai pada setiap item. Untuk contoh programnya sendiri
sebagai berikut:
<form name=’form’ method=’post’ action=’’>
Hobby:
<select name=’hobi’ multiple>
<option value=’B’>Basket</option>
<opton value=’F’>Futsal</option>
</select>
<input type=’submit’ name=’submit’ value=’SUBMIT’/>
</form>
No comments:
Post a Comment