Form merupakan komponen penting dalam halaman web untuk mengumpulkan data dari pengguna. Form dibuat menggunakan tag <form> dan berisi berbagai elemen seperti text field, checkbox, dropdown list, dan lainnya untuk memasukkan input. Atribut seperti name, method, dan action digunakan untuk mengidentifikasi dan mengirim data form ke server.

1. HTML FORM
I PUTU HARIYADI
putu.hariyadi@stmikbumigora.ac.id
Copyright © 2015 STMIK Bumigora

2. FORM
Copyright 2015 STMIK Bumigora

3. FORM
 Merupakan komponen dari halaman web yang digunakan untuk
melakukan pengumpulan data dari pengguna atau pengunjung situs.
 Pengguna dapat berinteraksi dengan form dan memasukkan data yang
dapat dikirimkan ke server untuk pemrosesan lebih lanjut.
 HTML Form dibuat menggunakan tag <form>, sebagai contoh:
<form atribut=nilai>
….
Form element
….
</form>
 HTML Form memuat element-element dari form yang dapat berupa
element input, button, textarea, select, dan lain sebagainya.
Copyright 2015 STMIK Bumigora

4. FORM ATRIBUT
Atribut Deskripsi
name Menentukan nama yang digunakan untuk mengidentifikasi form.
method Menentukan metode HTTP yang digunakan untuk mengirimkan
data dari form berupa GET atau POST.
action Menentukan URL atau script pemroses form.
enctype Menentukan jenis encode data dari form, berupa:
• application/x-www-form-urlencoded
Merupakan jenis encode default dari form.
• multipart/form-data
Merupakan jenis encode yang digunakan ketika melakukan
upload binary data dari form seperti file.
target Menentukan window atau frame dimana hasil dari script akan
ditampilkan, berupa _blank, _self, _parent, dan lain-lain.
Contoh:
<form name=“frmlogin” method=“post” target=“_blank” action=“login.php”>
…
…
</form>
Copyright 2015 STMIK Bumigora

5. FORM ELEMENT
Text Field
Text Field
Radio Button
Dropdown List Checkbox
Textarea
File
Text Field
Password
Password
Submit Button Reset Button Button
Copyright 2015 STMIK Bumigora

6. ELEMENT <input>
 Memiliki jenis (type) yang beragam meliputi:
1. Text
2. Password
3. Radio
4. Checkbox
5. Submit
6. Reset
7. Button
8. File
9. Image
10. Hidden
Copyright 2015 STMIK Bumigora

7. HTML Input Type=Text
 Digunakan untuk mendefinisikan input field satu baris (text field).
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “text”.
name Menentukan nama pengenal dari text input.
value Menentukan nilai awal dari text input.
size Menentukan ukuran lebar penampilan text input dalam satuan
karakter.
maxlength Menentukan maksimum jumlah karakter yang dapat dimasukkan
pada text input.
<input type=“text” name=“txtnim” size=“15” maxlength=“10”>
Copyright 2015 STMIK Bumigora

8. HTML Input Type=Password
 Digunakan untuk mendefinisikan input field satu baris namun karakter
yang dimasukkan akan di-mask (disamarkan) dan ditampilkan sebagai
asterisk atau circle.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “password”.
name Menentukan nama pengenal dari control input.
value Menentukan nilai awal dari control input.
size Menentukan ukuran lebar penampilan control input dalam
satuan karakter.
maxlength Menentukan maksimum jumlah karakter yang dapat dimasukkan
pada control input.
<input type=“password” name=“txtsandi” size=“15” maxlength=“20”>
Copyright 2015 STMIK Bumigora

9. HTML Input Type=Radio
 Digunakan untuk mendefinisikan radio button, dimana pengguna dapat
