10/22/2011

XP

XP

XP

XP

Input box
First Name Address #1 Address #2 City Country Item Purchased Purchase Date Serial Number State Zip Last Name

group box

drop-down list box

Used For (check one) 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

radio buttons

Comments?:

check boxes text area

form button

Send Registration

Cancel

10/22/2011

<form>
<form> <form attributes> element form dan tags layout </form> <form>

XP

XP

contact information

product information

usage information

comments

buttons

XP

XP

Type type=button type=checkbox type=file type=hidden type=image type=password type=radio type=reset type=submit type=text

Description Display a button which can be clicked to perform an action from a script Display a check box Display a browse button to locate and select a file Create a hidden field, not viewable on the form Display an inline image which can be clicked to perform an action from a script Display a text box in which hides text entered by the user Display a radio (option) button Display a button which resets the form when clicked Display a button which submits the form when clicked Display a text box in which displays text entered by the user

<input>
<input type=tipe_input name=nama_field id=id_field>

<input type=text>

10/22/2011

XP

XP

<input name=nama_field id=id_field value=isi_textbox size=panjang maxlength=max isian>

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

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

10/22/2011

XP

XP

potongan berikut memberikan contoh pembatasan lebar karakter dari field zip code

Tidak lebih dari 5 karakter yang dapat diterima dalam text box ini

<input value=value>

XP

XP

Nilai =United States

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

10/22/2011

XP

XP

<input type=password>

<label for=id>label text</label>

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

XP

XP

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

Yang ini keterangannya kok kurang ya?

10/22/2011

XP

XP

<select> <option>
Item-item yang terdapat alam selection list Nama field selection list

XP

XP

size = "1" size = "4"

size = "7"

size = "9"

10/22/2011

XP

XP

<select name=jurusan> <option value=TI>Teknik Informatika</option> <option value=SI>Sistem Informasi</option> </select>

<select name=bulan> <option value=1>Januari</option> <option value=2 selected>Februari</option> <option value=3>Maret</option> <option value=4>April</option> </select>

<select name=bulan> <option value=1>Januari</option> <option value=2>Februari</option> <option value=3>Maret</option> <option value=4>April</option> </select>

XP

XP

Internet Explorer dan Netscape sebelum version 6.0 Menampilkan daftar pilihan tanpa label group .
option group label

<optgroup label=label>

a single option group

option group label a single option group

10/22/2011

XP

XP

<input type=radio name=name id=id value=value>

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

XP

<fieldset> <legend align=align>legend text</legend> collection of fields </fieldset>

10/22/2011

XP

XP

Awal dari group box

group box legend

<input type=checkbox name=name id=id value=value>

Menghasilkan radio buttons dan group box

XP

XP

<input>

10/22/2011

XP

XP

default teks yang ada dalam text area

Dimensi dari text area

Hasil text area

XP

XP

10

10/22/2011

XP

XP

<input>
<input type=button value=text>

<input type=submit value=text> <input type=reset value=text>

XP

XP

Gambar berikut menampilkan tag HTML untuk tombol yang akan men-download program, menampilkan informasi, dan me-resets form pada kondisi semula.

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

11

10/22/2011

XP

<form action=urlmethod=typeenctype=type> </form>

12