�ݺ�ߣ

HTML - Form Hyper Text Mark Up Language Pemograman Web (2010/2011) – Mar 3, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter

Ready to step forward ? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Yes.. We can, web programming is easy..

Remember Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <tag_name atribut=“value”> </tag> Or <tag_name atribut=“value” />

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

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="POST" action="namaprogram"> 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

<form arguments > ... </form> merupakan tag yang memiliki pasangan (harus ditutup) Atribut dari tag form memberikan aksi terhadap inputan user action=" url " (required) Memberitahukan kemana inputan akan diproses ketika tombol Submit ditekan method="get" (default) Data form akan terkirim bersama URL method="post" Data form akan dikirim bersama body halaman web target=" target " 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

Atribut <input> tag Kebanyakan, tapi tidak semuanya, form elements menggunakan tag input , dengan ditambahkan atribut type="..." 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

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

Buttons A submit button: <input type="submit" name="Submit" value="Submit"> A reset button: <input type="reset" name="Submit2" value="Reset"> A plain button: <input type="button" name="Submit3" value="Push Me"> 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

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

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="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked>female Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Drop-down menu A menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> Atribut yang tersedia: size : jumlah item yang terlihat pada list (defaultnya "1" ) multiple : jika "true" , beberapa list bisa dipilih sekaligus (defaultnya "false" ) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Hidden fields <input type="hidden" name="hiddenField" value="nyah"> <-- 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

Contoh <html> <head> <title>Get Identity</title> </head> <body> <p><b>Who are you?</b></p> <form method="post" action=""> <p>Name: <input type="text" name="textfield"> </p> <p>Gender: <input type="radio" name="gender" value="m">Male <input type="radio" name="gender" value="f">Female </p> </form> </body> </html> Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Contoh form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Contoh form (2) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

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

Contoh <div id="mhs01" class="mhs"> <span class="nama"> Adrian Marzuki </span> <br> <span class="alamat"> Jl. Tubagus Ismail XI/5 </span> </div> <div id="mhs02" class="mhs"> <span class="nama"> Dewi Purnama </span> <br> <span class="alamat"> Jl. Cisitu Lama 24 </span> </div> <style type="text/css"> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic} </style> <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> ... Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

�ݺ�ߣ

HTML - Form

Recommended

More Related Content

What's hot (20)

Similar to HTML - Form (20)

More from Hari Setiaji (13)

Recently uploaded (20)

HTML - Form

Editor's Notes