memilih hanya satu pilihan dari sejumlah pilihan yang ada.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “radio”.
name Menentukan nama pengenal dari control input. Pastikan nama
pengenal dari setiap control input radio sama.
value Menentukan nilai yang akan digunakan jika control input radio
tertentu dipilih.
checked Menentukan agar pilihan dari control input radio langsung
terpilih ketika halaman yang memuat control tersebut diakses.
<input type=“radio” name=“rbjeniskelamin” value=“P” checked> Pria
<input type=“radio” name=“rbjeniskelamin” value=“W”> Wanita
Copyright 2015 STMIK Bumigora

10. HTML Input Type=Checkbox
 Digunakan untuk mendefinisikan checkbox, dimana pengguna dapat
memilih lebih dari satu pilihan dari sejumlah pilihan yang ada.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “checkbox”.
name Menentukan nama pengenal dari control input. Nama pengenal
dari setiap control input checkbox dapat sama atau berbeda
bergantung pada desain penyimpanan data yang digunakan.
value Menentukan nilai yang akan digunakan jika control input
checkbox tertentu dipilih.
checked Menentukan agar pilihan dari control input checkbox langsung
terpilih ketika halaman yang memuat control tersebut diakses.
<input type=“checkbox” name=“chkhobby[]” value=“Komputer” checked> Komputer
<input type=“checkbox” name=“chkhobby[]” value=“Musik”> Musik
Copyright 2015 STMIK Bumigora
Output:

11. HTML Input Type=Submit
 Digunakan untuk mendefinisikan clickable button yang akan
mengirimkan (submit) isian dari form ke form-handler.
 Form-handler umumnya berupa script server-side yang akan
memproses input data.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “submit”.
name Menentukan nama pengenal dari control input.
value Menentukan nilai yang akan digunakan sebagai label dari
button.
<input type=“submit” name=“btnsimpan” value=“Simpan”>
Copyright 2015 STMIK Bumigora

12. HTML Input Type=Reset
 Digunakan untuk mendefinisikan clickable button yang akan
melakukan reset isian dari form.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “reset”.
name Menentukan nama pengenal dari control input.
value Menentukan nilai yang akan digunakan sebagai label dari
button.
<input type=“reset” name=“btnbatal” value=“Batal”>
Copyright 2015 STMIK Bumigora

13. HTML Input Type=Button
 Digunakan untuk mendefinisikan clickable button.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
 Aksi yang dapat dilakukan oleh button dapat diatur dengan
menambahkan client-side scripting seperti Javascript atau VBScript.
 Contoh button ketika diklik akan mengalihkan (redirect) ke situs
Google.com menggunakan object window.location dari Javascript:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “button”.
name Menentukan nama pengenal dari control input.
value Menentukan nilai yang akan digunakan sebagai label dari
button.
<input type=“button” name=“btngoogle” value=“Google”>
<input type=“button” name=“btngoogle” value=“Google”
onClick=“window.location=‘http://www.google.com’”>
Copyright 2015 STMIK Bumigora
Output:

14. HTML Input Type=File
 Digunakan untuk mendefinisikan file upload box atau file select box
