PRAKTIKUM 4

FORM

4.1 Tujuan Istruksional Umum

1. Mahasiswa bisa memahami dan menggunakan jenis tag input untuk memasukkan data
melalui WEB.
2. Mahasiswa bisa memahami dan menggabungkan penggunaan form untuk tag input.

4.2 Tujuan Istruksional Khusus

1. Mahasiswa bisa memahami dan menggunakan tag input type text, password, radio, checkbox,
textarea, placeholder, label, disabled, autofocus, button dan submit.
2. Mahasiswa bisa menggabungkan penggunaan form pada masing-masing tag input, serta
memahami tentang penggunaan atribut method, action pada form.

4.3 DASAR TEORI

4.3.1 KONSEP FORM dalam pengiriman data ke SERVER

Gb. 7. Ilustrasi coding Form, tampilan di PC yang diisi email, pengiriman data dan tujuan form.

Unsur terpenting dalam membangun sistem informasi adalah pertukaran data. Dalam sistem
Web, tugas menampilkan dan memasukkan data di pegang oleh HTML. Lebih spesifik dalam lingkup
tag <FORM> Jangan salah ketik menjadi <FROM>

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 47
 Form memiliki dua method yang paling sering dipakai, POST dan GET. POST akan
membungkus data dalam paket data dan tidak tampak di URL. Sedangkan GET akan mengirimkan data
semua di URL. POST tidak memiliki batasan data yang dikirim, sedangkan GET hanya sebatas URL yaitu
2048 karakter.

4.3.2 Atribut-atribut Tag Input

Guna menunjang pemrograman web yang dinamis, diperlukan tag input HTML untuk
memasukkan data yang diperlukan sebagai masukkan permintaan dari pengguna (pengunjung)
halaman web. Beberapa atribut dari tag input yang akan dipelajari seperti TEXT, RADIO, CHECKBOX,
BUTTON dan SUBMIT.

Format dari Tag Input adalah adanya perintah wajib :

<input type= …. >

Dan agar input ini dapat berfungsi, harus di apit oleh perintah form dan tombol submit:

<FORM …. >
<input type= …. >
<input type= SUBMIT >
</FORM >

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 48
4.4 PROSEDUR PRAKTIKUM
4.4.1 FORM – Input Tipe TEXT
Atribut ini yang paling sering digunakan untuk masukan data, berupa data numeric maupun
data karakter dan string maupun data keduanya. Seperti halnya pada pemrograman pascal atau C,
untuk menampung data maka diperlukan variable, demikian juga dengan input, diperlukan atribut
NAME untuk mendefinisikan NAMA variable yang digunakan untuk menampung data masukan
tersebut.

4.4.1.1 Coding input Text paling sederhana tanpa Form dan File.
p4_1.html → Input text paling sederhana. Hasil:

▪ Isikan dengan nama anda, capture coding dan hasilnya.

p4_2.html → Input memilih file paling sederhana. Hasil:

▪ click Choose File, pilih sembarang File dan click Upload.

▪ capture coding dan hasilnya.

4.4.1.2 Memahami input Text DENGAN FORM dan input Submit.

p4_3.html → Input text dengan FORM dan analisa di Browser.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 49
▪ Sebagai seorang anak IT, saatnya menggunakan BROWSER
anda lebih pro dengan memanfaatkan fitur inspect Element.
Disarankan Mozilla Firefox. Click Kanan di Browser anda, pilih
inspect element.
▪ Pada jendela Inspect Element, pilih Network.

▪ Kembali ke Browser, Isikan Nama dengan Nama anda lengkap. Tekan Simpan.
▪ Capture Apa yang muncul di layar setelah click Simpan ?
Seharusnya nama anda akan pindah ke URL

▪ Apakah lambang pemisah URL dan data di atas ?

▪ Buka Jendela Inspect Element. Click nama File html anda yang tadi ada form nya.

1 2

▪ No 1 adalah file yang akan kita lihat/ inspect

