Post on 11-Nov-2014
description
transcript
HTML - FormHyper Text Mark Up Language
Pemograman Web (2010/2011) – Mar 3, 2011 Teknik Informatika, Universitas Islam Indonesia
1
Follow Hari Setiaji on Twitter
Ready to step forward ?
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Yes.. We can, web programming is easy..
Remember
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
<tag_name atribut=“value”> </tag>
Or
<tag_name atribut=“value” />
<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.KomPemograman 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>
5
Form
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman 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.KomPemograman 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.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
8
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 textareaPemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
9
ButtonsA 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.KomPemograman 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.KomPemograman 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.KomPemograman 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.KomPemograman 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.KomPemograman 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.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh form
15Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh form (2)
16Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman 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
17Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh
18
<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.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
To do list..
19Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Finally
20Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom