FAJAR SURYANI PEMROGRAMAN WEB I

FORMAT FORM

POKOK BAHASAN:

✓ Format Form
✓ Komponen Form
✓ Attribut Form
✓ Cara kerja Form
✓ Pembuatan Form

TUJUAN BELAJAR:

✓ Menjelaskan konsep format form

✓ Menjelaskan komponen form
✓ Menjelaskan attribut form
✓ Menjelaskan cara kerja form
✓ Menjelaskan dan menerapkan pembuatan form

Web tidak hanya digunakan untuk menampilkan informasi saja, web juga digunakan
untuk mengambil informasi atau data dari pengunjung. Salah satu cara untuk mengambil
informasi dari pengunjung ialah menggunakan form. Form dalam web dapat disamakan dengan
formuliar di dunia nyata. Form dapat diisis, kemudian diproses dengan program tertentu.

8.1 Format Form

Form merupakan elemen HTML yang digunakan untuk :
1. Memperoleh feedback dari pengguna web
2. Memperoleh informasi pengunjung/customer secara online
3. Memperoleh data-data user baik nama, alamat, dan data lainya untuk mendaftar pada
service yang disediakan
FAJAR SURYANI PEMROGRAMAN WEB I

Form di HTML dapat kita buat dengan tag <form>. Sebuah tag yang membungkus
elemen-elemen input di dalamnya dan berfungsi mengirim data input ke server.

<form>
.
elemen input
.
</form>

8.2 Komponen Form

Pada saat membuat form anda bisa meletakkan control-control pada form untuk
memperbolehkan inputan dari user. semua control biasanya di letakkan di antara tag
<form></form> tapi anda juga bisa meletakkan control diluar tag tersebut. Untuk
menambahkan control gunakan tag <input>. Mcam-macam komponen input:

1. Textfield
Digunakan untuk memasukkan huruf, angka, karakter dan lainnya ke dalam sebuah form.
Contoh tag:

Contoh hasil:
FAJAR SURYANI PEMROGRAMAN WEB I

2. Password
Digunakan untuk menyembunyikan karakter masukan.
Contoh tag:

Contoh hasil:

3. Checkbox
Digunakan untuk melakukan satu atau lebih banyak pemilihan data.
Contoh tag:
FAJAR SURYANI PEMROGRAMAN WEB I

Contoh hasil:

4. Radio button
Digunakan untuk memilih salah satu dari beberapa pilihan.
Contoh tag:

Contoh hasil:
FAJAR SURYANI PEMROGRAMAN WEB I

5. Listbox
Digunakan untuk melakukan satu atau lebih pemilihan diantara 2 atau lebih data
menggunakan listbox.

Contoh tag:

Contoh hasil:

6. Combobox
Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data menggunakan
drop-down.
Contoh tag:
FAJAR SURYANI PEMROGRAMAN WEB I

Contoh hasil:

7. Text Area
Sebuah area yang dapat menampung teks yang tidak terbatas ukurannya.
Contoh tag:

Contoh hasil:
FAJAR SURYANI PEMROGRAMAN WEB I

8. File
Digunakan untuk memilh atau membuka file.
Contoh tag:

Contoh hasil:

9. Button
Elemen Tombol : Submit
Tombol yang berfungsi secara otomatis mengirim data yang di-input-kan di dalam form
ke halaman ‘Action’.
Contoh tag:

Contoh hasil:
FAJAR SURYANI PEMROGRAMAN WEB I

10. Elemen Tombol : Reset

Tombol yang berfungsi mengembalikan “value” dari semua elemen di form ke “value”
semula saat halaman dibuka.
Contoh tag:

Contoh hasil:

8.3 Attribut Form

Tag <form> memiliki beberapa atribut yang harus diberikan, seperti:
Attribute Keterangan
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 di kirim dengan menggunakan query string pada
URL.
POST – data akan di kirim ke server sebagai block data ke script.
Syntax:
METHOD=”POST|GET”
FAJAR SURYANI PEMROGRAMAN WEB I

ACTION Menentukan lokasi dari script yang akan memproses data dari form
Syntax:
ACTION=”URL”

8.4 Cara Kerja Form

Buat file HTML dengan sintak divawah ini dan simpan dengan nama file formular.html!
FAJAR SURYANI PEMROGRAMAN WEB I

Jalankan pada browser maka tampilan akan muncul deperti dibawah ini:

8.5 TUGAS
Buatlah halaman registrasi suatu website.
1. Data yang harus dimasukkan pengguna, minimal: Nama depan, nama, belakang, alamat,
tanggal lahir, jenis kelamin, username, password, browse foto (tambahkan input lainnya
sesuaikan pada kasus masing-masing project).
2. Kolom dan baris isian dibuat rapi, dapat memanfaatkan/menggunakan table/div.
3. Dikumpulkan Sabtu, 8 Mei 2021. Pukul 23:59 pada menu UPLOAD TUGAS FORM di
e-learning
4. Nama file: NIM.html