Membuat Form

Embed Size (px)

Text of Membuat Form

Membuat Form

Fungsi Form Pada Halaman Web Salah satu cara untuk membuat halaman web yang interaktif adalah dengan menggunakan form. Biasanya form digunakan untuk meminta input dari pengunjung website. Form banyak digunakan pada guestbook, angket atau polling on-line, form pembelian barang secara on-line, form keanggotaan situs, dan sebagainya. Hal yang perlu diperhatikan adalah bahwa suatu form seringkali dibuat berkaitan dengan bahasa pemrograman lainnya seperti PHP, ASP dan CGI yang mana untuk menggunakan bahasa pemrograman tersebut diperlukan skill dan pengetahuan pemrograman yang lebih tinggi. Apabila anda menginginkan supaya form yang anda buat bisa berfungsi dengan baik, tidak ada salahnya setelah anda menguasai pemrograman HTML anda juga mempelajari bahasa pemrograman yang lain. Dikarenakan form juga termasuk di dalam pemrograman HTML maka buku ini juga membahas bagaimana cara membuat form. Struktur Dasar Suatu Form Suatu form selalu diawali oleh tag pembuka dan diakhiri oleh tag penutup . Pada tag kita sisipkan atribut action dan atribut method . Atribut action digunakan untuk menentukan kemana data dari form tersebut dikirim atau apabila tujuan pengiriman data adalah alamat email maka atribut action berisi alamat email dengan menyisipkan kode mailto . Atribut method digunakan untuk menentukan bagaimana cara pengiriman data pada form tersebut dilakukan. Data pada form biasanya dikirimkan ke server tempat website anda berada. Nilai atribut method ada dua, yaitu : POST dan GET. Data pada method GET dikirimkan dengan cara menambahkan data form tersebut pada akhir URL (alamat tujuan). Sedangkan data pada method POST dikirimkan secara terpisah menuju ke server HTTP. Struktur dasar kode HTML untuk form adalah sebagai berikut : Apabila data form kita kirimkan ke alamat email struktur dasar kode HTML untuk form menjadi : Atribut enctype=text/plain berfungsi supaya data yang kita kirimkan ke alamat email dapat dibaca. Diantara tag pembuka dan penutup disisipkan tag untuk menentukan jenis form yang kita buat. Form Textfield Form textfield digunakan apabila kita menginginkan user mengirimkan data dalam bentuk text. Kode yang digunakan adalah : .

Atribut name merupakan nama dari box form tersebut. Nama box harus unik dalam arti bahwa apabila anda membuat box form lebih dari satu maka masing-masing box form harus diberi nama yang berbeda. Atribut size merupakan ukuran box form. Nilai dari atribut size berupa angka. Atribut maxlength menentukan jumlah maksimum karakter text yang bisa diketikkan pada box form tersebut. Contoh form textfield : Form Textfield 1 Contoh form textfield. Nama : Simpan kode HTML diatas dengan nama file43a.html . Buka file43a.html . Perhatikan form textfield yang ditampilkan. Coba anda ketikkan sembarang text. Anda akan mengetahui bahwa kita tidak bisa mengetikkan karakter lebih dari 5. Hal ini dikarenakan kita menentukan nilai maxlength adalah 5. Apabila kita menginginkan tidak ada batasan jumlah karakter yang dapat diketikkan dalam textfield form tersebut maka atribut maxlength tidak perlu ditulis.

Gambar 58. Contoh form textfield untuk menginput nama user. Apabila kita menginginkan box form berisi data awal maka pada tag input kita tambahkan atribut value. Nilai dari atribut value adalah text yang ingn kita tampilkan. Contoh : Form Textfield 2

Contoh form textfield. Nama : Simpan kode HTML diatas dengan nama file43b.html . Buka file43b.html . Perhatikan form tersebut. Text yang kita masukkan sebagai nilai dari atribut value tampak pada box form tersebut.

Gambar 59. Contoh pemberian data awal menggunakan atribut value pada form textfield. Form Password Apabila kita menginginkan user memasukkan password maka kita bisa menyembunyikan text yang diketik oleh user. Caranya adalah dengan mengganti nilai dari atribut type menjadi password . Struktur form password adalah Contoh membuat form password : Form Password Contoh form password. Username :

Password :

Simpan kode HTML diatas dengan nama file44.html . Buka file44.html . Perhatikan form tersebut. Sekarang text yang kita ketikkan pada box password hanya tampak berupa tanda bintang atau bulatan hitam.

Gambar 60. Contoh form password. Readonly Form Apabila kita menginginkan form textfield tidak bisa ditulisi oleh user (dalam arti hanya bisa dibaca), maka pada tag kita sisipkan atribut readonly . Contoh : Readonly Form Contoh readonly form. Nama Saya :

Nama Anda : Simpan kode HTML diatas dengan nama file45.html . Buka file45.html . Perhatikan form tersebut. Sekarang box form Nama Saya tidak bisa ditulisi hanya bisa dibaca.

