Form adalah jembatan komunikasi antara client dan server. Form dibutuhkan untuk mendapatkan input dari user seperti komentar atau pilihan dari suatu kelompok item tertentu. Form hanya merupakan media entry data (yang akan dikirimkan ke server), tidak untuk menerima dan mengolah data, karena yang akan menangani dan mengolahnya adalah server side web scripting seperti PHP, ASP, dan JSP.
Tag-tag form terletak dalam tag <body>. Berikut contoh penulisan sintaksnya :
<form name="nama_form" method="GET|POST" action="form.asp"> ....
.... (elemen-elemen dalam form)
....
</form>
| name | Nama untuk form yang berlaku, digunakan untuk form handling |
|---|---|
| method | GET = data dikirimkan melalui URL address POST = data dikirimkan melalui HTTP header |
| acition | URL/File yang digunakan untuk menangkap dan mengelolah nilai (data) yang dikirimkan (server side scripting) |
Di dalam form terdapat dua metode pengiriman dari data-data yang telah dimasukkan, yaitu GET dan POST. Metode pengiriman yang dipilih akan sangat menentukan proses pengambilan dan pengolahan data secara lebih lanjut oleh server side scripting. Pengiriman data dengan metode GET (dikirim melalui URL address) hanya dapat menampung ±1000 karakter atau sama dengan 1Kb (bergantung pada browser yang digunakan), jadi untuk pengiriman data yang berukuran lebih dari itu (1000 karakter) sebaiknya menggunakan moetode POST (dikirim melalui HTTP Header).
Elemen Objek Tag-tag Form
Elemen Objek Tag-tag Form
Masing-masing elemen objek memiliki dua hal yang penting yaitu nama elemen (harus ada, penamaannya tidak diperkenankan memakai spasi, tanda baca, ataupun angka) dan value.
Karakteristik dari elemen objek form adalah :
- Input. User diberi kesempatan untuk memasukkan nilai berupa text dengan kapasitas tertentu dan juga mengirimkan ataupun me-reset nilai dari form tersebut.
- Select. User diberi kesempatan untuk memilih nilai dari sebuah combo box.
- Text Area. User diberi kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
Input
Input memiliki beberapa bentuk atau type yaitu text, password, checkbox, radio, hidden, file, submit, reset, image, dan button. Berikut penjelasan atribut-atribut pada tag input :
Contoh :
<input type="text" name="nama" size="20" maxlenght="20">
CHECKBOX
SUBMIT, RESET, dan IMAGE Type ini digunakan untuk membuat tombol SUBMIT, RESET, dan IMAGE. Tombol submit digunakan untuk mengirimkan data-data yang telah diberikan pada form. Sedang tombol reset akan mengembalikan keadaan form kembali seperti keadaan semula. Khusus untuk kedua type ini (submit dan reset) atribut value digunakan sebagai nama yang tertera pada tombol.
Text Area Digunakan untuk pengisian karakter yang panjang seperti komentar. Bila menggunakan text area pada form, sebaiknya method="POST" agar data tidak terpotong saat dikirim.
| name | nama untuk input yang berlaku |
|---|---|
| type | untuk menentukan type elemen input yang diinginkan |
| value | nilai default dari elemen input (optional) |
| size | ukuran (lebar) dari input karakter, untuk type text dan password, sedangkan untuk type image menggunakan width dan height (optional) |
| maxlenght | jumlah maksimal karakter yang yang dapat di-input-kan, untuk type text dan password (optional) |
| checked | input yang secara default terpilih, hanya untuk type text dan password (optional) |
| disable | membuat suatu elemen input dalam keadaan non-aktif |
TEXT
Type ini digunakan untuk data isian seperti nama, alamat, dan sebeagainya. Bentuk objek dari type ini adalah single line yang artinya input isian akan diberikan secara horizontal (dalam satu baris).Contoh :
<input type="text" name="nama" size="20" maxlenght="20">
PASSWORD
Type ini akan menyembunyikan setiap karakter yang diketikkan dengan melakukan masking karakter menjadi * atau ●. Paling sering digunakan untuk input berupa password.
Contoh :
Type ini akan menyembunyikan setiap karakter yang diketikkan dengan melakukan masking karakter menjadi * atau ●. Paling sering digunakan untuk input berupa password.
Contoh :
<input type="password" name="pass" size="16" maxlenght="16">
CHECKBOX
Type ini digunakan untuk membuat kotak-kotak cek, suatu bentuk masukan yang memungkinkan user memilih lebih dari satu pilihan dengan cara mencentang kotak-kotak yang disediakan. Karena sifatnya hanya memilih (user tidak dapat memasukkan nilai) sehingga value dari type ini wajib diberikan.
Contoh :
RADIO
Konsep type ini mirip dengan checkbox yaitu memberikan pilihan pada user, namun pada type ini hanya satu pilihan yang dapat dipilih (dalam nama yang sama). Jadi konsepnya adalah multiple choice.
Contoh :
Contoh :
<input type="checkbox" name="Hoby" value="olahraga" checked>Olahraga
<input type="checkbox" name="Hoby" value="baca">Baca
<input type="checkbox" name="Hoby" value="nonton">Nonton
Konsep type ini mirip dengan checkbox yaitu memberikan pilihan pada user, namun pada type ini hanya satu pilihan yang dapat dipilih (dalam nama yang sama). Jadi konsepnya adalah multiple choice.
Contoh :
<input type="radio" name="jk" value="laki-laki">Laki-laki
<input type="radio" name="jk" value="perempuan">Perempuan
HIDDEN
Objek dengan type ini digunakan dalam server side scripting untuk pertukaran sementara nilai antarvariable. Nilainya statis (tidak dapat diganti secara langsung), dan tidak akan ditampilkan secara langsung dalam web browser.
Contoh : <input type="hidden" name="key" value="secret">
Objek dengan type ini digunakan dalam server side scripting untuk pertukaran sementara nilai antarvariable. Nilainya statis (tidak dapat diganti secara langsung), dan tidak akan ditampilkan secara langsung dalam web browser.
Contoh : <input type="hidden" name="key" value="secret">
FILE
Type ini akan menampilkan objek berupa tampilan input yang diikuti sebuah tombol Browse. Digunakan dalam pencarian data file yang akan dikirim (upload).
Contoh : <input type="file" name="upload">
Type ini akan menampilkan objek berupa tampilan input yang diikuti sebuah tombol Browse. Digunakan dalam pencarian data file yang akan dikirim (upload).
Contoh : <input type="file" name="upload">
SUBMIT, RESET, dan IMAGE
Type IMAGE memiliki karakteristik yang hampir sama seperti SUBMIT, namum bentuk objeknya berupa gambar dan value yang dikirim pada saat diklik adalah koordinat x,y dari gambar tersebut.
Contoh :
Contoh :
<input type="submit" name="nama" value="SUBMIT">
<input type="reset" name="nama" value="RESET">
<input type="image" name="nama">
BUTTON
Selain SUBMIT dan RESET, kita juga dapat membuat tombol sendiri dengan fungsi yang dibuat sendiri menggunakan script seperti Javascript ataupun script-script yang lain.
Contoh :
<input type="button" name="coba" value="TEST" onclick="fungJS()">
Contoh :
Selain SUBMIT dan RESET, kita juga dapat membuat tombol sendiri dengan fungsi yang dibuat sendiri menggunakan script seperti Javascript ataupun script-script yang lain.
Contoh :
<input type="button" name="coba" value="TEST" onclick="fungJS()">
Select
Select digunakan untuk pemilihan terhadap sebuah daftar berupa combo box, spinner, dan menu list.Contoh :
<select name="bulan" size="1">
<option selected value="januari">Januari</option>
<option selected value="februari">Februari</option>
<option selected value="maret">Maret</option>
....
</select> | name | nama untuk select yang berlaku |
|---|---|
| size | tinggi/bentuk tampilan menu select : 1 (default) combo box 2 spinner >2 menu list |
| value | nilai dari option yang dipilih |
| menu-n | text yang ditampilkan sebagai option |
| selected | option yang secara default dipilih |
Text Area
Contoh :
<textarea name="komentar" rows="5" cols="15">default text</textarea> | name | nama untuk text area yang berlaku |
|---|---|
| rows | banyaknya baris karakter yang ditampilkan untuk text area |
| cols | banyaknya karakter yang ditampilkan untuk text area |
| default text | default text yang ditampilkan saat form pertama kali dibuka |
NB: Gunakan table untuk membuat tampilan elemen objek form tersusun rapi.
1 komentar:
Terima kasih telah membaca tulisan saya kali ini.
Mudah-mudahan dapat berguna bagi Anda, baik sebagai bahan pembelajaran ataupun sebagai reverensi.
Kritik atau saran dari Anda akan sangat berguna untuk perbaikan kedepannya.
Jika ada, langsung saja tinggalkan komentar Anda disini.
Sekian,
Salam WEB mastah! :)
Posting Komentar