Index of /Kuliah2013-2014/Desain&PemrogramanWeb/Day7-8

Bab 9 - Form

Web Design
Team Dosen

Politeknik Elektronika Negeri Surabaya
(PENS)

1

Pendahuluan
Form HTML adalah sebuah area yang
mengandung elemen – elemen form.
Elemen form adalah sebuah elemen yang
memungkinkan user untuk memasukkan
informasi seperti text, teksarea, menu dropdown, radio button, checkbox,dll.

Politeknik Elektronika Negeri Surabaya
(PENS)

2

Sebuah form didefinisikan dengan tag
.
…

Politeknik Elektronika Negeri Surabaya
(PENS)

3

Tag – tag Form

Politeknik Elektronika Negeri Surabaya
(PENS)

4

Jenis masukan dalam form
Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan
kepada server. Nilai yang dimasukkan dapat berupa angka ataupun

teks.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat
dipilih.
Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu
yang dipilih.
Button : digunakan untuk mendefinisikan tombol untuk melakukan
pemrosesan form.
SUBMIT : button yang digunakan untuk mengirim data.
RESET : button yang digunakan untuk menginisialisasi (mengosongkan)
form.

List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih
dapat lebih dari satu.
Text Area : digunakan untuk memasukkan data dalam bentuk teks
berupa memo.

Politeknik Elektronika Negeri Surabaya
(PENS)

5

Tag Form

Keterangan :
Form
: tag yang menandakan sebuah elemen
form
Name
: nama form
Methode : metode pengiriman data. Bisa berupa
“post” atau “get”
Action
: nama file dokumen yang memproses
pengiriman data. Lebih lanjut akan dibahas di
aplikasi web php mysql.
Politeknik Elektronika Negeri Surabaya
(PENS)

6

Text Field

Keterangan :
Input
: tag yang menandakan sebuah
masukan
Type
: type sebuah masukan, yaitu ”text”
Name : nama text field

Politeknik Elektronika Negeri Surabaya
(PENS)

7

Text Area

Keterangan :
Textarea
: tag yang menandakan

sebuah masukan textarea
Name : nama textarea
Cols
: jumlah kolom textarea
Rows : jumlah baris textarea
Politeknik Elektronika Negeri Surabaya
(PENS)

8

Check box

Keterangan :
Name : nama checkbox
Type
: type masukan
Valuae : nilai yang dikirimkan ke server
Checked
: menunjukkan bahwa otomatis
pilihan tersebut dipilih. Secara default atribut

tersebut unchecked (tidak dipilih).
Politeknik Elektronika Negeri Surabaya
(PENS)

9

Radio Button

Keterangan :
Name : nama radiobutton
Type
: type masukan
Value : nilai yang akan dikirim ke server

Politeknik Elektronika Negeri Surabaya
(PENS)

10

List Box

Teknologi
Informasi
Keterangan :
Select
: tag yang menandakan sebuah list/menu
Name
: nama list/menu
Option
: tag yang menandakan sebuah pilihan list
Value
: nilai pilihan yang akan dikirim ke server

Politeknik Elektronika Negeri Surabaya
(PENS)

11

Button – Submit

Politeknik Elektronika Negeri Surabaya
(PENS)

12

Button – Reset


Politeknik Elektronika Negeri Surabaya
(PENS)

13

Cara pembuatan form dengan
dreamweaver
Buka halaman web baru
Klik menu Insert – Form
Pilih model form

Politeknik Elektronika Negeri Surabaya

(PENS)

14

Contoh memilih textarea, sehinnga muncul
design view sebagai berikut :

Politeknik Elektronika Negeri Surabaya
(PENS)

15

Atur propertiesnya,
bisa melalui code
design atau design
propertiesnya :

Keterangan :
TextField
: nama textarea

Char width
: lebar kolom
Num Lines
: jumlah baris
Wrap
: model pengaturan teks
dalam textarea
Type
: pilih singgle line,
multiline atau password
Init val
: nilai default
Class
: nama class jika
menggunakan file CSS

Politeknik Elektronika Negeri Surabaya
(PENS)

16

Field Text.
Contoh – Listing 9.1 : textfield.html
text field


Nama Depan :


Nama Belakang :





Politeknik Elektronika Negeri Surabaya
(PENS)

17

Politeknik Elektronika Negeri Surabaya
(PENS)

18

Field Text – Password.
Contoh - Listing 9.2: password.html
Password


Username:

Password:


Keterangan : ketika memasukan data di field password, browser
akan menampilkan tanda bintang sebagai pengganti karakter.



Politeknik Elektronika Negeri Surabaya
(PENS)

19

Politeknik Elektronika Negeri Surabaya
(PENS)

20

Checkbox.
Contoh - Listing 9.3 : checkbox.html
Check Box

Hobi :

Baca Majalah :


Olah Raga :


Memancing :





Politeknik Elektronika Negeri Surabaya
(PENS)

21

Politeknik Elektronika Negeri Surabaya
(PENS)

22

Radio Button.
Contoh - Listing 9.4 : radiobutton.html
Radio Button

Agama :

Islam :

Kristen :

Protestan :

Hindu :

Budha :




Politeknik Elektronika Negeri Surabaya
(PENS)

23

Politeknik Elektronika Negeri Surabaya
(PENS)

24

List Box – Drop Down Menu.
Contoh - Listing 9.5 : listbox.html


List Box


Tahun Kelahiran


1980
1981
1982
1983
1984
1985





Politeknik Elektronika Negeri Surabaya
(PENS)

25

Politeknik Elektronika Negeri Surabaya
(PENS)

26

Textarea.
Contoh - Listing 9.6 : textarea.html

textarea

Komentar :

isikan
komentar anda disini


Politeknik Elektronika Negeri Surabaya
(PENS)

27

Politeknik Elektronika Negeri Surabaya
(PENS)

28

Button – Submit dan Reset.
Contoh - Listing 9.7 : button.html


Button








Politeknik Elektronika Negeri Surabaya
(PENS)

29

Politeknik Elektronika Negeri Surabaya
(PENS)

30

HTML Tag
HTML Tag
Definisi dan Penggunaan
• Tag digunakan untuk pilihan kelompok terkait dalam daftar
drop-down.
• Jika Anda memiliki daftar panjang pilihan, kelompok pilihan yang terkait
lebih mudah untuk menangani untuk pengguna.
• Contoh Penggunaan :

Politeknik Elektronika Negeri Surabaya
(PENS)

31

HTML Tag dan
Tag digunakan sebagai pengelompok,
dan tag untuk keterangannya.

Politeknik Elektronika Negeri Surabaya
(PENS)

32

Contoh form biodata.
Source Code - Listing 9.8 : biodata.html


Biodata


Formulir Biodata



Nama
:



Tempat Tanggal Lahir
:

/

Politeknik Elektronika Negeri Surabaya
(PENS)

33



Januari
Pebruari
Maret
April
Mei
Juni
Juli
Agustus
September
Oktober
Nopember
Desember


1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990



Politeknik Elektronika Negeri Surabaya
(PENS)

34


Agama
:

Islam

Kristen


Protestan

Hindu


Budha



Hobi
:

Olah Raga

Baca Majalah

Politeknik Elektronika Negeri Surabaya
(PENS)

35

Memancing


Komentar
:



 
 








Politeknik Elektronika Negeri Surabaya
(PENS)

36

Hasil Form Biodata

Politeknik Elektronika Negeri Surabaya
(PENS)

37

FINISH

Politeknik Elektronika Negeri Surabaya
(PENS)

38