TUTORIAL HTML 6
Sitenblog 2:33 PM
Jika anda ingin membuat hompej yang interaktif, anda perlu mulai berfikir menggunakan form. Form dapat digunakan untuk meminta input dari pengunjung tentang apapun. Baik mengisi angket, mengisi polling, mengisi guestbook juga mengisi form pembelian barang. Semua aplikasi tersebut menggunakan prinsip pembuatan form.
Form selalu diawali dengan tag <FORM> dan ditutup dengan tag <⁄FORM>. Di antara tag pembuka dan penutup FORM tadi dapat diisi tag <INPUT> yang jenisnya ada beberapa macam. Contoh sederhana dari form adalah sebagai berikut:
Anda melihat sebuah kotak yang dapat ditulisi kan ? Nah, mungkin anda ingin tahu bagaimana membuatnya. Tidak sulit, anda cukup menyisipkan kode berikut ke file HTML anda.
<FORM METHOD="POST" ACTION="mailto:alamat imel anda">
<INPUT TYPE="text" NAME="nama" SIZE="30">
</FORM>
Weks, anda tidak faham satu baris pun ? Baik akan saya jelaskan satu persatu. Kita mulai dari baris pertama:
<FORM METHOD="POST" ACTION="mailto:alamat imel anda">.
Pada baris pertama ini ada tiga hal yang perlu anda ketahui:
1 FORM: kata ini akan menjelaskan kepada komputer bahwa anda sedang membuat form. That's it.
2 METHOD: kata ini menentukan tentang bagaimana informasi akan dikirim. Di atas kita memilih dengan cara "POST", artinya sebundel data langsung kita kirim begitu saja. Metode lain yang bisa digunakan adalah "GET", di sini data dikirim dengan menambahkan sesuatu pada alamat URL di bagian atas browser anda. OK, lupakan dulu, pokoknya sekarang kita memilih metode POST.
3 ACTION: ke mana data akan dikirim. Pada form di atas kita menggunakan "mailto:alamat imel anda" yang berarti data akan dikirim ke alamat imel tersebut. Kita bisa juga mengisi dengan alamat URL, nanti kita lihat.
Sekarang baris kedua, yaitu: <INPUT TYPE="text" NAME="nama" SIZE="30">. Apalagi nech ? Di sini lagi-lagi ada tiga hal yang perlu anda ketahui:
1 INPUT: ini mendefinisikan bahwa kita sedang meminta input (masukan) kepada pengunjung situs.
2 TYPE: nah ini akan menjelaskan jenis input yang kita minta. Di sini kita memilih jenis "text" yang akan menampilkan satu baris kotak input seperti anda lihat di atas. Ada banyak jenis lainnya yang akan saya jelaskan nanti.
3 NAME: yang ini berguna untuk memberikan nama kepada input ini. Anda bebas memberi nama apapun, tidak harus "nama" seperti yang saya tulis di atas. NAME ini berguna untuk keperluan memproses input ini lebih lanjut, misalnya nanti saat anda mempelajari penggunaan CGI script.
4 SIZE: anda tentu bisa menebak, yup, ini adalah panjang kotak input di atas.
Terakhir baris ketiga seperti biasa adalah baris penutup form, <⁄FORM>. Perhatikan bahwa tag <INPUT> tidak memerlukan penutup <⁄INPUT>. Sekarang saya akan menjelaskan jenis-jenis (type) input yang lain, perhatikan baik-baik yach:
1 BUTTON, contohnya ini:
2 CHECKBOX, contohnya ini:
3 FILE, contohnya ini:
4 HIDDEN, contohnya ini (ngumpet di mana nech ? namanya juga hidden :)):
5 IMAGE, contohnya ini gambr apa aja bisa:
6 PASSWORD, contohnya ini:
7 RADIO, contohnya ini:
8 RESET, contohnya ini:
9 SUBMIT, contohnya ini:
Selain input di atas (semua yang di atas bikinnya pake tag <INPUT>), adalagi input yang bikinnya pake tag yang lain, misalnya:
1 SELECT, contohnya ini:
2 TEXTAREA, contohnya ini:
Udah. Beberapa jenis input yang sering digunakan sudah saya salinkan di atas. Sekarang kita bahas secara lebih detil satu-persatu. Tidak urut seperti di atas, tapi berdasarkan popularitasnya kali. Sebelumnya mungkin perlu saya ingatkan sekali lagi, bahwa semua kode HTML di bawah yang saya tuliskan harus berada di antara tag <FORM> .. <⁄FORM>. Ya iya lah, pan kita lagi ngomongin form.
Text, Password dan Textarea
Tentang text tadi sudah kita bahas. Tapi baiklah di sini akan saya bahas ulang, sekalian menambah beberapa atribut yang mungkin nantinya berguna bagi anda.
Format input text yang lebih lengkap (ini masih belum lengkap) adalah:
<INPUT TYPE="TEXT" MAXLENGTH="5" NAME="nama" SIZE="15" VALUE="bebas">
Tadi kita telah membahas tentang atribut TYPE, NAME dan SIZE. Kini kita akan membahas sisanya. MAXLENGTH adalah panjang maksimum yang bisa anda tulisi (ingat, berbeda dengan ukuran kotak yang didefinisikan dengan SIZE). Anda bisa melihat kotak di bawah yang berukuran 15 karakter, namun ternyata hanya bisa anda tulisi sepanjang 5 karakter.
Kalau anda bisa menulis lebih dari 5 karakter silakan kirim imel untuk meminta hadiah. :p
Sedang atribut VALUE berfungsi untuk memberikan harga awal di dalam kotak. Jadi sebelum menulis apa-apa anda melihat bahwa di dalam kotak telah tertulis kata "bebas".
Nah sedikit berbeda dengan text adalah password. Antara text dengan password tidak ada perbedaan apapun kecuali pada password apa yang kita ketikkan ditampilkan dalam bentuk * sehingga tidak terbaca. Bentuk tag dengan type password adalah sebagai berikut:
<INPUT TYPE="PASSWORD" MAXLENGTH="8" NAME="kunci" SIZE="10" VALUE="">
Anda lihat atribut yang digunakan persis dengan yang digunakan pada type text (sengaja untuk atribut VALUE saya kosongkan sehingga tidak ada harga awal yang terisi). Fungsinya pun sama. Nah kode di atas ini akan ditampilkan seperti ini (silakan coba menulis):
Selanjutnya kita akan membahas textarea. Bentuk umum tag yang digunakan adalah sebagai berikut:
<TEXTAREA NAME="komentar" ROWS="6" COLS="40" WRAP="OFF">Tulisan ini akan ditampilkan di dalam kotak.<⁄TEXTAREA>
Berbeda dengan text, kali ini kita tidak menggunakan tag <INPUT>, tetapi langsung menggunakan tag <TEXTAREA>. Juga sekarang kita harus menutup dengan tag <⁄TEXTAREA>. Di antara tag <TEXTAREA> dan tag <⁄TEXTAREA> kita dapat menuliskan apapun yang nantinya akan ditampilkan di dalam kotak yang tersedia. Anda lihat kotak di bawah ini yang sudah berisi tulisan "Tulisan ini akan ditampilkan di dalam kotak.".
Atribut yang bisa kita atur di atas adalah ROWS yang akan menentukan jumlah baris dan COLS yang akan menentukan jumlah kolom. Juga ada atribut NAME yang fungsinya memberi nama, sama seperti pada input text. Jika kita sampai pada pengolahan data form, anda akan memahami pentingnya memberi nama - dan jelas tidak boleh ada nama yang sama.
Juga ada atribut WRAP yang memiliki tiga pilihan, yaitu "OFF", "HARD" dan "SOFT". Jika anda memilih OFF seperti di atas, maka tulisan akan terus berlanjut tanpa berpindah ke baris berikutnya. Coba anda isi kotak di atas. Sedang pemilihan "HARD" akan menyebabkan tulisan terpotong begitu sampai ke batas kanan, kemudian berpindah ke baris baru. Saat data dikirim pun (misal melalui email seperti contoh di atas), data yang kita terima akan terpotong per baris. Terakhir pilihan "SOFT" akan menyebabkan data terpotong saat menyentuh batas kanan dan berpindah ke baris baru. Namun bedanya dengan HARD, saat data dikirim melalui email, kita akan menerima data tersebut utuh memanjang tanpa terpotong per baris.
Sudah jelas kan ? Nah, berikut ini akan saya tampilkan bentuk form yang pasti anda sudah familiar.
Nama :
E-mail :
Komentar:
Yup ... agak mirip dengan guestbook bukan ? Ini kode yang digunakan.
Nama : <INPUT TYPE="TEXT" NAME="nama" SIZE="15"><br>
E-mail : <INPUT TYPE="TEXT" NAME="imel" SIZE="15"><br>
Komentar:<br>
<TEXTAREA NAME="komentar" ROWS="5" COLS="45" WRAP="SOFT"><⁄TEXTAREA>
Radio, Checkbox dan Select
Ketiga jenis input di atas berfungsi memberikan pilihan kepada pengunjung. Untuk radio dan pengunjung hanya dapat memilih satu pilihan, sedang untuk checkbox pengunjung dapat memilih beberapa pilihan.
Baik, kita bedah satu-persatu. Berikut ini adalah bentuk perintah untuk RADIO.
<INPUT TYPE="RADIO" NAME="partai_idaman" VALUE="pilihanku">Mmm atribut yang belum anda kenal mungkin cuman VALUE, gunanya untuk memberikan nilai yang isinya tergantung pilihan kita. Hasil dari format di atas adalah sebagai berikut:
Yah, cuman satu bunderan, nggak asyik. Biar lebih asyik, sekarang saya tampilkan pilihan beberapa pilihan.
Partai mana yang anda pilih ?
Partai Keadilan Sejahtera (InsyaAllah Mantap)
Partai Demokrat
Partai Demokrasi Indonesia Perjuangan
Partai Kebangkitan Bangsa
Untuk membuat pilihan seperti di atas, kode yang saya tulis adalah seperti ini. Lihat setiap pilihan saya beri NAMA yang sama, namun VALUE yang berbeda.
Partai mana yang anda pilih ?<br>
<INPUT TYPE="RADIO" NAME="partai_idaman" VALUE="pks">Partai Keadilan Sejahtera (InsyaAllah Mantap)<br>
<INPUT TYPE="RADIO" NAME="partai_idaman" VALUE="pd">Partai Demokrat<br><INPUT TYPE="RADIO" NAME="partai_idaman" VALUE="pdip">Partai Demokrasi Indonesia Perjuangan<br>
<INPUT TYPE="RADIO" NAME="partai_idaman" VALUE="pkb">Partai Kebangkitan Bangsa
Penggunaan CHECKBOX juga tidak berbeda jauh, hanya di sini anda dapat memilih lebih dari satu. Bentuk tag dari CHECKBOX adalah:
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="idamanku"> Hidayat Nur Wahid
Mestinya anda sudah familiar dengan semua atributnya kan ? Nah hasil dari tag di atas hasilnya adalah seperti ini.
Hidayat Nur Wahid
Mmm ... lagi-lagi nggak asyik ya. :) Terpaksa sekali lagi saya berikan contoh yang terdiri dari beberapa pilihan.
Mana tokoh yang bebas KKN (boleh lebih dari satu) ?
Tiffatul Sembiring
Hidayat Nur Wahid
Megawati Soekarnoputri
Amien Rais
Akbar Tanjung
Yusril Ihza Mahendra
Nah untuk pilihan seperti di atas, kodenya tuh kayak gini:
Mana tokoh yang bebas KKN (boleh lebih dari satu) ?<br>Sekedar tambahan, untuk RADIO dan CHECKBOX anda dapat memberikan pilihan awal dengan menggunakan kata CHECKED di dalam tag <INPUT>. Contohnya adalah kode berikut:
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="Tiffatul ">Tiffatul Sembiring<br>
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="hidayat">Hidayat Nur Wahid <br>
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="mega">Megawati Soekarnoputri<br>
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="amin">Amien Rais<br>
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="akbar">Akbar Tanjung<br>
<INPUT TYPE="CHECKBOX" NAME="tokoh" VALUE="yusril">Yusril Ihza Mahendra
<INPUT TYPE="RADIO" CHECKED NAME="partai_idaman" VALUE="pks">Partai Keadilan Sejahtera<br>
<INPUT TYPE="CHECKBOX" CHECKED NAME="tokoh" VALUE="hidayat">Hidayat Nur Wahid
Yang akan memberikan hasil sesuatu yang sudah dipilih⁄dicheck:
Partai Keadilan Sejahtera
Hidayat Nur Wahid
Sekarang yang terakhir, select.
SELECT berbeda dengan RADIO dan CHECKBOX karena nggak make tag <INPUT>, tapi langsung memakai tag <SELECT>. Dan juga penggunaan SELECT harus ditutup dengan tag <⁄SELECT>. Bentuk lengkapnya adalah seperti ini.
<SELECT NAME="presidenku" MULTIPLE SIZE="1">
<OPTION>
....
<OPTION>
<⁄SELECT>
Seperti biasa ada atribut NAME, kemudian atribut MULTIPLE berguna agar dapat dilakukan pilihan lebih dari satu, dengan menekan tombol SHIFT kemudian meng-klik pilihan kedua, ketiga, dst. Atribut SIZE menunjukkan panjang list, defaultnya adalah 1. Kemudian di dalam tag <SELECT> kita dapat menuliskan tag <OPTION> yang menunjukkan pilihan-pilihan yang ada. Contoh penggunaan kongkrit nech.
Siapa yang layak menjadi presiden:
Nah untuk pilihan seperti di atas, kodenya adalah sebagai berikut:
Siapa yang layak menjadi presiden:<br>
<SELECT NAME="presidenku" SIZE="1">
<OPTION>Tiffatul Sembiring<br>
<OPTION>Hidayat Nur Wahid<br>
<OPTION>Amien Rais<br>
<OPTION>Irwan Prayetno<br>
<OPTION>Yusril Ihza Mahendra<br>
<OPTION>Saud Alba Radinas<br>
<OPTION>Ibnu Abdillah HF<br>
<OPTION>Tidak ada di pilihan<br>
</SELECT>
Sama seperti pada RADIO dan CHECKBOX, pada SELECT kita juga dapat melakukan pilihan awal, dengan menambahkan kata SELECTED pada tag <OPTION> seperti ini:
<OPTION SELECTED>Tidak ada di pilihan<br>
Jika kata SELECTED ini kita masukkan ke atas, maka default awal menjadi "Tidak ada pilihan" seperti contoh berikut:
Siapa yang layak menjadi presiden:
Pada penggunaan tag <SELECT> ini, kita tidak melihat adanya atribut VALUE. Hal ini disebabkan nilai data yang terkirim nantinya diambil dari kalimat yang ada di depan tag <OPTION>. Cara lain adalah dengan memberikan atribut VALUE pada tag <OPTION>, seperti contoh berikut:
<OPTION VALUE="hidayat">HIdayat Nur Wahid
Button, Reset, Submit dan Image
Input ini kesemuanya memberikan 'tombol' untuk ditekan. Perbedaannya adalah:
1 Button cuman sekedar tombol, kalau diklik nggak terjadi apa-apa, kecuali kalau kita kasih fungsi tambahan.
2 Reset tuh tombol yang kalau diklik langsung ngereset semua isian kita di form, kembali ke defaultnya.
3 Submit adalah tombol yang kalau diklik, isian di form bakalan langsung dikirim menggunakan cara tergantung atribut METHOD dan ACTION di dalam tag <FORM>
4 Image persis seperti submit, cuman gambarnya bisa diubah, nggak sekedar kotak jelek.
Nah kayak gitu perbedaannya. Terus bentuk kodenya, kalau BUTTON:
<INPUT TYPE="BUTTON" NAME="tombol" VALUE="Baca Deh" ONCLICK="JScode">
Atribut NAME fungsinya seperti biasa. Kalau VALUE isinya tulisan yang bakalan ditampilin di atas tombol. Nah kalau ONCLICK itu fungsi yang akan dikerjakan tombol kalau diklik. Tapi untuk nulis fungsi ini harus faham Java Script jadi untuk sementara tombol kita masih nggak berfungsi deh. Nah kode di atas tuh hasilnya kayak gini:
Kode untuk RESET adalah sebagai berikut:
<INPUT TYPE="RESET" NAME="batal" VALUE="Enggak Jadi">
Fungsi atribut NAME dan VALUE di atas sama dengan untuk BUTTON. Kode yang seperti di atas akan menampilkan tombol seperti ini. Ingat fungsi tombol ini adalah mereset form, beda dengan fungsi tombol BUTTON yang harus didefinisikan dulu.
Berikutnya SUBMIT memiliki kode seperti ini:
<INPUT TYPE="SUBMIT" NAME="name" VALUE="Kirim Dong">
Nah atribut pada tombol SUBMIT ini juga persis dengan tombol RESET, bedanya hanya fungsinya. Jika SUBMIT diklik maka kita mengirim, jika RESET diklik maka kita batal mengirim. Kode di atas hasilnya seperti ini:
Kalau IMAGE, kodenya seperti ini:
<INPUT TYPE="IMAGE" ALIGN="LEFT" NAME="gambar" SRC="tintin.gif">
Atribut yang baru cuma ALIGN yang berguna menentukan posisi gambar terhadap teks dengan pilihan-pilihan seperti "left", "right", "top", "middle", "bottom". Sedang SRC akan memanggil gambar yang akan ditampilkan. Kedua atribut ini sama persis dengan yang telah anda pelajari pada tutorial tentang gambar pada tag <IMG ...>. Hasil kode di atas kayak gini:
Hidden dan File
Input jenis HIDDEN fungsinya adalah mengirim data melalui form yang bukan hasil isian pengunjung. Jadi pembuat situs sudah mendefinisikan data yang akan dikirim. Hal ini berguna antara lain untuk pengolahan database menggunakan CGI script.
Kodenya adalah:
<INPUT TYPE="HIDDEN" NAME="rahasia" VALUE="penting">
Kode di atas akan mengirim variabel bernama "rahasia" dengan isi "penting" bersama data lainnya yang diisi dari form. Pengunjung sih nggak ngeliat apa-apa karena memang nggak ada yang ditampilkan di layar monitor.
Terakhir adalah tipe FILE yang berfungsi untuk mengirimkan file. Kodenya adalah sebagai berikut:
<INPUT TYPE="FILE" NAME="file" VALUE="file1">
Atributnya udah jelas kan. :) Nah, kode di atas akan memberikan hasil berikut:
Saya kira input file ini belum akan anda pakai dalam waktu dekat sehingga lebih baik anda berkonsentrasi untuk memahami jenis-jenis input lainnya.
Huaahhh ... saya telah selesai menjelaskan jenis-jenis input di dalam form. Kini kembali saya akan menjelaskan tentang tag <FORM> sendiri karena ada yang perlu ditambahkan. Perhatikan baik-baik.
Ceritanya saya memiliki Form sebagai berikut (boleh anda isi dan klik untuk menguji):
Form Percobaan
Jika misalnya anda mengisi Nama dengan "Ridwan Aziz" kemudian mengisi Email dengan "ridwanaziz@yahoo.com" dan mengisi "no comment" di textarea (kotak yang gede itu lho). Setelah itu mengecek partai pilihan di "Tidak Ada" lalu mengecek nama tokoh Amien Rais" dan Hidayat Nur Wahid" sebagai tokoh yang bebas KKN dan terakhir memilih "Tidak ada di pilihan" sebagai orang yang layak menjadi presiden. Maka data anda akan terkirim ke alamat imel yang tertulis di <FORM ... ACTION="mailto:......"> dalam bentuk seperti ini:
nama=Ridwan+Aziz&imel=ridwanaziz@yahoo.com&komentar=
no+comment&partai_idaman=abstain&tokoh=amin&tokoh=hidayat
&presidenku=Tidak+ada+di+pilihan&name=Kirim
Yak memanjang saudara-saudara, dan sangat sulit membacanya. Nah agar isian anda terkirim dalam bentuk yang lebih mudah dibaca, maka tag <FORM> perlu anda modifikasi dengan menambah atribut ENCTYPE="text⁄plain". Atribut ini berguna untuk mengubah bentuk data yang dikirim. Keseluruhan tag berubah menjadi:
<FORM METHOD="POST" ACTION="mailto:rohim94@yahoo.com" ENCTYPE="text⁄plain">
....
sama seperti sebelumnya.
....
<⁄FORM>
Dan data yang diterima menjadi:
imel=ridwanaziz@yahoo.com
komentar=no comment
partai_idaman=Partai Keadilan Sejahtera
tokoh=tiffatul
tokoh=hidayat
presidenku=Tidak ada di pilihan
name=Kirim
Lihat, lebih mudah dibaca bukan ? Demikianlah cara membuat form. Saya jadi nggak sabar ingin melihat hompej buatan anda nech. ;)
Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com
Posted by Abol Ezz
on 2:33 PM.
Filed under
