Tutorial HTML Dasar Part 13: Cara Membuat Form di HTML (tag form)

Cara Membuat Form di HTML (tag form) – Form biasanya digunakan untuk mengumpulkan data dari pengunjung web yang mengisi sebuah form. Contohnya seperti form untuk login, register, form kontak, dll, bahkan bisa untuk mengirimkan data antar halaman web.

---

Penggunaan form hanya menggunakan HTML tidak akan terlalu berguna. Form biasanya hanya berupa interface yang di sediakan untuk mengumpulkan data dari user, dan akan di proses dengan bahasa pemrograman web seperti PHP ataupun Javascript, setelah itu disimpan dalam database/tabel MySQL. Untuk pembahasan lebih lanjut, insya Allah saya akan membuatnya  pada tutorial PHP nanti. Jika anda ingin belajar PHP, iltekkomputer sudah mempunyai beberapa tutorial PHP, silahkan klik disini jika ingin melihat tutorialnya.

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

---

Pengertian tag <form>

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan tag </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan baik/seharusnya.

Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan di proses. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.

Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana isian data form akan dikirim oleh browser. Nilai dari atribut method ini bisa berupa get atau post.

Perbedaan method get dan method post adalah… jika kita mengisi atribut method dengan get (merupakan nilai default jika atribut method tidak ditulis) maka isian data form akan terlihat pada url di browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih privasi seperti password, atau data-data pribadi registrasi dari user. Dan isian data dari method post ini tidak terlihat pada url di browser.

Berikut ini contoh kode struktur dasar dari form:

<form action="kirimdata.php" method="post">
		isi dari form
</form>

---

Mengenal tag <input>

Tag input merupakan tag paling banyak digunakan dalam form dan memiliki banyak bentuk, mulai dari isian teks biasa, teks password, radio, checkbox, dan tombol submit. Semuanya termasuk dalam bentuk tag <input>.

Bentuk-bentuk dari tag input ini di bedakan berdasarkan tipe atribut:

• <input type=”text” /> adalah textbox input yang bisa menerima inputan berupa text, contohnya digunakan untuk memasukkan/meng-input nama/username. Input type text ini juga bisa memiliki atribut value yang bisa di isi dengan nilai tampilan dari awal dari text.
• <input type=”password” /> dalam tampilannya sama dengan type text, namun text yang di input tidak terlihat. Bentuknya akan berupa bulat ataupun bintang. Karena memang tipe ini digunakan untuk meng-input hal yang sensitif seperti password.
• <input type=”radio” /> adalah inputan berupa pilihan yang bisa di ceklis hanya salah satu saja diantara pilihan grup radio. Type radio ini berada dalam suatu grup dan user hanya memilih salah satu. Salah satu contoh dari tipe ini adalah untuk memilih jenis kelamin.
• <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat di ceklis oleh user. User bisa memilih atau tidak memilih checkbox ini. Tipe checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat checkbox langsung terpilih pada saat pertama kali halaman di buka. Salah satu contoh dari tipe ini adalah untuk memilih cita-cita, dimana user bisa memiilh lebih dari 1 cita-cita.
• <input type=”submit” /> submit akan menampilkan tombol untuk memproses form ke halaman selanjutnya. Atribut value jika diisi akan membuat teks button submit berubah dengan nilai yang di isi.

[box type=”note” align=”” class=”” width=””]Perlu di perhatikan juga bahwa tag <img>, <br>, dan tag <input> juga merupakan yang berdiri sendiri, sehingga tidak membutuhkan tag penutup.[/box]

---

Mengenal tag <textarea>

Tag textarea pada dasarnya sama dengan input type text, tapi lebih besar dan bisa di isi dengan banyak baris. Panjang dan lebar banyak baris untuk textarea di atur melalui atribut rows dan cols.

Berikut ini contoh kode penggunaan tag textarea:

<textarea rows="10" cols="50">
    	Text yang diisi bisa sampai banyak baris
</textarea>

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

---

Mengenal tag <select>

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan barengan dengan tag option untuk membuat box pilihan.

Berikut ini contoh kode penggunaan tag select:

<select>
	    <option>Pilihan 1</option>
	    <option value="pilihan kedua">Pilihan 2</option>
	    <option>Pilihan 3</option>
</select>

Ketika form di kirim untuk di proses, nilai dari tag <option> akan dikirimkan. Nilai ini 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 tidak akan berdampak dalam tampilan form.

Tag select memiliki atribut selected yang dapat ditambahkan supaya tag select berisi nilai awal. Contohnya adalah sebagai berikut:

<select>
	    <option>Pilihan 1</option>
	    <option value="pilihan kedua" selected>Pilihan 2</option>
	    <option>Pilihan 3</option>
</select>

Bisa dilihat pada gambar diatas, nilai awal dari tag option adalah “Pilihan 2”. Hal ini dikarenakan kita memberikan atribut selected.

---

Mengenal Atribut: Name

Setiap tag inputan di dalam form harus ditambahkan atribut name supaya bisa di proses oleh web server lainnya. Di dalam halaman proses/server (yang biasanya berupa bahasa pemrograman PHP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh penggunaannya adalah seperti di bawah ini:

<input type="text" name="username">
<input type="text" name="email">

Kedua input diatas akan terlihat sama persis, tapi pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.

---

Sebuah Form Utuh…

Akhirnya, setelah kita sudah membahas seluruh tag form yang ada di HTML, maka sekarang saatnya kita untuk membuat sebuah form utuh di HTML. Silahkan ketik kode dibawah ini dan simpan dengan nama form.html.

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Tag dan Membuat Form </title>
</head>
<body>
<form action="form.html" method="get">
 
Nama: <input type="text" name="nama" value="Masukkan nama" />
<br/>
 
Password: <input type="password" name="password" />
<br/>
 
Jenis Kelamin : 
<input type="radio" name="jenis_kelamin" value="laki-laki" checked /> 
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" /> 
Perempuan
<br/>
 
Daerah:
 <select name="asal_kota" >
     <option value="Jakarta Timur">Jakarta Timur</option>
     <option value="Jakarta Selatan" selected>Jakarta Selatan</option>
     <option value="Jakarta Barat">Jakarta Barat</option>
     <option value="Jakarta Utara">Jakarta Utara</option>
 </select>
<br/>

Hobi: <input type="checkbox" name="hobi_masak" /> Memasak
      <input type="checkbox" name="hobi_ngoding" checked /> Ngoding
      <input type="checkbox" name="hobi_Berenang" /> Berenang
<br/>
 
Masukkan saran anda disini:
<textarea name="komentar" rows="10" cols="50">
Silahkan masukkan kritik dan saran...
</textarea>
<br />
 
<input type="submit" value="Kirim Data" >
 
</form>
</body>
</html>

Perhatikan bahwa untuk atribut action saya mengisinya dengan “form.html” dan atribut method saya isi dengan nilai get, sehingga pada saat kita klik tombol submit atau kirim data, perhatikan perubahan pada url web browser anda, akan tampil tambahan kata seperti ini (kata yang berwarna biru):

Jika di perhatikan lebih teliti dan lebih lanjut, semua isian form tampak terlihat dari baris ini (karena method form kita setting menjadi get) setiap nilai dibatasi dengan karakter dan (&) sedangkan spasi di ubah menjadi karakter tambah (+).

---

Sudah mencapai Tutorial HTML Dasar part 13 ini, tidak terasa kita sudah membahas hampir seluruh tag-tag umum yang sering digunakan pada HTML untuk halaman website. Mungkin next part adalah part terakhir dari tutorial HTML Dasar ini.