Membuat Form

  • Published on
    05-Jul-2015

  • View
    320

  • Download
    6

Embed Size (px)

Transcript

<p>Membuat Form</p> <p>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 : .</p> <p>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.</p> <p>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 </p> <p> 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.</p> <p>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 : <br><br> Password : </p> <p> 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.</p> <p>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 : <br><br> 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.</p> <p>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 :<br> Simpan kode HTML diatas dengan nama file46a.html . Buka file46a.html . Perhatikan box form textarea tersebut. Box memiliki 4 rows.</p> <p>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 :<br> 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.</p> <p>Gambar 63. Contoh pemberian text awal pada form textarea.</p> <p>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 <br><br> Nilai wrap hard <br><br> 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.</p> <p>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)<br> Matematika<br> Bahasa Indonesia<br> Bahasa Inggris<br> Fisika<br> Biologi<br></p> <p>Tidak ada yang saya sukai<br> 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.</p> <p>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<br> Motor<br> Mobil<br> Pesawat<br> Simpan kode HTML diatas dengan nama file47b.html .</p> <p>Buka file47b.html . Perhatikan form check box tersebut. Sekarang pada pilihan Mobil, box sudah diberi tanda check sejak awal.</p> <p>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)<br> Sate Ayam<br> Rendang<br> Gudeg<br> Sop Buntut<br> Tidak ada pilihan<br><br> Apa minuman kesukaan anda ? (pilih salah satu)<br> Es Teh<br> Es Jeruk<br></p> <p>Soda Gembira<br> Jus Tomat<br> Tidak ada pilihan<br> 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.</p> <p>Gambar 67. Contoh form radio button. Form Menu Dan List Form Menu memiliki fungsi seperti radio button. Perbedaannya, form menu ditampilkan dalam bentuk box drop down. Kode form menu adalah sebagai berikut : Pilihan 1 Pilihan 2 Form menu diawali dengan tag dan diakhiri oleh tag . Semua pilihan yang kita sajikan terletak diantara tag . Kita juga bisa memberi pilihan awal dengan menyisipkan atribut selected pada tag menjadi, Pilihan 2 . Contoh Form Menu : </p> <p>Form Menu Contoh form Menu. Sebutkan bulan kelahiran anda ! Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Simpan kode HTML diatas dengan nama file49.html . Buka file49.html . Perhatikan form menu tersebut. Form menu disajikan dalam bentuk box drop down. Kita menyisipkat atribut selected pada tag untuk bulan Agustus sehingga bulan Agustus ditampilkan sebagai pilihan awal.</p> <p>Gambar 68. Contoh form menu.</p> <p>Gambar 69. Bentuk dari form menu adalah drop down box. Form list mirip dengan form menu. Hanya saja pada form list kita bisa menentukan tinggi box yang ditampilkan dan user boleh memilih lebih dari satu pilihan. Kode form List adalah sebagai berikut : Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Atribut size menunjukkan tinggi box sedangkan atribut multiple membolehkan pemilih memilih lebih dari satu pilihan. Contoh Form List : Form List Contoh form List. Pilih bahasa yang anda kuasai ! (boleh pilih lebih dari satu)<br> Bahasa Indonesia</p> <p>Bahasa Inggris Bahasa Mandarin Bahasa Jepang Bahasa Perancis Bahasa Jerman Bahasa Belanda Simpan kode HTML diatas dengan nama file50.html . Buka file50.html . Perhatikan form list tersebut. Form list tersebut memiliki tinggi box 3 baris dan mengijinkan user memilih pilihan lebih dari satu. Pilihan lebih dari satu dilakukan dengan cara menekan tombol Ctrl lalu klik beberapa pilihan.</p> <p>Gambar 70. Contoh form list. Form File Field Form file field biasanya dipakai untuk memudahkan user mengupload file. Kode form file field adalah sebagai berikut : Contoh Form File Field : Form File Field Contoh form File Field. </p> <p>Upload file : Simpan kode HTML diatas dengan nama file51.html . Buka file51.html . Coba anda klik tombol browse/choose dan pilih salah satu file yang ada di komputer anda. Setelah anda selesai memilih, maka akan tampak alamat file tersebut pada box file field.</p> <p>Gambar 71. Contoh form file field. Reset Button Sesuai namanya, reset button digunakan untuk mengembalikan form kebentuk awal sebelum diisi atau diubah oleh user. Kode untuk Reset Button adalah : Atribut name merupakan nama button. Atribut value pada reset button merupakan text yang akan ditampilkan pada button. Anda bisa memberikan nilai apa saja terhadap atribut ini. Contoh Penggunaan Reset Button : Reset Button Contoh reset button. Nama Anda : <br><br> Jenis Kelamin : Pria Wanita</p> <p><br><br> Pendidikan anda sekarang : (pilih salah satu)<br> SD dan yang sederajat<br> SMP dan yang sederajat<br> SMA dan yang sederajat<br> Universitas dan yang sederajat<br> Tidak ada pilihan<br><br> Deskripsikan Diri Anda :<br><br><br> Simpan kode HTML diatas dengan nama file52.html . Buka file52.html . Coba anda isi form tersebut. Apabila anda klik tombol Hapus maka semua text yang anda ketikkan akan dihapus dan form kembali ke kondisi awal.</p> <p>Gambar 72. Contoh reset button.</p> <p>Submit Button Submit button merupakan tombol aksi yang apabila kita klik maka data yang diketikkan pada form akan dikirim ke alamat tujuan. Kode submit button adalah : Atribut name merupakan nama button. Atribut value pada submit button merupakan text yang akan ditampilkan pada button. Anda bisa memberikan nilai apa saja terhadap atribut ini. Contoh penggunan sumbit button : Submit Button Contoh submit button. Nama Anda : <br><br> Jenis Kelamin : Pria Wanita <br><br> Pendidikan anda sekarang : (pilih salah satu)<br> SD dan yang sederajat<br> SMP dan yang sederajat<br> SMA dan yang sederajat<br> Universitas dan yang sederajat<br> Tidak ada pilihan<br><br> Deskripsikan Diri Anda :<br><br><br> Simpan kode HTML diatas dengan nama file53.html . Buka file53.html . Submit button berfungsi sebagai tombol aksi yang akan mengirimkan data ke alamat tujuan. Apabila tombol Kirim ! kita klik maka akan muncul pesan error karena form tersebut tidak bisa berfungsi sepenuhnya. Catatan : Suatu form supaya bisa berfungsi dengan sepenuhnya harus dikaitkan dengan bahasa pemrograman lain seperti : PHP, CGI atau ASP. Pembahasan mengenai bahasa pemrograman PHP, CGI dan ASP akan saya utarakan pada tutorial yang berbeda.</p> <p>Gambar 73. Contoh submit button. Image Field Image field memiliki fungsi sama dengan submit button yaitu sebagai tombol aksi yang akan mengirim data ke alamat yang dituju. Perbedaanya, image field menggunakan gambar sebagai tombolnya. Kode image field adalah : Atribut src merupakan alamat image/gambar yang akan kita gunakan dalam image form.</p> <p>Atribut width dan height merupakan lebar dan tinggi gambar. Atribut border menentukan tebal border yang mengelilingi gambar. Biasanya para pembuat website lebih suka untuk tidak memberi border pada gambar sehingga mengisi atribut border dengan nilai 0. Kita juga bisa menambahkan atribut align untuk menentukan posisi gambar. Nilai yang digunakan biasanya adalah absmiddle yang berfungsi untuk meletakkan gambar pada posisi absolut tengah segaris dengan tex...</p>