Form: Element

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna karena form biasanya berupa
interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa
pemrograman web seperti Javascript, atau PHP, dan akan disimpan di dalam tabel MSQL.

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select
dan option.

Tag <form>
Sebuah form dalam HTML harus berada di dalam tag form yang diawali dengan <form> dan diakhiri
dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
1. action, berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut
action adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
2. method, berfungsi untuk menjelaskan bagaimana data isian form akan dikirimkan oleh web browser.
Nilai atribut method bisa berupa get atau post.

*Perbedaan get dan post adalah jika kita mengisi atribut method dengan get (nilai default) maka isian form
akan terlihat pada url browser. Method get biasanya digunakan untuk query pencarian. Method post
biasanya digunakan untuk data yang lebih sensitif seperti password atau registrasi user. Data hasil form
tidak akan terlihat pada browser.
Contoh penggunaan:
<form action=”proses.php” method=”GET”>
<!-- form field di sini -->
</form>

Tag <input>
Tag input merupakan tag yang paling banyak digunakan di dalam membangun form dan memiliki banyak
bentuk, mulai dari isian text biasa, text password, checkbox, radio button, sampai tombol submit.
Bentuk-bentuk dari tag input dibedakan berdasarkan atribut type:
1. <input type=”text”/> adalah textbox inputan biasa yang menerima input berupa text. Input type text
bisa memiliki atribut value yang diisi nilai tampilan awal dari text.
2. <input type=”password”/> dalam tampilannya sama seperti type text, namun teks yang diinput tidak
akan terlihat. Text yang diinput akan berupa bintang atau bulatan. Biasanya type password digunakan
untuk inputan yang sensitif seperti password.
3. <input type=”checkbox”/> adalah inputan yang dapat diceklist atau dicentang oleh user. User dapat
memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika diisi
dengan nilai checked, akan membuat checkbox langsung terpilih pada saat pertama kali halaman
ditampilkan. Contoh inputan checkbox berupa hobi, dimana user bisa memilih beberapa hobi yang
dimilikinya.
4. <input type=”radio”/> mirip seperti checkbox, namun user hanya dapat memilih satu diantara
beberapa pilihan yang tersedia. Contoh inputan type radio adalah jenis kelamin.
5. <input type=”submit”> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada
baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai
inputan nilai value.

Tag <textarea>
Tag textarea sama seperti input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan
banyak baris untuk textarea di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan:
<textarea rows=”5” cols=”20”>
Text yang diisi dapat mencapai banyak baris
</textarea>

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

Tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya dan user hanya dapat memilih dari nilai
yang tersedia. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh penggunaan:
<select>
<option>Jakarta</option>
<option>Medan</option>
<option value=”surabaya”>Surabaya</option>
</select>

Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text
diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai
value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.

Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai awal.
Contoh penggunaan:
<select>
<option>Jakarta</option>
<option>Medan</option>
<option value=”surabaya” selected>Surabaya</option>
</select>

