Dokumen ini menjelaskan dasar-dasar pemrograman web menggunakan HTML, terutama mengenai elemen formulir (form) yang digunakan untuk mengumpulkan input dari pengguna. Form dapat memiliki berbagai elemen input seperti tombol, checkbox, dan dropdown, serta harus ditentukan tindakan yang akan diproses di server. Selain itu, dokumen memberikan contoh sintaksis dan pengelompokan elemen untuk memperjelas struktur dokumen.

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 <form> merupakan salah satu tag HTML HTML forms membuat tampilan input pada halaman web Usually the purpose is to ask the user for information Digunakan untuk ‘berkomunikasi’ dengan user Hasil inputan akan dikirim ke server Form merupakan sebuah area yang berisi form elements Sintaks: <form parameters > ...form elements... </form> Form elements meliputi: buttons, checkboxes, text fields, radio buttons, drop-down menus, dll Untuk mengirim hasil inputan ke server maka akan digunakan form element yaitu submit Selain untuk menerima inputan, form dapat digunakan untuk hal lainnya Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

5. 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 berbagai karakteristik 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=&quot;POST&quot; action=&quot;namaprogram&quot;> bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isiandengan susunan sejumlah elemen input berbagai jenis </form> Form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

6. <form arguments > ... </form> merupakan tag yang memiliki pasangan (harus ditutup) Atribut dari tag form memberikan aksi terhadap inputan user action=&quot; url &quot; (required) Memberitahukan kemana inputan akan diproses ketika tombol Submit ditekan method=&quot;get&quot; (default) Data form akan terkirim bersama URL method=&quot;post&quot; Data form akan dikirim bersama body halaman web target=&quot; target &quot; Memberitahukan lokasi halaman web ketika data selesai dieksekusi target = _blank membuka di window baru target = _top pada window yang sama Atribut <form> tag Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

7. Atribut <input> tag Kebanyakan, tapi tidak semuanya, form elements menggunakan tag input , dengan ditambahkan atribut type=&quot;...&quot; untuk menandakan tipe dari inputan type dapat berupa text , checkbox , radio , password , hidden , submit , reset , button , file , atau image Selain itu atribut dari input dapat berupa: name : nama dari elemen value : nilai dari elemen disabled : user tidak dapat melakukan apapun terhadap elemen ini Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

8. Text input Text field <input type=&quot;text&quot; name=&quot;textfield&quot; value=&quot;with an initial value&quot;> A multi-line text field <textarea name=&quot;textarea&quot; cols=&quot;24&quot; rows=&quot;2&quot;>Hello</textarea> A password field <input type=&quot;password&quot; name=&quot;textfield3&quot; value=&quot;secret&quot;> • Contoh diatas jika menggunakan tag input , kecuali textarea Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

9. Buttons A submit button: <input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Submit&quot;> A reset button: <input type=&quot;reset&quot; name=&quot;Submit2&quot; value=&quot;Reset&quot;> A plain button: <input type=&quot;button&quot; name=&quot;Submit3&quot; value=&quot;Push Me&quot;> submit : mengirim data reset : restore inputan menjadi kondisi awal (kosong) button : aksi dengan bantuan javascript • Perhatikan bahwa tag nya adalah input , bukan “button” Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

10. Checkboxes A checkbox: <input type=&quot;checkbox&quot; name=&quot;checkbox” value=&quot;checkbox“ checked> type : &quot;checkbox&quot; name : merupakan nama dari elemen value : memberikan nilai dari elemen ketika checkbox dicentang Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

11. Jika 2 atau lebih radio button memiliki name yang sama, maka user dapat memilih salah satunya Maka dari itu radio button bersifat “group” Nilai dari elemen radio dapat didefenisikan pada atribut value Sama seperti checkbox, radio button tidak bersifat teks Radio buttons 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 Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

12. Drop-down menu 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> Atribut yang tersedia: size : jumlah item yang terlihat pada list (defaultnya &quot;1&quot; ) multiple : jika &quot;true&quot; , beberapa list bisa dipilih sekaligus (defaultnya &quot;false&quot; ) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

13. Hidden fields <input type=&quot;hidden&quot; name=&quot;hiddenField&quot; value=&quot;nyah&quot;> &lt;-- right there, don't you see it? Untuk apa? Semua data inputan dari elemen input akan dikirimkan ke server termasuk yang bertipe hidden Merupakan ‘cara’ mengirmkan data tanpa terlihat oleh user Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

14. Contoh <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 </p> </form> </body> </html> 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 Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen Pengelompokkan ada dua jenis : - inline (alur, flow ) : <span> </span> - block (blok) : <div> </div> <span> dan <div> biasanya digunakan dengan parameter id dan class Struktur lojik ini dapat digunakan untuk : - mempermudah menginterpretasi isi dokumen - memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS 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