Bab 5 FORM. A. Maksud Dan Tujuan 1. Maksud

Transkripsi

1 A. Maksud Dan Tujuan 1. Maksud Bab 5 FORM Menginputkan data menggunakan form dan membuat tombol dengan tag HTML Membuat halaman web terhubung dengan halaman lain (link) 2. Tujuan Mahasiswa dapat membuat form dan membuat tombol yang digunakan untuk mengirim data ditampilkan dalam dokumen web Mahasiswa dapat membuat link untuk menghubungkan halamanhalaman web B. Teori dan Praktek Form digunakan untuk memasukkan data. Menggunakan pasangan tag dan Atribut yang sering dipakai ACTION dan METHOD ACTION menentukan URL yang akan dijalankan dan menerima masukan pada form METHOD = POST : informasi dikirim secara terpisah dengan URL METHOD = GET : informasi dikirim menjadi satu dengan URL Memasukkan Data Dengan tag <INPUT> Terletak di dalam tag.. Atribut NAME SIZE MAXLENGTH VALUE CHECKED TYPE Keterangan nama data, diperlukan semua jenis masukan, kecuali SUBMIT dan RESET ukuran kotak masukan utk teks dan password jumlah karakter maksimum dalam kotak teks dan password nilai awal kotak masukan agar kotak cek dalam keadaan terpilih menentukan tipe kotak masukan Tipe TEXT untuk memasukkan data string (nama, alamat, dll) Contoh: <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20" MAXLENGTH = "20" VALUE = nama Anda > nama = nama field teks panjang tampilan 20 karakter jumlah karakter maksimum 20 isi awal = nama Anda Tombol SUBMIT dan RESET Dibuat dengan atribut TYPE pada tag <INPUT> <INPUT TYPE = SUBMIT > Tulisan di tombol dapat diganti dengan atribut VALUE 33

2 <INPUT TYPE = SUBMIT VALUE= Kirim > Tombol RESET untuk mengosongkan atau mengembalikan ke nilai teks awal file entrinama.html <FORM ACTION = "info.html" METHOD = "POST"> Nama : <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20" MAXLENGTH = "20" VALUE="nama Anda"> Hobby : <INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25" MAXLENGTH = "40"> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"> </HTML> file info.html <TITLE></TITLE> Info </HTML> 34

3 Tipe PASSWORD Membuat karakter yang diketikkan diganti dengan karakter lain. File Password.html Nama pemakai : <INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "8" MAXLENGTH = "8"> Password : <INPUT TYPE = "PASSWORD" NAME = "nama" SIZE = "8" MAXLENGTH = "8"> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"> </HTML> Tipe CHECKBOX Untuk membuat kotak cek melibatkan atribut NAME sebagai nama kotak cek atribut CHECKED memberi nilai awal file kotakcek.html 35

4 Buah yang Anda sukai: <INPUT TYPE = "CHECKBOX" NAME = "anggur" CHECKED>Anggur <INPUT TYPE = "CHECKBOX" NAME = "jeruk">jeruk <INPUT TYPE = "CHECKBOX" NAME = "melon">melon </HTML> Tombol Radio Untuk implementasi pilihan user agar memilih satu diantara sejumlah pilihan dibuat dengan atribut TYPE = RADIO dari tag <INPUT> Untuk sekelompok tombol radio, atribut NAME diisi dengan nama sama Atribut CHECKED menyatakan tombol itu menjadi nilai awal. Atribut VALUE menentukan nilai terhadap nama data bila tombol diklik File radio.html Jenis Kelamin: NAME = "sex" VALUE = "P" CHECKED>Pria NAME = "sex" VALUE = "W">Wanita <HR> Agama : NAME = "agama" VALUE = "I">Islam NAME = "agama" VALUE = "K">Kristen 36

5 NAME = "agama" VALUE = "T">Katolik NAME = "agama" VALUE = "B">Budha NAME = "agama" VALUE = "H">Hindu NAME = "agama" VALUE = "L">Lain-lain </HTML> TEXTAREA Untuk masukan teks dengan sejumlah baris dengan pasangan tag <TEXTAREA> dan </TEXTAREA> Teks di dalam pasangan tag <TEXTAREA> dan </TEXTAREA> menjadi isi awal dalam textarea. Atribut NAME ROWS COLS WRAP Keterangan nama textarea jumlah baris yang tampil jumlah kolom yang tampil teks otomatis dilipat jika panjang baris tidak cukup file textarea.html Komentar Anda: <TEXTAREA NAME = "komentar" ROWS = "5" COLS = "40" WRAP>Ini adalah komentar 37

6 </TEXTAREA> < /HTML> Pemilihan dengan SELECT Menggunakan pasangan tag <SELECT> dan </SELECT> Akan membentuk kotak combo atau kotak list file select.html <TITLE>Contoh SELECT - Model Drop Down</TITLE> Musik yang paling Anda sukai: <SELECT NAME = "musik"> <OPTION VALUE = "Jazz">Jazz <OPTION VALUE = "Rock">Rock <OPTION VALUE = "Keroncong">Keroncong <OPTION VALUE = "Dangdut">Dangdut <OPTION VALUE = "Lain-lain" SELECTED>Lain-lain </SELECT> < /HTML> 38

7 untuk membentuk kotak list dipakai atribut SIZE <SELECT NAME = "musik" SIZE = "3"> Akan menghasilkan: Atribut MULTIPLE memungkinkan user memilih lebih dari satu pilihan. <SELECT NAME = "musik" MULTIPLE> Tombol / Button Dapat dibuat atribut TYPE= BUTTON pada tag <INPUT> Contoh: file button.html <TITLE>Contoh BUTTON</TITLE> Cobalah untuk mengklik tombol berikut <INPUT TYPE = "BUTTON" VALUE = "Ke Sebelumnya" ONCLICK = "self.history.back();" > < /HTML> 39

8 Tugas Praktek Buatlah dengan script html untuk menampilkan form, serta tambahkan tombol kirim dan reset dengan tag HTML, pada browser seperti berikut ini: 40