Menciptakan Form dalam Web

XP
Menciptakan Form dalam Web
XP
Contoh sebuah Form
XP
Komponen dan elemen dalam Form
Input box
First Name
Last Name
Address #1
Address #2
State
City
Zip
Country
Item Purchased
Purchase Date
drop-down
list box
Serial Number
Used For (check one)
radio
buttons
Home
Business
Religious or Charitable Institution
Government
Educational Institution
Network Operating System (check all that apply)
Netware
Banyan Vines
Windows
IBM Lan Server
PC/NFS
Comments?:
form
button
Send Registration
group
box
Cancel
check
boxes
text
area
XP
Form Control Elements
•
•
Control elements :
– text boxes untuk input huruf dan angka
– selection lists untuk daftar pilihan, biasanya ditampilkan dalam dropdown list box
– radio buttons, juga disebut option buttons, untuk memilih pilihan
tunggal dari daftar yang tersedia
– check boxes untuk menentukan item yang dipilih
– groups boxes untuk mengelompokkan elemen form
– text areas untuk input yang panjang, terdiri dari beberapa baris teks
– buttons tombol yang dapat diklik untuk memulai proses dalam form
Setiap control element yang dapat menerima data dari pengguna disebut
dengan field.
Tag <form>
• Sebuah halaman dapat menampung beberapa form yang berbeda,
tetapi tidak dapat mengaitkan form dalam form lainnya.
• syntax umum untuk tag <form> adalah:
<form attributes>
element form dan tags layout
</form>
• Sebuah halalman Web dapat terdiri dari beberapa forms, tag <form>
termasuk atribut namanya.
• atribut nama menunjukkan setiap form dalam halaman.
• atribut nama juga diperlulkan dalam program yang menerima input
dari form.
XP
Form Registration yang lengkap
contact information
product information
usage information
comments
buttons
XP
XP
Tipe Input
Type
Description
type=”button”
Display a button which can be clicked to
perform an action from a script
type=”checkbox”
Display a check box
type=”file”
Display a browse button to locate and select a
file
type=”hidden”
Create a hidden field, not viewable on the form
type=”image”
Display an inline image which can be clicked to
perform an action from a script
type=”password”
Display a text box in which hides text entered
by the user
type=”radio”
Display a radio (option) button
type=”reset”
Display a button which resets the form when
clicked
type=”submit”
Display a button which submits the form when
clicked
type=”text”
Display a text box in which displays text
entered by the user
XP
Bekerja dengan Text Boxes
• Text boxes dibuat dengan tag <input>.
• syntax umumnya adalah:
<input type=“type” name=“name”
id=“id”>
– type menentukan tipe dari field data
– atribut name dan id menentukan field input bagi
script CGI
• Untuk mebuat text box, tulislah tag:
<input type=“text”>
XP
membuat Text Box
• Untuk membuat text box, gunakanlah kode HTML berikut:
<input name=“name” id=“id” value=“value”
size=“value” maxlength=“value”>
–
–
–
–
atribut name dan id memberi identitas pada field
value – nilai default pada text box
size – lebar text box dalam satuan karakter
maxlength – jumlah karakter maksimum yang ditampung
dalam field
Name/Value Pairs sent from
the Web Form to the CGI Script
This figure shows
when form data is
sent to the CGI
script, the script
receives the name
or id of each field
in the form
paired with
whatever value
the user entered
in the field. The
script then
processes the data
according to each
name/value pair.
XP
XP
Text Boxes on the Form
Pada awalnya Text
boxes kosong dan
tidak berisi teks
apapun sehingga
diperlukan adanya
text description
untuk
memberikan
keterangan pada
setiap box
sehingga user
mengetahui data
apa yang harus
diinputkan.
text description
text box
XP
Mengatur lebar Text Boxes
Menentukan panjang Maksimum
untuk sebuah Field
potongan berikut memberikan contoh pembatasan lebar karakter dari field zip code
Tidak lebih dari 5
karakter yang dapat
diterima dalam text
box ini
XP
Mengatur nilai Default untuk
sebuah Field
• Jika data yang sama sering diinputkan ke dalam
field, disarankan untuk memberikan nilai default
bagi field.
• Nilai Default dapat menghemat waktu dan
meningkatkan ketepatan dalam pengeisiannya.
• Untuk menentukan nilai default, gunakan syntax:
<input value=“value”>
– value adalah huruf atau angka default yang akan
ditampilkan dalam field
XP
Menentukan nilai Default Value
bagi sebuah Field
Jika pengguna dari negara selain United States menggunakan form web ini,
Mereka dapat menghapus nilai default dengan memilih teks tersebut dan
menghapusnya kemudian mengisi data yang sesuai.
Nilai default
XP
XP
Nilai =“United States”
XP
Membuat Field Password
• field password adalah text box yang akan menampilkan
bullets atau asterisks (****) ketika user mengetikkan
karakter di dalamnya.
• syntax untuk membuat field Password adalah:
<input type=“password”>
• Menggunakan password field bukan berarti telah
memberikan koneksi yang aman.
• password itu sendiri tidak dienkripsi.
• password field berguna untuk menyamarkan tampilan
ketika field tersebut diinputkan.
XP
Labels Form & selection list
• HTML memungkinkan kita untuk menghubungkan sebuah
label dengan elemen teks yang berkesesuaian untuk
kepentingan scripting.
• syntax untuk membuat label form adalah:
<label for=“id”>label text</label>
– id adalah nilai dari atribut id untuk field dalam sebuah form
– teks label adalah teks dari label tersebut
– Anda harus mengaitkan label ke atribut id dari field,
bukannya atribut nama
Membuat label untuk field fname
Gambar berikut
menunjukkan
label untuk field
fname.
Nilai dari atribut id
untuk field first
name
XP
XP
Menggunakan Selection List
Sebuah Selection
List akan terlihat
sedikit berbeda
tergantung pada
browser dan
versinya.
XP
Membuat Selection List
• selection list adalah kotak daftar di mana pengguna akan
memilih atau mengatur item dalam selection list.
• Selection lists tepat digunakan pada item dengan nilai yang
sudah tertentu.
• Selection lists dapat membantu mencegah pengejaan yang
salah atau input yang salah.
• selection list ditulis dengan tag <select>.
• Tag <option> digunakan untuk memberikan item
pilihan yang tertentu.
XP
Membuat Selection List
Nama field
selection list
Item-item yang
terdapat alam
selection list
Selection List
dengan ukuran yang berbeda
size = "1"
size = "7"
size = "4"
size = "9"
XP
XP
Working with Option Groups
• HTML mampu mengorganisir selection lists
kedalam group yang terpisah, yang disebut option
groups.
• syntax untuk menbuat option group adalah:
<optgroup label=“label”>
– label adalah tulisan yang menandai option group
– teks untuk label tampil di atas setiap group items, tetapi
label ini sendiri tidak dapat dipilih
XP
Option Groups
Internet Explorer dan Netscape sebelum version 6.0
Menampilkan daftar pilihan tanpa label group .
option group
label
a single
option
group
option
group label
a single option
group
XP
Radio Buttons
• Radio buttons menampilkan daftar pilihan yang harus
dipilih oleh pengguna.
– Hanya satu radio button yang dapat dipilih dalam sekali waktu.
• syntax untuk membuat radio button adalah:
<input type=“radio” name=“name” id=“id”
value=“value”>
– name - field yang terdiri dari radio button (harus ada)
– id – option tertentu. Diperlukan ketika akan diputuskan untuk
menggunakan label field dengan radio button
– value - value akan dikirim ke CGI script, jika radio button
tersebut dipilih oleh pengguna
XP
Membuat Radio Buttons
Pada contoh kode berikut, nilai yang dikirim ke CGI script tidak sama dengan label field.
Jika pengguna memilih radio button Republican, nilai “gop”
Akan terkirim ke CGI script bersesuaian dengan nama field “party.”
XP
membuat Group Box
• group box menandai seluruh pilihan dari radio buttons.
• group box adalah kotak yang ditempatkan disekitar field
yang menunjukkan bahwa radio button tersebut berada
dalam suatu group.
• syntax untuk membuat group box adalah:
<fieldset>
<legend align=“align”>legend
text</legend>
collection of fields
</fieldset>
Group Boxes untuk Radio Buttons
dan Check Boxes
XP
XP
Membuat Group Box dan Legend
Awal dari
group box
group box
legend
Menghasilkan radio buttons dan group box
XP
Bekerja dengan Check Boxes
• check box memungkinkan pengguna untuk memilih atau
tidak
• Check box dibuat dengan menggunakan syntax:
<input type=“checkbox” name=“name” id=“id”
value=“value”>
– name dan id - identitas dari checkbox
– value - nilai yang akan dikirim keCGI script ketika ceckbox itu
terpilih
• Check boxes tidak terpilih secara default.
– Untuk menjadikannya terpilih secara default, tambahkan atribut
checked pada tag <input>
– <input type =“checkbox” checked = “checked”>
Group Boxes untuk Radio Buttons
dan Check Boxes
XP
XP
membuat Text Area
default teks
yang ada
dalam text
area
Hasil text area
Dimensi dari
text area
XP
Comment Text Area
XP
Membuat Form Button
XP
membuat Push Button
• Salah satu tipe button, yang disebut push button,
dibuat dengan tag <input> :
<input type=“button” value=“text”>
– text adalah tulisan yang tampil pada button
• push buttons tidak melakukan actions apapun pada
halaman Web.
• Untuk memberikan action, tuliskan script atau
program yang secara otomatis akan dijalankan
ketika button diklik.
XP
Membuat Submit dan Reset Buttons
• submit button adalah tombol yang mengirim
form ke CGI script untuk diproses.
• reset button mengembalikan kondisi form pada
kondisi semula (default).
• syntax untuk membuat kedua tombol tersebut:
<input type=“submit” value=“text”>
<input type=“reset” value=“text”>
– Atribut value mendefinisikan teks yang akan tertera
pada tombol tersebut
XP
membuat Form Button
Gambar berikut menampilkan tag HTML untuk tombol yang akan
men-download program, menampilkan informasi, dan me-resets form pada kondisi
semula.
XP
Membuat File Button
Contoh
penggunaan file
button untuk
menuju ke lokasi
file dengan nama
“report.doc.”
1. Pengguna mengklik tombol Browse
2. Pilih file kotak dialog
Choose File
3. Nama file dan lokasi secara
otomatis akan
ditempatkan dalam text
box
XP
Bekerja dengan atribut Form
• Setelah menambahkan elemen pada sebuah form, perlu
ditentukan ke mana data form tersebut akan dikirim dan
bagaimana mengirimnya. Gunakan atribut:
<form action=“url”method=“type”enctype=“type”>… </form>
– URL - nama file dan lokasi CGI script yang akan memproses form
– Method – bagaimana cara Web browser mengirim data ke CGI script
– enctype – format data yang tersimpan dalam field form