1 / 14

FORM

FORM. Gembong Edhi Setyawan. FORM. Sebuah dokumen interaktif dapat menangani input dari user Analoginya : bahwa dokumen adalah sebuah formulir isian Sebuah dokumen dapat mengandung satu atau beberapa form

sienna
Download Presentation

FORM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FORM Gembong Edhi Setyawan

  2. FORM • Sebuah dokumen interaktif dapat menangani input dari user • Analoginya : bahwa dokumen adalah sebuah formulir isian • Sebuah dokumen dapat mengandung satu atau beberapa form • Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) • Setiap form dapat menghimpun satu atau beberapa elemen input • Ada beberapa jenis elemen input untuk menangani berbagaikarakteristik data input • Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit) • Skema dasar dokumen form : <form method="POST" action="namaprogram"> bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis </form> • Contoh sebuah form sederhana untuk meminta nama user : <form method="POST" action="proses.php"> <label for="nama">Ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"> </form>

  3. Element Form • Untuk membuat form : <form> … </form>

  4. Karakteristik data input • Tekssatubaris (single-line text) <input type="text"> • Teksbanyakbaris (multi-line text) <textarea></textarea> • Teksrahasia (password) <input type="password"> • Pilihantunggal (single selection) <input type="radio">, <select></select> • Pilihanmajemuk (multiple selections) <select multiple></select> • Centang (on/off) <input type="checkbox"> • Data bawaan/tersembunyi (hidden) <input type="hidden"> • File <input type="file"> • Koordinat 2D dalamsebuahbidanggambar <input type="image"> • Aksi user melaluipenekanantombol <input type="submit">, <input type="reset">, <input type="button">, <button></button>

  5. Tag input • <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuksisi server id : identifier untuksisi browser value : nilai default disabled : jikadisebutkanmakaelementidakaktif (tidakdigunakan) • <input type="[text|password]" name="nama"readonly size="m" maxlength="n"> readonly : jikadisebutkanmakaelementidakbisadiubahnilainya size : ukuranlebardalambanyaknyakarakter (bisadi-override oleh CSS) maxlength : banyaknyakaraktermaksimal yang dapatdimasukkan user • <input type="[radio|checkbox]" name="nama" checked> checked : jikadisebutkanmakadefaultnyaadalahdalamkeadaandipilih • <input type="image" src="gambar" name="nama" alt="alternatif"> src : nama file gambar alt : teks yang ditampilkanbila browser tidakdapatmenampilkangambar

  6. Tag textarea, select, button • <textarea name="nama" rows="b" cols="k">nilai</textarea> nilai : nilai default rows : banyaknyabaris yang ditampilkan (tinggi) cols : banyaknyakolom/karakter yang ditampilkan (lebar) • <select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option> … </select> multiple : jikadisebutkanmakapilihanbolehlebihdarisatu (sambilmenekantombol Ctrl) size : banyaknyabarispilihan yang ditampilkan (default=1) selected : jikadisebutkanmakadefaultnyadalamkeadaanterpilih • <button type="jenis" name="name" value="nilai">tampilan</button> type : submit, reset, button tampilan : kodedalam HTML yang akanmenjaditampilanuntuktombol

  7. <form method="POST" action="proses.php"> Silahkan isi data Anda <input type="hidden" name="halaman" value="1"> <table border="1"> <tr> <td><label for="nama">Nama lengkap:</label></td> <td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td> </tr> <tr> <td><label for="pass">Password:</label></td> <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td> </tr> <tr> <td><label for="jenkel">Jenis kelamin:</label></td> <td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br> <input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td> </tr> <tr> <td><label for="alamat">Alamat:</label></td> <td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td> </tr> <tr> <td><label for="bayar">Sudah bayar?</label></td> <td><input type="checkbox" name="bayar" id="bayar">Sudah</td> </tr> </table> <input type="submit" value=" Kirim "> <input type="reset" value="Reset"> </form> Contoh form (1)

  8. Contoh form (2) <form method="POST" action="proses.php" enctype="multipart/form-data"> <input type="hidden" name="halaman" value="2"> <table border="1"> <tr> <td><label for="kota">Kota:</label></td> <td><select name="kota" id="kota"> <option value="">pilih kota...</option><option value="bdg">Bandung</option> <option value="jkt">Jakarta</option><option value="sby">Surabaya</option> </select></td></tr> <tr> <td><label for="kerja">Pekerjaan:</label></td> <td><select name="kerja" id="kerja" size="4"> <option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option> <option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option> </select></td></tr> <tr> <td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td> <td><select name="bahasa" id="bahasa" size="4" multiple> <option value="id">Indonesia</option> <option value="en">Inggris</option> <option value="ch">Cina</option> <option value="fr">Prancis</option> </select></td></tr> <tr> <td>Hobi:<br>(bisa lebih dari satu)</td> <td><input type="checkbox" name="hobi" value="1">Berenang<br> <input type="checkbox" name="hobi" value="2">Nonton film<br> <input type="checkbox" name="hobi" value="3">Musik</td> </tr><tr> <td><label for="foto">Foto:</label></td> <td><input type="file" name="foto" id="foto" size="10"></td></tr> </table> <button type="submit">Kirim <img src="smiley.gif"></button> <button type="reset">Reset <img src="tanya.gif"></button> </form>

  9. Link padabidanggambar • Link dapatdidefinisikanpadasatuataubeberapa area padasebuahbidanggambar • Skema : <imgsrc="gambar" usemap="#peta"> <map name="peta"> <area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1"> <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2"> ... </map> src : nama file gambar usemap : namadefinisipeta yang digunakan shape : default, rect, circle, poly coords : koordinat, dengan format : default : x1,y1,x2,y2 rect : x1,y1,x2,y2 circle : x,y,r poly : x1,y1,x2,y2,x3,y3,…,xn,yn href : URL yang ditujubila area di-klik

  10. Klik pada wajah untuk melihat biodata Contohpenggunaan map Klikpadawajahuntukmelihatbiodata<br> <imgsrc="aadc.jpg" usemap="#aadc" border="0"> <map name="aadc"> <area shape="circle" coords="131,82,37" href="titi.html" alt="TitiKamal"> <area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia"> <area shape="poly" coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86" href="dian.html" alt="Dian Sastro"> <area shape="rect" coords="314,105,355,170" href="ladya" alt="Ladya Cheryl"> <area shape="circle" coords="387,134,30" href="sissy.html" alt="Sissy Priscillia"> <area shape="default" nohref> </map>

  11. PERBEDAAN POST & GET KODE HTML <html><body>  <h2>Toko Alat Tulis Amalia</h2>  <form action="proses.php" method="post">  <select name="barangpesanan">  <option>Pensil</option>  <option>Buku Tulis</option>  <option>Ballpoint</option>  </select>  Jumlah pesanan: <input name="jumlah" type="text">  <input type="submit" value="Submit">  </form> </body></html>

  12. PERBEDAAN POST & GET KODE PHP <html> <body>  <?php  $jumlah = $_POST['jumlah'];  $barangpesanan = $_POST['barangpesanan'];  echo "Anda memesan ". $jumlah . " " . $barangpesanan . ".<br>";  echo "Terima kasih atas kesediaan Anda memesan barang dari kami!";  ?></body> </html>

  13. PERBEDAAN POST & GET KODE HTML <html> <body> <h2>Toko Alat Tulis Amalia</h2> <form action="proses.php" method="get"> <select name="barangpesanan"> <option>Pensil</option> <option>Buku Tulis</option> <option>Ballpoint</option> </select> Jumlah pesanan: <input name="jumlah" type="text"> <input type="submit" value="Submit"> </form> </body> </html>

  14. PERBEDAAN POST & GET KODE PHP <html> <body> <?php $jumlah = $_GET['jumlah']; $barangpesanan = $_GET['barangpesanan']; echo "Anda memesan ". $jumlah . " " . $barangpesanan . ".<br>"; echo "Terima kasih atas kesediaan Anda memesan barang dari kami!"; ?></body> </html>

More Related