▪ No 2 adalah bagian mana yang akan di inspect. Dalam hal ini Header.
▪ No 3 adalah metode GET atau POST berserta host dan filename.
▪ No 4 adalah nama variabel beserta data yang dikirimkan.
▪ Capture hasil inspect Anda disini.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 50
4.4.1.3 Memahamin banyak Input Text DENGAN FORM GET.
p4_4.html → Banyak Input text dengan parameter, FORM Method GET dan analisa di Browser.

1. Isi nama, email dan pilih satu hobby. Tapi jangan tekan tombol Simpan atau Reset dulu.
2. Capture tampilan browser anda.
3. Buka Inspect Element. Pilih file html aktif anda, pilih header.
4. Kembali ke browser, sekarang tekan Simpan.
Captur URL anda yang panjang (Boleh di copy text URL nya). Paste di laporan.
5. Kembali ke halaman inspect, capture inspect Elemen seperti contoh diatas disini.
6. Jelaskan 4 (Empat) nama dan isi variabel di inspect elemen yang kalian tangkap tadi.

7. Ulangi langkah di atas (1), tapi centang semua Hobby. Capture

8. Buka Inspect element. Capture
9. Jelaskan 4 (Empat) nama dan isi variabel di inspect elemen yang kalian tangkap tadi.
10. Apa beda variabel hoby di langkah 6 dan 9

11. Apa maksud size dan maxlength di barus 10 coding di atas. Coba praktekkan.

12. Pada input nama, berapa panjang karakter yang tampak dan berapa maksimal input
karakternya?

13. Kenapa form dan input diletakkan didalam <table> ?

14. Apa yang terjadi jika sudah diisi dan tombol Reset ditekan?

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 51
4.4.1.4 Memahamin banyak Input Text DENGAN FORM.
Coding berikut ini sama dengan di atas p4_4.html , namun hanya nambah method=”POST”
(POST Tulis huruf besar).
p4_5.html →FORM Method POST.

1. Pastikan Inpect Elemen sudah aktif dan yang terpilih Netwok.

2. Isikan Nama, email dan pilih beberapa Hobby. Click Simpan.
3. Apakah di URL anda ada variabel yang terkirim seperti sebelumnya?
4. Buka Inspect Elemen, apakah di header ada variabel seperti sebelumnya?
5. Dua Tab Disebelah kanan header ada Request. Click. Capture, paste. harusnya tampil
kurang lebih seperti ini:

6. Tuliskan Variabel yang anda dapatkan dari tampilan disini.

7. Apa beda Method POST dan GET ?

4.4.2 FORM – Input Tipe RADIO

Input dengan atribut radio adalah menampilkan beberapa pilihan untuk dipilih satu saja dari
beberapa pilihan tersebut. Seperti pilihan jurusan (Informatika, Elektro, Listrik), jenis kelamin (Pria/
Wanita), jawaban pilihan soal (A, B, C, D, E) dan lain-lain. Berikut ini diberikan contoh tag input
menggunakan atribut radio, dengan memberikan 4 (empat) pilihan hobby, yaitu Komputer, Membaca,
Elektronika, dan Olah-raga. Keempat pilihan tersebut hanya dapat dipilih satu saja dari keempat
pilihan, sehingga apabila sudah memilih hobby Komputer maka pilihan lain diabaikan, kemudian bila
mengganti pilihan, misalkan dari Komputer menjadi Elektronika maka pilihan yang ada di Komputer
akan dihapus dan pilihan berganti pada Elektronika, sehingga pilihan tetap satu saja

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 52
p4_6.html → Tag Input Radio.

Hasil:

Capture dan Paste Coding dan Hasil.

o Apakah Anda bisa memilih lebih dari satu pilihan Hobby?
o Isi dan click Simpan.
o Capture variabel yang terkirim di Inspect Element bagian Request.
o Tulis Ulang Variabel yang anda lihat di Inspect Element.
o Hilangkan semua NAME=HOBBY pada semua input. Jalankan. Apakah anda bisa
memilih lebih dari satu hobby? Kenapa? Apakah ini salah?
o Apakah kegunaan Value ?
o Apa perbedaan Radio dan Checkbox terhadap data yang dikirimkan.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 53
4.4.3 FORM – Dropdown / pulldown Menu dengan Tag Select & Option
Berikutnya akan membuat menu ‘drop down’, saat di click pilihan akan ditampilkan list
kebawah.

