Your SlideShare is downloading. ×
0
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
HTML - Form
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML - Form

1,320

Published on

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

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
171
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Pemrograman Web
  • Pemrograman Web
  • Transcript

    • 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. Ready to step forward ? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Yes.. We can, web programming is easy..
    • 3. Remember Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <tag_name atribut=“value”> </tag> Or <tag_name atribut=“value” />
    • 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. <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. <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. 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. 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. 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. 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. <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. 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. 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. 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. Contoh form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 16. Contoh form (2) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 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. 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. To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 20. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

    ×