HTML - Form

1,582 views

Published on

Materi mengenai form pada halaman web dengan berbagai tipe inputan. Disertai contoh screenshot dan contoh untuk latihan. Enjoy..

Published in: Education
  • Be the first to comment

  • Be the first to like this

HTML - Form

  1. 1. HTML - Form Hyper Text Mark Up Language Pemograman Web (2010/2011) – Mar 3, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter
  2. 2. Ready to step forward ? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Yes.. We can, web programming is easy..
  3. 3. Remember Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <tag_name atribut=“value”> </tag> Or <tag_name atribut=“value” />
  4. 4. Pengenalan Form <ul><li><form> merupakan salah satu tag HTML </li></ul><ul><li>HTML forms membuat tampilan input pada halaman web </li></ul><ul><ul><li>Usually the purpose is to ask the user for information </li></ul></ul><ul><ul><li>Digunakan untuk ‘berkomunikasi’ dengan user </li></ul></ul><ul><ul><li>Hasil inputan akan dikirim ke server </li></ul></ul><ul><li>Form merupakan sebuah area yang berisi form elements </li></ul><ul><ul><li>Sintaks: <form parameters > ...form elements... </form> </li></ul></ul><ul><ul><li>Form elements meliputi: buttons, checkboxes, text fields, radio buttons, drop-down menus, dll </li></ul></ul><ul><ul><li>Untuk mengirim hasil inputan ke server maka akan digunakan form element yaitu submit </li></ul></ul><ul><ul><li>Selain untuk menerima inputan, form dapat digunakan untuk hal lainnya </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  5. 5. <ul><li>Sebuah dokumen interaktif dapat menangani input dari user </li></ul><ul><li>Analoginya : bahwa dokumen adalah sebuah formulir isian </li></ul><ul><li>Sebuah dokumen dapat mengandung satu atau beberapa form </li></ul><ul><li>Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) </li></ul><ul><li>Setiap form dapat menghimpun satu atau beberapa elemen input </li></ul><ul><li>Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input </li></ul><ul><li>Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di- submit ) </li></ul><ul><li>Skema dasar dokumen form : </li></ul><ul><li><form method=&quot;POST&quot; action=&quot;namaprogram&quot;> </li></ul><ul><li>bagian ini berisi bagian dokumen HTML yang akan menggambarkan </li></ul><ul><li>formulir isiandengan susunan sejumlah elemen input berbagai jenis </li></ul><ul><li></form> </li></ul>Form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  6. 6. <ul><li><form arguments > ... </form> merupakan tag yang memiliki pasangan (harus ditutup) </li></ul><ul><li>Atribut dari tag form memberikan aksi terhadap inputan user </li></ul><ul><ul><li>action=&quot; url &quot; (required) </li></ul></ul><ul><ul><ul><li>Memberitahukan kemana inputan akan diproses ketika tombol Submit ditekan </li></ul></ul></ul><ul><ul><li>method=&quot;get&quot; (default) </li></ul></ul><ul><ul><ul><li>Data form akan terkirim bersama URL </li></ul></ul></ul><ul><ul><li>method=&quot;post&quot; </li></ul></ul><ul><ul><ul><li>Data form akan dikirim bersama body halaman web </li></ul></ul></ul><ul><ul><li>target=&quot; target &quot; </li></ul></ul><ul><ul><ul><li>Memberitahukan lokasi halaman web ketika data selesai dieksekusi </li></ul></ul></ul><ul><ul><ul><li>target = _blank membuka di window baru </li></ul></ul></ul><ul><ul><ul><li>target = _top pada window yang sama </li></ul></ul></ul>Atribut <form> tag Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  7. 7. Atribut <input> tag <ul><li>Kebanyakan, tapi tidak semuanya, form elements menggunakan tag input , dengan ditambahkan atribut type=&quot;...&quot; untuk menandakan tipe dari inputan </li></ul><ul><ul><li>type dapat berupa text , checkbox , radio , password , hidden , submit , reset , button , file , atau image </li></ul></ul><ul><li>Selain itu atribut dari input dapat berupa: </li></ul><ul><ul><li>name : nama dari elemen </li></ul></ul><ul><ul><li>value : nilai dari elemen </li></ul></ul><ul><ul><li>disabled : user tidak dapat melakukan apapun terhadap elemen ini </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  8. 8. Text input <ul><li>Text field </li></ul><ul><li><input type=&quot;text&quot; name=&quot;textfield&quot; value=&quot;with an initial value&quot;> </li></ul><ul><li>A multi-line text field </li></ul><ul><li><textarea name=&quot;textarea&quot; cols=&quot;24&quot; rows=&quot;2&quot;>Hello</textarea> </li></ul><ul><li>A password field </li></ul><ul><li><input type=&quot;password&quot; name=&quot;textfield3&quot; value=&quot;secret&quot;> </li></ul>• Contoh diatas jika menggunakan tag input , kecuali textarea Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  9. 9. Buttons <ul><li>A submit button: <input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Submit&quot;> </li></ul><ul><li>A reset button: <input type=&quot;reset&quot; name=&quot;Submit2&quot; value=&quot;Reset&quot;> </li></ul><ul><li>A plain button: <input type=&quot;button&quot; name=&quot;Submit3&quot; value=&quot;Push Me&quot;> </li></ul><ul><li>submit : mengirim data </li></ul><ul><li>reset : restore inputan menjadi kondisi awal (kosong) </li></ul><ul><li>button : aksi dengan bantuan javascript </li></ul>• Perhatikan bahwa tag nya adalah input , bukan “button” Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  10. 10. Checkboxes <ul><li>A checkbox: </li></ul><ul><li><input type=&quot;checkbox&quot; name=&quot;checkbox” value=&quot;checkbox“ checked> </li></ul><ul><li>type : &quot;checkbox&quot; </li></ul><ul><li>name : merupakan nama dari elemen </li></ul><ul><li>value : memberikan nilai dari elemen ketika checkbox dicentang </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  11. 11. <ul><li>Jika 2 atau lebih radio button memiliki name yang sama, maka user dapat memilih salah satunya </li></ul><ul><ul><li>Maka dari itu radio button bersifat “group” </li></ul></ul><ul><li>Nilai dari elemen radio dapat didefenisikan pada atribut value </li></ul><ul><li>Sama seperti checkbox, radio button tidak bersifat teks </li></ul>Radio buttons <ul><li>Radio buttons:<br> <input type=&quot;radio&quot; name=&quot;radiobutton&quot; value=&quot;myValue1&quot;> male<br> <input type=&quot;radio&quot; name=&quot;radiobutton&quot; value=&quot;myValue2&quot; checked>female </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  12. 12. Drop-down menu <ul><li>A menu or list: <select name=&quot;select&quot;> <option value=&quot;red&quot;>red</option> <option value=&quot;green&quot;>green</option> <option value=&quot;BLUE&quot;>blue</option> </select> </li></ul><ul><li>Atribut yang tersedia: </li></ul><ul><ul><li>size : jumlah item yang terlihat pada list (defaultnya &quot;1&quot; ) </li></ul></ul><ul><ul><li>multiple : jika &quot;true&quot; , beberapa list bisa dipilih sekaligus (defaultnya &quot;false&quot; ) </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  13. 13. Hidden fields <ul><li><input type=&quot;hidden&quot; name=&quot;hiddenField&quot; value=&quot;nyah&quot;> &lt;-- right there, don't you see it? </li></ul><ul><li>Untuk apa? </li></ul><ul><ul><li>Semua data inputan dari elemen input akan dikirimkan ke server termasuk yang bertipe hidden </li></ul></ul><ul><ul><li>Merupakan ‘cara’ mengirmkan data tanpa terlihat oleh user </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  14. 14. Contoh <ul><li><html> <head> <title>Get Identity</title> </head> <body> <p><b>Who are you?</b></p> <form method=&quot;post&quot; action=&quot;&quot;> <p>Name: <input type=&quot;text&quot; name=&quot;textfield&quot;> </p> <p>Gender: <input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;m&quot;>Male <input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;f&quot;>Female </li></ul><ul><li></p> </form> </body> </html> </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  15. 15. Contoh form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  16. 16. Contoh form (2) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  17. 17. Pengelompokan elemen dokumen <ul><li>Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen </li></ul><ul><li>Pengelompokkan ada dua jenis : </li></ul><ul><ul><li>- inline (alur, flow ) : <span> </span> </li></ul></ul><ul><ul><li>- block (blok) : <div> </div> </li></ul></ul><ul><li><span> dan <div> biasanya digunakan dengan parameter id dan class </li></ul><ul><li>Struktur lojik ini dapat digunakan untuk : </li></ul><ul><ul><li>- mempermudah menginterpretasi isi dokumen </li></ul></ul><ul><ul><li>- memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  18. 18. Contoh <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Adrian Marzuki </span> <br> <span class=&quot;alamat&quot;> Jl. Tubagus Ismail XI/5 </span> </div> <div id=&quot;mhs02&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Dewi Purnama </span> <br> <span class=&quot;alamat&quot;> Jl. Cisitu Lama 24 </span> </div> <style type=&quot;text/css&quot;> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic} </style> <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;>Adrian Marzuki</span><br> ... Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  19. 19. To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  20. 20. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

×