yang dapat digunakan oleh pengguna untuk mengunggah file.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “file”.
name Menentukan nama pengenal dari control input.
accept Menentukan jenis file yang dapat diterima. Apabila ditentukan maka
nilai antar atribut dipisahkan menggunakan tanda koma. Nilai dapat
berupa:
• String “audio/*” untuk menyatakan file-file audio yang diterima.
• String “video/*” untuk menyatakan file-file video yang diterima.
• String “image/*” untuk menyatakan file-file gambar yang diterima.
• Menggunakan Multipurpose Internet Mail Extensions (MIME) Type
yang valid dengan tanpa parameter.
• String yang menyatakan ekstensi file tertentu yang diawali dengan
tanda “.” sebagai contoh “.jpeg”.
Copyright 2015 STMIK Bumigora

15. HTML Input Type=File
 Contoh menerima file-file gambar untuk input file foto:
<input type=“file” name=“foto” accept=“image/*”>
 Output:
 Contoh menerima file-file video untuk input file video:
<input type=“file” name=“video” accept=“video/*”>
 Contoh menerima file-file audio untuk input file audio:
<input type=“file” name=“audio” accept=“audio/*”>
 Contoh menerima file-file gambar dengan ekstensi JPEG, JPG & PNG untuk
input file foto:
<input type=“file” name=“foto” accept=“.jpeg,.jpg,.png”>
Copyright 2015 STMIK Bumigora

16. HTML Input Type=Image
 Digunakan untuk mendefinisikan clickable button yang menggunakan
gambar sebagai latar belakang dari button.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
<input type=“image” name=“btndownload” src=“download.jpeg”>
 Output:
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “image”.
name Menentukan nama pengenal dari control input.
src Menentukan lokasi dan nama file gambar.
Copyright 2015 STMIK Bumigora

17. HTML Input Type=Hidden
 Digunakan untuk mendefinisikan hidden field (field tersembunyi) yang
dapat digunakan oleh pengguna untuk menyembunyikan data di dalam
halaman dan selanjutnya dikirimkan ke server.
 Control input ini tidak akan ditampilkan secara aktual pada halaman,
namun tersembunyi pada kode HTML.
 Dibuat menggunakan tag <input>.
 Atribut dari tag <input>:
 Contoh:
<input type=“hidden” name=“rahasia” value=“1”>
Atribut Deskripsi
type Menentukan jenis dari control input yaitu “hidden”.
name Menentukan nama pengenal dari control input.
value Menentukan nilai yang akan dikirimkan.
Copyright 2015 STMIK Bumigora

18. ELEMENT <select>
 Digunakan untuk mendefinisikan dropdown list atau list menu.
 Dropdown list dapat dibuat menggunakan tag <select>.
 Atribut dari tag <select>
Contoh:
<select name=“lstjurusan”>
….
….
</select>
Atribut Deskripsi
name Menentukan nama pengenal dropdown list.
size Menentukan ukuran dari dropdown list.
multiple Menentukan agar beberapa pilihan pada dropdown list dapat
terseleksi atau terpilih.
Copyright 2015 STMIK Bumigora

19. ELEMENT <select>
 Pilihan pada dropdown list dapat digunakan menggunakan tag <option>.
 Atribut dari tag <option>
 Contoh:
<select name=“lstjurusan”>
<option value=“”>Pilihan …</option>
<option value=“S1TI”>S1TI</option>
<option value=“D3TI”>D3TI</option>
<option value=“D3MI”>D3MI</option>
</select>
Atribut Deskripsi
value Menentukan nilai yang akan digunakan atau dikirimkan ketika
pilihan tertentu pada dropdown list terpilih.
selected Menentukan pilihan tertentu pada dropdown list akan terpilih
secara langsung ketika halaman tersebut diakses.
Copyright 2015 STMIK Bumigora
Output:

20. ELEMENT <select>
 Contoh penggunaan atribut selected=“selected” pada tag <option>
pembuka untuk menseleksi langsung pilihan tertentu ketika halaman
diakses.
<select name=“lstjurusan”>
<option value=“”>Pilihan …</option>
<option value=“S1TI”>S1TI</option>
<option value=“D3TI”>D3TI</option>
<option value=“D3MI” selected=“selected”>D3MI</option>
</select>
 Output:
Copyright 2015 STMIK Bumigora

21. Element <select>
 Contoh penggunaan atribut size pada tag <select> pembuka:
<select name=“lstjurusan” size=“2”>
<option value=“”>Pilihan …</option>
<option value=“S1TI”>S1TI</option>
<option value=“D3TI”>D3TI</option>
<option value=“D3MI”>D3MI</option>
</select>
 Output:
Copyright 2015 STMIK Bumigora

22. Element <select>
 Contoh penggunaan atribut multiple=“multiple” pada tag <select>
pembuka:
<select name=“lstjurusan” size=“4” multiple=“multiple”>
<option value=“”>Pilihan …</option>
<option value=“S1TI”>S1TI</option>
<option value=“D3TI”>D3TI</option>
<option value=“D3MI”>D3MI</option>
</select>
 Tekan tombol Ctrl pada keyboard dan seleksi pilihan pada dropdown list
untuk memilih lebih dari satu pilihan.
 Output:
Copyright 2015 STMIK Bumigora

23. ELEMENT <textarea>
 Digunakan untuk mendefinisikan input field multi baris.
 Atribut dari tag <textarea>
 Contoh:
<textarea name=“txtcatatan” cols=“100” rows=“5”>
</textarea>
 Output:
Atribut Deskripsi
name Menentukan nama pengenal dari textarea
rows Menentukan jumlah baris dari textarea
cols Menentukan jumlah kolom dari textarea.
Copyright 2015 STMIK Bumigora

24. ELEMENT <button>
 Digunakan untuk membuat clickable button.
 Dibuat menggunakan tag <button>.
<button type=“button”>…label…</button>
 Contoh button dengan label “Peringatan”:
<button type=“button”>Peringatan</button>
 Aksi yang dapat dilakukan oleh button dapat diatur dengan menambahkan client-
side scripting seperti Javascript atau VBScript.
 Contoh button dengan label “Peringatan” dan menampilkan kotak dialog
menggunakan bantuan fungsi alert dari Javascript ketika diklik:
<button type=“button” onclick=“alert(‘Dilarang Menyontek!’)”>
Peringatan
</button>
 Output:
Setelah diklik
Copyright 2015 STMIK Bumigora

25. HTML Atribut Placeholder
 Digunakan untuk menentukan petunjuk singkat yang menjelaskan nilai
yang diharapkan pada input field dengan tipe seperti text, search,
url, tel, email dan password serta textarea.
 Petunjuk singkat ditampilkan pada input field sebelum pengguna
memasukkan nilai.
 Dibuat dengan menambahkan atribut placeholder=“text” pada tag
<input> dan <textarea>. Nilai text berupa petunjuk singkat yang
ingin ditampilkan pada input field.
 Contoh:
<input placeholder=“Masukkan NIM Anda”>
<textarea placeholder=“Masukkan catatan”></textarea>
 Output:
Copyright 2015 STMIK Bumigora

26. HTML Tag <label>
 Digunakan untuk memberikan label pada form element.
 Terdapat dua cara menggunakan tag <label> yaitu:
1. Menempatkan element di dalam tag pembuka dan penutup <label>.
<label>NIM: <input type=“text” name=“txtnim” size=“15”>
</label>
2. Menggunakan referensi atribut “id” dari element dengan menggunakan
atribut for pada tag pembuka <label>.
<label for=“txtnim”>NIM:</label>
<input type=“text” name=“txtnim” id=“txtnim” size=“15”>
Copyright 2015 STMIK Bumigora

27. HTML Tag <fieldset>
 Digunakan untuk mengelompokkan element yang berkaitan di form.
 Tag <fieldset> akan membuat kotak (box) mengelilingi element yang
berkaitan. Tag <legend> dapat digunakan untuk membuat judul fieldset.
 Atribut pada tag <fieldset>:
 Contoh: Output:
<form>
<fieldset name="fslogin">
<legend>Form Pencarian</legend>
<input type="text" name="txtcari">
<input type="submit">
</fieldset>
</form>
Copyright 2015 STMIK Bumigora
Atribut Deskripsi
name Menentukan nama pengenal untuk fieldset.
disabled Menentukan sekelompok element yang berkaitan akan dinonaktifkan.
Fieldset
Legend

28. ADA PERTANYAAN?
Copyright 2015 STMIK Bumigora

29. REFERENSI
 http://www.w3.org
 http://www.w3schools.com
 http://www.tutorialspoint.com
Copyright 2015 STMIK Bumigora

30. TERIMAKASIH
Copyright 2015 STMIK Bumigora