Belajar HTML Bagian 14 : Cara Membuat Form di HTML

Form digunakan untuk mengumpulkan data dari pengunjung website. Mulai dari form pencarian, login, registrasi dan lain sebagainya.

HTML tidak bisa memproses data yang dikumpulkan dari form tersebut, karena HTML hanya digunakan untuk menformat dokumen bukan untuk memproses data.

Untuk memproses data dari form tersebut kita bisa mengunakan bahasa pemrograman web seperti JavaScript, PHP dan bahasa pemrograman web lainnya. Untuk pembahasan lebih lanjut Saya akan membahasnya di tutorial JavaScript dan PHP.

---

Pembahasan Tag <form>

Tag <form> digunakan untuk mendefinisikan sebuah form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag <form> membutuhkan beberapa atribut untuk dapat berfungsi seperti seharusnya.

 

Atribut action

Atribut pertama adalah action, yang digunakan untuk menentukan lokasi kemana form tersebut akan dikirimkan. Biasanya nilai dari atribut ini adalah sebuah alamat dari halaman PHP yang digunakan untuk memproses data dari form tersebut.

 

Atribut method

Atribut kedua adalah method, yang berfungsi untuk menentukan bagaimana data form tersebut akan dikirimkan oleh browser. Nilai dari atribut ini yaitu post dan get.

Jika kita mengisi atribut method dengan get maka data dari form tersebut akan terlihat pada URL browser, biasanya digunakan untuk form pencarian. Jika mengisi dengan nilai post maka data dari form tersebut tidak akan terlihat pada URL browser, biasanya digunakan untuk data yang sensitif misalnya seperti username dan password.

Berikut ini contoh dari penggunaan atribut di tag <form> :

<form action="proses.php" method="post">...</form>

---

Tag label

Tag label digunakan untuk memberi keterangan pada setiap input yang ada.

Berikut ini contoh penggunaan tag label :

<label for="name"> <!-- keterangan input --> </label>

Pada contoh kode tag <label> diatas terdapat atribut for berfungsi untuk mencari name yang sesuai dengan isi nilai dari atribut tersebut.

---

Atribut name

Setiap tag inputan di dalam form harus menambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses seperti PHP dan sebagainya, nilai dari atribut name inilah yang akan menjadi variable form.

Contoh penggunaan atribut name :

<label for="nama">Nama lengkap :</label>
<input type="text" name="nama">
<label for="email">Email Anda :</label>
<input type="email" name="email">

---

Mengenal Tag <input>

Tag <input> sering digunakan di dalam form, karena memiliki banyak tipe. Seperti textbox, text password, button, checkbox, radio, submit dan lain-lainnya. Tapi kali ini Saya tidak akan membahas semua tipe yang ada di tag <input>.

Berikut ini atribut dari tag <input> :

Text Box

Textbox digunakan untuk menerima inputan berupa teks pendek, biasa digunakan untuk username dan sebagainya.

Contoh penggunaan textbox di HTML :

<label for="nama">Nama lengkap :</label>
<input type="text" name="nama">

 

Text Password

Hampir sama dengan textbox namun teks yang di input tidak akan terlihat, yang terlihat berupa bulutan hitam. Biasa digunakan untuk inputan yang sensitif seperti password dan sebagainya.

Contoh penggunaan text password di HTML :

<label for="sandi">Kata sandi :</label>
<input type="password" name="sandi">

 

Submit

Nilai dari submit ini akan menampilkan sebuah tombol yang jika di klik akan memproses seluruh data dari form tersebut.

Contoh penggunaan submit di HTML :

<input type="submit" value="Kirim">

---

Text Area

Sama halnya dengan text, namun textarea dapat diisi teks yang lebih dari satu baris, sangat cocok digunakan untuk inputan teks yang panjang seperti alamat, deskripsi dan sebagainya. Panjang dan baris textarea bisa di atur melalui atribut rows dan cols atau bisa melalui CSS.

Contoh penggunaan tag <textarea> di HTML :

<label for="pesan">Pesan :</label>
<textarea rows="10" cols="25" name="pesan"></textarea>

---

Combo Box

Combo box adalah inputan yang telah tersedia nilainya, dan pengguna hanya dapat memilih dari nilai yang sudah tersedia. Untuk mendefinisikan sebuah combo box dapat menggunakan tag <select>, untuk pilihannya menggunakan tag <option>.

Contoh kode HTML untuk membuat combo box :

<label for="kota">Sekarang Anda berada di kota :</label>
<select name="kota">
 <option>Jakarta</option>
 <option>Bandung</option>
 <option>Surabaya</option>
</select>

Tag <option> memiliki atribut selected yang di gunakan agar tag <option> berisi nilai awal. Contoh penggunaannya sebagai berikut :

<label for="kota">Sekarang Anda berada di kota :</label>
<select name="kota">
 <option>Jakarta</option>
 <option>Bandung</option>
 <option selected>Surabaya</option>
</select>

---

Membuat Sebuah Form Utuh

Kita akan memasukkan seluruh kode tag yang telah dibahas sebelumnya ke dalam tag <form>. Silahkan buka text editor sobat lalu ketikan kode dibawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Form di HTML</title>
</head>
<body>
<form action="proses.html" method="get">
 <p><label for="nama">Nama lengkap :</label>
 <input type="text" name="nama"></p>
 
 <p><label for="sandi">Kata sandi :</label>
 <input type="password" name="sandi"></p>
 
 <p><label for="kota">Sekarang Anda berada di kota :</label>
 <select name="kota">
 <option>Jakarta</option>
 <option>Bandung</option>
 <option>Surabaya</option>
 </select></p>
 
 <p><label for="pesan">Pesan :</label>
 <textarea rows="10" cols="25" name="pesan"></textarea></p>
 
 <p><input type="submit" value="kirim"></p>
</form>
</body>

Jika sudah diketik silahkan Save dengan nama form.html, lalu buka di browser. Silahkan tekan tombol Kirim, maka tampilannya akan seperti gambar dibawah ini :

Perhatikan pada atribut action Saya menulis nilainya adalah form.html dan nilai dari atribut method yaitu get, sehingga pada saat Anda menekan tombol Kirim maka akan muncul URL dari data form yang sudah di isi sebelumnya secara otomatis di addres bar. URL seperti dibawah ini :

file:///D:/Belajar%20HTML/proses.html?nama=Abdi&sandi=katasandi&kota=Jakarta&pesan=Mari+belajar+HTML+di+mas-abdi.blogspot.com

Lihat URL diatas, setiap nilai akan dibatasi dengan karakter "&" sedangkan spasi diganti dengan "+".

Untuk pembahasan cara memproses inputan form akan dibahas di Tutorial PHP yang nantinya akan Saya buatkan.

Share this post