Atribut Name
Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server
nantinya. Di dalam halaman proses (berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang
akan menjadi variabel form.
Contoh penggunaan:
<input type=”text” name=”username”>
<input type=”text” name=”email”>
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan
dibedakan menurut atribut value.

Contoh Praktek:

*placeholder digunakan untuk menampilkan teks sementara

Tag <button>
Kita telah menggunakan tag input dengan type submit untuk membuat tombol di dalam form HTML,
namun HTML telah menyediakan tag khusus yang memiliki fungsi yang sama yaitu dengan menggunakan
tag button.
Tag button berfungsi untuk membuat tombol baik di dalam form maupun diluar form. Dibandingkan
dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang
lebih.
Contoh penggunaan:
<button>Submit</button>

Tag button tidak harus berada di dalam form dan ini memberikan fleksibilitas yang tinggi. Kita bisa
memprogramnya menggunakan Javascript untuk membaut fungsi lain yang akan dijalankan ketika tombol
tersebut di klik.
Atribut type: mengubah fungsi tombol tag button
Jika digunakan di dalam form, kita dapat menambahkan sebuah atribut type untuk mengubah fungsi tombol
tersebut. Nilai yang bisa digunakan adalah reset, submit dan button.
Contoh penggunaan:
<button type=”reset”>Reset</button>

Jika menuliskan type=”submit” maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk
diproses (dengan PHP). Jika menuliskan type=”reset”, maka ketika tombol tersebut di klik, efeknya akan
mengosongkan isi yang berada di dalam form. Jika type=”button” tidak akan memiliki efek apapun ke
dalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis: <button type=”button”>

Atribut disabled: menonaktifkan tag button

Salah satu atribut penting untuk tag button adalah atribut disabled. Atribut ini digunakan untuk mengontrol
apakah tombol tersebut bisa digunakan oleh user atau tidak. Atribut ini hanya memiliki 1 nilai yaitu
disabled, sehingga ditulis dengan disabled=”disabled”.
Contoh penggunaan:
<button disabled=”disabled”>Tombol ini tidak bisa di klik</button>

Atribut id dan class: CSS dan Javascript

Selain atribut type dan disabled, kita bisa menggunakan atribut seperti id dan class dalam tag button.
Atribut id dan class akan dibutuhkan untuk pemrograman HTML menggunakan Javascript dan CSS.

Contoh Praktek:
Tag <input type=”hidden”>
Tag input dengan type hidden adalah sebuah objek form khusus yang sesuai dengan nama tipenya,
tersembunyi dan tidak dapat dilihat oleh user. Namun objek form ini menawarkan fleksibilitas yang dapat
dimanfaatkan oleh programmer untuk menyisipkan suatu data untuk diproses.
Type hidden ini bisa digunakan untuk mengirim suatu data dari sebuah halaman ke halaman lain tanpa
mengganggu bentuk form yang telah ada, dan biasanya digabungkan dengan pemrosesan Javascript dan
PHP.
Contoh penggunaan:
<form>
<input type=”hidden”>
</form>

Atribut value
Atribut value untuk type hiddden berguna pada saat pemrosesan form oleh web server. Misalnya
dalam bahasa PHP, nilai dari value inilah yang akan diproses. Dalam type hidden ini, nilai dari
atribut value inilah yang merupakan nilai terpenting, karena disinilah programmer dapat
menyisipkan data yang diinginkan.
Contoh penggunaan:
<form>
<input type=”hidden” name=”asal_halaman” value=”halaman-register”/>
</form>

Contoh Praktek:
Form: Element Lanjutan

Tag <label>
Tag <label> berfungsi untuk menambahkan informasi ataupun keterangan terkait dengan jenis
inputan yang digunakan pada form HTML. Secara tampilan, tag <label> tidak akan berpengaruh
apapun di dalam form kecuali jika kita mengubahnya menggunakan CSS. Sehingga ada atau tidak
adanya tag <label>, tidak akan ada perbedaannya.

Cara Penggunaan Tag Label

Ada 3 cara di dalam penggunaan tag label.
1. <label>
<input type=”checkbox” name=”belajarForm” />Element Lanjutan
</label>
Dengan memasukkan seluruh tag input checkbox dan keterangannya ke dalam tag label, maka
kita bisa klik tulisan keterangan dari checkbox, dan secara otomatis checkbox akan terisi.
2. <input type=”checkbox” name=”belajarForm” id=”belajarForm”/>
<label for=”belajarForm”>Element Lanjutan</label>
Tag label diletakkan setelah tag input checkbox. Di dalam tag label terdapat sebuah atribut for,
yang nilainya adalah id dari tag input (artinya label tersebut untuk control yang memiliki id
belajarForm).
3. <label for=”belajarForm”>
<input type=”checkbox” name=”belajarForm” id=”belajarForm”/>Element Lanjutan
</label>
Cara ketiga merupakan penggabungan dari kedua cara diatas, namun “mengurung” tag input
checkbox dan tag label.

*Atribut for pada <label> berguna untuk membuat <label> clickable dan menghubungkannya
dengan suatu form elemen (biasanya elemen input) yang mempunyai id yang sama dengan nilai
for. Atribut for membuat kita bisa mengisi checkbox dan radio button hanya dengan klik
labelnya saja tanpa perlu klik kotak checkbox atau bulatan pada radio button.
Contoh Praktek:

Tag Fieldset dan Tag Legend

Fungsi tag fieldset dan tag legend lebih mengacu kepada tampilan dari form karena akan mempercantik
form yang dibuat.
Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan
tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut.
Contoh penggunaan:
Latihan: