Menciptakan Form dalam Web

XP

Menciptakan Form dalam Web STMIK AKAKOM YOGYAKARTA

Click to edit Master subtitle style

Contoh sebuah Form

XP

Komponen dan elemen dalam Form

XP

First Name

Input box

Last Name

Address #1 Address #2 Stat e

City

drop-down list box

radio button

Zip

Countr y Item Purchased

Purchase Date Serial Number

Used For (check one) Home Busines sReligious or Charitable Institution Government Educational Institution

Network Operating System (check all that apply)Netware

group box

Banyan Vines Windows IBM Lan Server PC/NFS

check boxes

Comments?:

form button

Send Registration

Cancel

text area

Form Control Elements

XP

 Control elements :  text boxes untuk input huruf dan angka  selection lists untuk daftar pilihan, biasanya ditampilkan dalam drop-down 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

XP

 Sebuah halaman dapat menampung beberapa form yang berbeda, tetapi tidak dapat mengaitkan form dalam form lainnya.  syntax umum untuk tag adalah: element form dan tags layout
 Sebuah halalman Web dapat terdiri dari beberapa forms, tag
termasuk atribut namanya.  atribut nama menunjukkan setiap form dalam halaman.  atribut nama juga diperlulkan dalam program yang menerima input dari form.

Form Registration yang lengkap 

contact information

product information

usage information

comments

buttons

Click to edit the outline text format 

Second Outline Level −

Third Outline Level  Fourth Outline Level − Fifth

XP

Tipe Input

XP

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

Bekerja dengan Text Boxes

XP

Text boxes dibuat dengan tag . syntax umumnya adalah:

type menentukan tipe dari field data atribut name dan id menentukan field input bagi script CGI

Untuk mebuat text box sederhana, tulislah tag:

membuat Text Box  Untuk membuat text box, gunakanlah kode HTML berikut:

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

XP

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

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.

XP

text description text box

Mengatur lebar Text Boxes

XP

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 pengisiannya. Untuk menentukan nilai default, gunakan syntax:

value adalah huruf atau angka default yang akan ditampilkan dalam field

XP

Menentukan nilai Default Value bagi sebuah Field

XP

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

Nilai =“United States”

Membuat Field Password

XP

 field password adalah text box yang akan menampilkan bullets atau asterisks (****) ketika user mengetikkan karakter di dalamnya.  syntax untuk membuat field Password adalah:

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

Labels Form & selection list

XP

 HTML memungkinkan kita untuk menghubungkan sebuah label dengan elemen teks yang berkesesuaian untuk kepentingan scripting.  syntax untuk membuat label form adalah: label text  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

XP

Gambar berikut menunjukkan label untuk field fname. Nilai dari atribut id untuk field first name

Menggunakan Selection List Sebuah Selection List akan terlihat sedikit berbeda tergantung pada browser dan versinya.

XP

Membuat Selection List

XP

 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 <select name=“bulan”>

XP

Nilai Default Untuk Selection List Untuk menampilkan pilihan awal (nilai default) pada selection list digunakan : “selected” <select name=“bulan”>

XP

Option Groups

XP

HTML mampu mengorganisir selection lists kedalam group yang terpisah, yang disebut option groups. syntax untuk menbuat option group adalah:

label adalah tulisan yang menandai option group teks untuk label tampil di atas setiap group items, tetapi label ini sendiri tidak dapat dipilih

Option Groups

XP

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

Radio Buttons

XP

 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:

 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

Membuat Radio Button

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:

legend text collection of fields

XP

Group Boxes untuk Radio Buttons dan Check Boxes

XP

Membuat Group Box dan Legend Awal dari group box

group box legend

Menghasilkan radio buttons dan group box

XP

Bekerja dengan Check Boxes

XP

 check box memungkinkan pengguna untuk memilih atau tidak  Check box dibuat dengan menggunakan syntax:

 name dan id - identitas dari checkbox  value - nilai yang akan dikirim keCGI script ketika checkbox itu terpilih

Nilai Default pada CheckBox dan XP Radio Button  Check boxes dan radio buttons tidak terpilih secara default.  Untuk menjadikannya terpilih secara default, tambahkan atribut checked pada tag  

Group Boxes untuk Radio Buttons dan Check Boxes

XP

membuat Text Area

XP

Dimensi dari text area default teks yang ada dalam text area

Hasil text area

Comment Text Area

XP

Wrapping pada textarea

XP

Attribut “wrap” digunakan untuk mengatur reaksi dari text jika text yang diisikan melebihi ukuran textarea Terdapat 3 macam : Soft / virtual: secara tampilan, text akan turun ke bawah (seperti ada linebreak), tetapi saat disimpan linebreak tsb akan dihilangkan Hard / physical : text secara fisik ditambah linebreak, sehingga saat disimpan linebreak ikut tersimpan Off : saat sampai ke tepi textarea, text tetap akan terus ke kanan, dan textarea akan menambahkan scroll horisontal

Membuat Form Button

XP

membuat Push Button

XP

Salah satu tipe button, yang disebut push button, dibuat dengan tag : 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.

Membuat Submit dan Reset Buttons

XP

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: Atribut value mendefinisikan teks yang akan tertera pada tombol tersebut

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

XP

Setelah menambahkan elemen pada sebuah form, perlu ditentukan kemana data form tersebut akan dikirim dan bagaimana mengirimnya. Gunakan atribut: …
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

Menciptakan Form dalam Web

Recommend Documents