Praktikum III HTML FORM

Tujuan :

1. Mengetahui tentang Elemen-elemen FORM.

2. Mampu membuat script FORM HTML.

3. Mampu membuat halaman web dengan menggunakan script HTML dan PHP.

Alat dan Bahan :

1. Buku materi PEMROGRAMAN WEB / buku literatur mengenai PEMROGRAMAN WEB.

2. Modul praktikum PEMROGRAMAN WEB.

Landasan teori :

Form adalah sebuah fasilitas yang sering kita jumpai pada sebuah website. Fungsi form

adalah sebagai media untuk mengisi data dan akan dikirim ke webserver, sehingga sebuah

website akan tampak lebih interaktif.

Komponen-komponen form terdiri dari :

Atribut TEKS

Atribut RADIO

Atribut CHECKBOX

Atribut SELECT & OPTION

Atribut TEKSAREA

Atribut SUBMIT

1. FORM HTML

Form digunakan untuk menangani input dari user pada dokumen yang

dinamis/interaktif.

Analogi dari penggunaan form ini di dokumen HTML adalah bahwa form tersebut

adalah sebuah formulir isian yang akan diisi oleh user, kemudian disimpan ke dalam

server dengan mekanisme penyimpanan data.

Sebuah dokumen juga dapat mempunyai satu atau beberapa form. Setiap form

mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) dan dapat

menghimpun satu atau beberapa elemen input.

Setiap form harus ditentukan nama program (di sisi server) yang akan menangani

data isian yang dikirim (di-submit).

2. Skema dasar Form

bagian ini berisi sejumlah elemen input berbagai jenis

sebagai formulir isian yang bisa diisi oleh user.

Percobaan 1 : Contoh Form sederhana:

3. ELEMEN-ELEMEN FORM

Atribut

Deskripsi

accept Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form.

Syntax : ACCEPT=Internet Media Type

method Menentukan bagaimana data akan di kirim ke server.

GET data akan dikirim dengan menggunakan query string

pada URL.

POST data akan di kirim ke server sebagai block data ke

script.

Syntax : METHOD=POST (atau) GET

action Menentukan lokasi dari script yang akan memproses data dari form.

Syntax : ACTION=URL

ACTION

menentukan URL apa yang akan dijalankan dan menerima semua masukan pada

formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama

dengan halaman Web itu sendiri.

METHOD

Digunakan untuk menentukan bagaimana informasi di kirim ke URL yang disebutkan

dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST

membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan

membuat informasi dikirim menjadi satu dengan URL.

4. METODE PENGIRIMAN DATA

GET (Default)

Metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian

akhir URL yang menunjuk pada script pemroses. Jadi jika URL anda menunjuk ke

Script pada URL proses.php dan kata formnya adalah andi dan tuban, maka

URL akhir yang dikirim ke server adalah :

/proses.php?nama=andi&alamat=tuban

POST

Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah

pada suatu standar input. Script mengambil data form dari standar input ini. Dengan

adanya penyimpanan data secara tersendiri membuat metode POST bisa

menyimpan data input dalam jumlah banyak.

5. KOMPONEN FORM

A. INPUT TEKS

Terdapat dua jenis inputan teks: text area dan text input. Keduanya memiliki kesamaan

fungsi yaitu menginputkan teks. Namun textarea memungkinkan inputan berupa multi-

line text.

Sintaks :

B. INPUT FILE

Memasukkan inputan berupa file

Sintaks :

C. BUTTON

Push Button : default behavior atau merupakan sintaks dasar. Namun button jenis ini

hanya dapat digunakan dengan menggunakan bersama script yang lain (client side

script).

Submit Button : apabila diaktifkan akan memerintahkan browser untuk mengirimkan

data yang dimasukkan ke dalam form ke alamat yang dituju.

Reset Button : apabila diaktifkan akan mereset semua control/value yang ada dalam

form kembali ke nilai semula (default).

Sintaks:

Submit

Reset

Tombol

D. CHECK BOX

Merupakan control yang memungkinkan pemilihan satu atau lebih nilai informasi

tertentu.

Contoh: percobaan 2

Mobil

Sepeda Motor

Sepeda

E. SELECT BOX

Merupakan control yang memungkinkan pemilihan satu nilai informasi tertentu,

disajikan dalam bentuk drop-down.

Contoh : percobaan 3

Sedan

Bus

Truck

F. RADIO BUTTON

Memiliki fungsi yang sama dengan check box namun apabila salah satu radio button

dengan diaktifkan maka radio button lain yang bernilai sama akan non-aktif secara

otomatis.

Contoh : percobaan 4

Pria

Wanita

G. HIDDEN CONTROL

Memungkinkan untuk menyembunyikan suatu kontrol tertentu pada halaman web

namun akan tetap terbaca nilainya.

Contoh: percobaan 5

Output :