03

HTML FORM
Oleh Ardian P. Atmaja
Desain dan Pemrograman Web | TI PNM
Pengampu : Dyah Anggun S,S.T., M.Eng.

1
 FORM PADA 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 mengandung 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 (server
side) yang akan menangani data isian yang dikirim (di-
submit).
2
 SINTAKS DASAR FORM HTML
Skema dasar Form:
<form method="POST" action="namaprogram">
bagian ini berisi sejumlah elemen input berbagai jenis
sebagai formulir isian yang bisa diisi oleh user.
</form>

Contoh Form sederhana:

<form method="POST" action="proses.php">
<label for="nama">Ketikkan nama Anda:</label><br>
<input type="text" name="nama" id="nama"><br>
<input type="submit" value="Kirim">
</form>

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”

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 CGI Script
pada URL “cgibin/scriptform” dan kata formnya adalah
“Jakarta” dan “2503645”, maka URL akhir yang dikirim ke
server adalah :
/cgi-bin/scriptform?kota=Jakarta&telepon=2503645

• POST
Metode POST tidak seperti metode GET, yakni 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 dan aman.
5
 ATRIBUT PENGIRIMAN DATA
• 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. GET akan
membuat informasi dikirim menjadi satu dengan URL.
Sedangkan POST membuat informasi dikirimkan secara
terpisah dengan URL.

6
 FORM CONTROL : 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 :
<input type="text" name="nama"><br>
<textarea name="komentar"></textarea>

7
 FORM CONTROL : INPUT FILE
• Memasukkan inputan berupa file
• Sintaks :
<input type="file">

8
 FORM CONTROL : 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:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button>Tombol</button>

9
 FORM CONTROL : CHECK BOX
• Merupakan control yang memungkinkan pemilihan satu atau
lebih nilai informasi tertentu.
• Contoh :
<input type="checkbox" name="kendaraan" value="Mobil"> Mobil <br>
<input type="checkbox" name="kendaraan"
value="Sepeda Motor">Sepeda Motor <br>
<input type="checkbox" name="kendaraan" value="Sepeda"> Sepeda

10
 FORM CONTROL : SELECT BOX
• Merupakan control yang memungkinkan pemilihan satu nilai
informasi tertentu, disajikan dalam bentuk drop-down.
• Contoh :
<select name="mobil">
<option value="sedan">Sedan</option>
<option value="bus">Bus</option>
<option value="truck">Truck</option>
</select>

11
 FORM CONTROL : 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 :
<input type="radio" name="gender" value="pria">Pria
<input type="radio" name="gender" value="wanita"> Wanita

12
 FORM CONTROL : HIDDEN CONTROL

• Memungkinkan untuk menyembunyikan suatu kontrol

tertentu pada halaman web namun akan tetap terbaca
nilainya.
• Contoh:
Data Tersembunyi : <input type="hidden" name="rahasia“ value="teks
tersembunyi">

13