Gambar 61. Contoh readonly form. Form Textarea Berbeda dengan box form textfield yang hanya terdiri dari satu baris, box form textarea bisa terdiri lebih dari satu baris. Biasanya form textarea digunakan untuk mengambil data dari user berupa text panjang. Kode yang digunakan adalah : Form textarea diawali oleh tag dan diakhiri oleh tag . Seperti biasa, atribut name merupakan nama box form harus berisi nama yang unik untuk setiap box form. Atribut cols menentukan panjang box form sedangkan atribut rows menentukan tinggi box form. Contoh Form Textarea : Form Textarea 1 Contoh form textarea. Deskripsikan Diri Anda :
Simpan kode HTML diatas dengan nama file46a.html . Buka file46a.html . Perhatikan box form textarea tersebut. Box memiliki 4 rows.

Gambar 62. Contoh form textarea. Kita juga bisa memberikan text awal pada box form taxtarea. Berbeda dengan form textfield yang memiliki atribut value, form textarea tidak memiliki atribut value. Apabila kita menginginkan adanya text awal maka text awal kita sisipkan diantara tag . Kodenya menjadi : Text Awal Form Textarea 2 Contoh form textarea. Deskripsikan Diri Anda :
Coba deskripsikan diri anda ! Simpan kode HTML diatas dengan nama file46b.html . Buka file46b.html . Perhatikan box form textarea tersebut. Sekarang box form tersebut memiliki text awal.

Gambar 63. Contoh pemberian text awal pada form textarea.

Form textarea memiliki atribut lain yaitu atribut wrap . Atribut wrap menentukan tampilan data pada box form dan tampilan data pada saat dikirimkan. Nilai atribut wrap ada 3 macam, yaitu : off , menyebabkan text yang kita ketikkan apabila telah menyentuh batas kanan box form terus dilanjutkan tanpa berpindah ke baris baru. hard , menyebabkan text terpotong ketika text menyentuh batas kanan box form dan membentuk baris baru. Saat data dikirim, data tersebut juga akan dipotong per baris. soft , menyebabkan text terpotong ketika text menyentuh batas kanan box form dan membentuk baris baru. Saat data dikirim, data tersebut tidak dipotong per baris. Contoh : Form Textarea 3 Contoh form textarea. Nilai wrap off

Nilai wrap hard

Nilai wrap soft Simpan kode HTML diatas dengan nama file46c.html . Buka file46c.html . Coba anda ketikkan text pada ketiga box tersebut. Pada box pertama (wrap off), ketika text menyentuh batas kanan box maka text akan diteruskan tanpa memotong text. Sedangkan pada box kedua (wrap hard) dan ketiga (wrap soft), ketika text menyentuh batas kanan box maka text akan terpotong dan membentuk baris baru. Perbedaan antara wrap hard dan soft baru akan tampak ketika text yang diketikkan pada box tersebut dikirim.

Gambar 64. Contoh penggunaan atribut wrap pada form textarea. Form Check Box Form checkbox digunakan apabila kita ingin memberi pilihan kepada user. Form check box mengijinkan user memilih lebih dari satu. Kode form check box adalah sebagai berikut : Berbeda dengan atribut name pada form textfield dan textarea, atribut name pada form check box bisa diberi nama sama. Atribut value menentukan nilai data ketika data tersebut dikirimkan ke server. Contoh Penggunaan Form Check Box : Form Check Box 1 Contoh form Check Box. Mata pelajaran apa yang anda sukai ? (boleh pilih lebih dari satu)
Matematika
Bahasa Indonesia
Bahasa Inggris
Fisika
Biologi

Tidak ada yang saya sukai
Simpan kode HTML diatas dengan nama file47a.html . Buka file47a.html . Perhatikan form check box tersebut. Silahkan anda pilih yang anda sukai. Anda boleh memilih lebih dari satu.

Gambar 65. Contoh form checkbox. Kita juga bisa memberi tanda check sejak awal pada salah satu pilihan. Atribut yang digunakan adalah atribut checked . Contoh : Form Check Box 2 Contoh form Check Box. Sepeda
Motor
Mobil
Pesawat
Simpan kode HTML diatas dengan nama file47b.html .

Buka file47b.html . Perhatikan form check box tersebut. Sekarang pada pilihan Mobil, box sudah diberi tanda check sejak awal.

Gambar 66. Contoh pemberian data awal pada form checkbox. Form Radio Button Seperti pada form check box, form radio button juga digunakan apabila kita ingin memberikan suatu pilihan kepada user. Tetapi berbeda dengan form check box yang mengijinkan user memilih lebih dari satu, maka pada form radio button user hanya boleh memilih salah satu. Form radio button sering kali digunakan pada polling atau quiz on-line. Kode form radio button adalah sebagai berikut : Atribut name harus memiliki nilai yang sama untuk semua box pada form radio button. Contoh Penggunaan Radio Button : Form Radio Button Contoh form Radio Button. Apa masakan kesukaan anda ? (pilih salah satu)
Sate Ayam
Rendang
Gudeg
Sop Buntut
Tidak ada pilihan

Apa minuman kesukaan anda ? (pilih salah satu)
Es Teh
Es Jeruk

Soda Gembira
Jus Tomat
Tidak ada pilihan
Simpan kode HTML diatas dengan nama file48.html . Buka file48.html . Perhatikan form radio button tersebut. Coba anda kilik pilihan yang anda sukai, anda hanya boleh memilih salah satu saja.

Gambar 67. Contoh form radio button. Form M