HTML5 Form. Auriza Akbar 25 Mei 2012

X/HTML5 Form Auriza Akbar

[email protected] 25 Mei 2012

Form

Form ●

Komponen halaman web yang memiliki kontrol-kontrol formulir: ●

●

text field, text area, button, radio button, checkbox, …

User dapat berinteraksi dengan form ●

menyediakan data yang dapat dikirim ke server untuk diproses lebih lanjut

Form in Real-Life™ text field

radio btn

checkbox text area

Langkah Penulisan ●

Penulisan user interface (UI)

●

Implementasi pemrosesan server-side

●

Konfigurasi UI untuk berkomunikasi dengan server

Penulisan UI

Penulisan UI dalam HTML ●

Setiap form dimulai dengan elemen

●

●

di dalamnya terdapat elemen-elemen kontrol

Contoh: form pendaftaran sederhana ●

, satu baris text field

●

, untuk memberi label pada kontrol

●

, tiap bagian form dianggap sebagai satu paragraf

Form Pendaftaran (1)

Nama:

Email:

Form Pendaftaran (1)

●

●

●

Elemen multiguna untuk representasi kontrol input Atribut name digunakan untuk pemrosesan form oleh server sebagai acuan parameter Berbagai macam tipe, ditambah tipe baru untuk X/HTML5 yang belum didukung oleh semua browser ●

http://www.w3.org/TR/html-markup/spec.html#input

Tipe ●

input type="text"

●

input type="password"

●

input type="checkbox"

●

input type="radio"

●

input type="button"

●

input type="submit" → tombol submit form

●

input type="reset" → tombol reset form

●

input type="file" → file upload dialog

●

input type="hidden"

●

input type="image"

Tipe Baru ●

input type="date"

●

input type="datetime"

●

input type="number"

●

input type="range"

●

input type="email"

●

input type="url"

●

input type="search"

●

input type="tel"

●

input type="color"

●

…

Form Pendaftaran (2)

Nama:

Email:

●

Selalu tambahkan elemen ke dalam form

●

Menghubungkan label dengan kontrol

●

●

Nama:


●

Kenapa? ●

screen reader membaca label dengan tepat untuk tiap kontrol

●

memberikan arti dan struktur yang tepat untuk label kontrol

●

area klik yang lebih besar untuk radio button dan checkbox

Form Pendaftaran (3)

…

Jenis Kelamin:
Laki-laki Perempuan

…

●

Terdiri dari dua atau lebih kontrol radio button ●

●

Hanya satu kontrol yang bisa diaktifkan ●

●

memiliki atribut name yang sama jika salah satu aktif, maka lainnya non-aktif

Harus ada salah satu yang aktif ●

gunakan atribut checked untuk mengaktifkannya

Form Pendaftaran (4)

…

Alamat:

Langganan berita?

…

●

Terdiri dari satu atau lebih kontrol checkbox ●

●

memiliki atribut name yang sama

Tiap kontrol bisa diaktifkan tanpa mempengaruhi kontrol lain

●<br /> <br /> ●<br /> <br /> Sama seperti input teks biasa, tetapi memiliki beberapa baris Untuk input yang memerlukan isi teks yang banyak ●<br /> <br /> alamat, komentar<br /> <br /> Atribut autofocus ●<br /> <br /> ●<br /> <br /> ●<br /> <br /> <input autofocus="autofocus" /> Fokus (kursor) langsung tertuju ke elemen form tersebut Memudahkan pengguna untuk langsung mengisi form<br /> <br /> Atribut required ●<br /> <br /> <input required="required" /><br /> <br /> ●<br /> <br /> Validasi pada sisi klien<br /> <br /> ●<br /> <br /> Form tidak bisa di-submit sampai kontrol dengan atribut required diisi<br /> <br /> <fieldset> ●<br /> <br /> Membuat kelompok kontrol form ke dalam satu bagian<br /> <br /> ●<br /> <br /> Deskripsi dengan elemen <legend> <form> <fieldset> <legend>Pendaftaran</legend> … </fieldset> </form><br /> <br /> Form Pendaftaran (5)<br /> <br /> Implementasi Pemrosesan Server-Side<br /> <br /> Script Server ●<br /> <br /> ●<br /> <br /> Pembuatan script untuk memproses form tidak dibahas pada kuliah ini Asumsi: telah ada script untuk memproses form di "http://localhost/daftar.php"<br /> <br /> Parameter ●<br /> <br /> Script server menerima parameter berikut yang dikirim dengan metode HTTP GET ●<br /> <br /> nama<br /> <br /> ●<br /> <br /> email<br /> <br /> ●<br /> <br /> jkelamin –<br /> <br /> L/P<br /> <br /> ●<br /> <br /> alamat<br /> <br /> ●<br /> <br /> langganan –<br /> <br /> on / [empty]<br /> <br /> Konfigurasi UI untuk Komunikasi dengan Server<br /> <br /> Atribut action dan method ●<br /> <br /> ●<br /> <br /> ●<br /> <br /> URL server yang memproses form dituliskan pada atribut action Metode request dituliskan pada atribut method <form action="http://localhost/daftar.php" method="get"><br /> <br /> Atribut name ●<br /> <br /> ●<br /> <br /> ●<br /> <br /> Tiap kontrol form harus diberi atribut name untuk mengacu data yang di-submit Atribut name sudah kita set sebelumnya sesuai dengan parameter script server Untuk radio button dan checkbox, name sama tetapi dengan value yang berbeda<br /> <br /> Radio Button: Same name <p> Jenis Kelamin:<br /> <input type="radio" id="lk" name="jkelamin" value="L" checked="" /> <label for="lk">Laki-laki</label> <input type="radio" id="pr" name="jkelamin" value="P" /> <label for="pr">Perempuan</label></p><br /> <br /> Request Method ●<br /> <br /> Metode request GET ●<br /> <br /> ●<br /> <br /> Contoh request GET: ●<br /> <br /> ●<br /> <br /> saat form di-submit parameter akan diletakkan di belakang URL script server http://localhost/daftar.php? nama=Auriza&email=auriza.akbar@gmail.com&jkelamin=L &alamat=Bogor&langganan=on<br /> <br /> Metode request POST ●<br /> <br /> saat form di-submit parameter akan diletakkan di dalam HTTP request body (tidak terlihat di URL)<br /> <br /> EOF<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/html5-form-auriza-akbar-25-mei-2012" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "HTML5 Form. Auriza Akbar 25 Mei 2012"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">