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">

&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.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