p 4-7.html → Tag Input Pulldown/ Combobox.

Hasil:

Capture dan Paste Coding dan Hasil.

o Gunakan teknik di atas untuk paste hasil. Sekaligus mengcapture hasil program saat
dipilih Jurusan Teknik elektro dan di click Simpan dan Hasil Inspec Elemen.
o Jalankan sekali lagi, pilih jurusan lain dan capture hasilnya.
o Untuk apa perintah selected ?

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 54
4.4.4 FORM –Teks Area
Tag ini digunakan untuk memasukkan data teks dengan ukuran melebar kebawah (seperti
editor), sehingga harus ditentukan panjang dan lebar dari area teks yang akan digunakan sebagai data
input data.

p 4-8.html → Tag texarea

Hasil:

Capture dan Paste Coding dan Hasil yang sudah diisi komentar, pastikan inspect nya tampak.
o Cobalah isi komentar beberapa kalimat yang didalamnya ada spasi dan ada enter.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 55
4.4.5 FORM – input Password dan File
Sama seperti text, hanya saja password akan muncul tampilan di layar dibuat lambang bulat
bulat. Sedangkan Input FILE adalah input untuk mengirim File.
Berbeda dengan input text dan lainnya, khusus untuk input yang ada filenya, di bagian form
harus didefinisikan sebagai enctype="multipart/form-data". Ini berakibat data yang
dikirim akan berbentuk array panjang.
Sebelum praktek siapkan :
1. Sebuah File text sederhana yang isina nama, nim dan beberapa paragraf agar ada
enternya.
2. Sebuah file jpg yang kecil
3. Sebuah File pdf yang kecil

p 4-9.html → Input Password dan File

Hasil:
Contoh upload sebuah file text namafile nya coba.txt

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 56
 Capture dan Paste Coding dan Hasil yang sudah diisi passerd dan diisi file, pastikan sudah di
click simpan dan capture inspect nya tampak.
o Cobalah 3 percobaan untuk text file, gambar (jpg) dan file PDF. Capture semuanya.
o Apa kesimpulan anda mengenai data file yang dikirim oleh HTML.

4.4.6 FORM, atribut DISABLED, PLACEHOLDER dan label.

Untuk HTML 5, ada banyak perintah dan atribut yang dapat dipergunakan.Beberapanya akan
dijelaskan berikut ini.
- Placholder, untuk menampilkan informasi sebelum mouse di click
- Autofocus, memaksa browser agar kursor aktif di input yang ada autofocus
nya.
- Disabled, membuat agar input tidak bisa di isi
- Label, melebarkan area click agar tidak di bagian input saja.
p 4-10.html → Atribut

Hasil:

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 57
Capture dan Paste Coding dan Hasil yang sudah diisi nama anda.
o Saat pertama kali dijalankan, apakah kursor langsung ke nama (ada indikator warna
yang berbeda)
o Apakah plcaeholder berjalan baik. Muncul saat belum diisi. Saat ketikan pertama,
tulisan langsung hilang.
o Apakah anda dapat mengisi Keterangan?
o Untuk langkah berikut, perhatikan baik2.

o Arahkan kursor ke 2 (nilai)

o Click di bagian Nama (yang diberi tanda). Apakah kursor berubah ke nama?
o Click di bagian Nilai (yang diberi tanda). Apakah kursor berubah ke nilai?
o Apa fungsi label ?

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 58
4.5 TUGAS
Dengan kemapuan HTML anda (Hanya HTML saja tanpa CSS), silahkan selesaikan sebuah Form
seperti berikut ini. Beberapa perintah yang belum di ajarkan silahkan cari referensi di internet untuk
menambah wawasan kalian. Gunakan Foto Kalian masing dan Nim Nama harus terisi sesuai Nama Nim
kalian saat anda capture. Di kanan Bawah ganti juga dengan nama anda. Capture coding dan hasilnya.

Tugas tambahan:

Carilah di internet, tag input tambahan yang didukung oleh HTML 5 yang belum dijelaskan di
praktikum 1,2,3 dan 4.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 59