Form bisa juga di artikan sebagai formulir atau media untuk menampung sebuah informasi suatu objek.
Form di wabsite umumnya di gunakan untuk mengirimkan data seperti nama pengguna, Pasword, Email, Keterangan penting, Kirim File dan lain-lain ke dalam server.
Form sangat erat kaitannya dengan bahasa pemrograman seperti JavaScript, PHP, MySql, ASP dan lain-lain. Form tidak akan terlalu berguna jika kita hanya menggunakan HTML saja, karena pada dasarnya form di HTML fungsinya hanya untuk layout (tampilan) struktur form. sedangkan fungsi form sepenuhnya di proses dengan bahasa pemrograman seperti yang telah di sebutkan sebelumnya.
Di artikel ini, kita tidak akan membasas secara detail tentang pembuatan form dengan bahasa pemrograman, di artikel ini kita akan mempelajari konsep form dasar saja. penjelasan form secara detail, kita akan bahas di artikel selanjutnya ketika kita sudah sampai pada topik tentang bahasa pemrograman PHP.
Membuat Form di HTML
Untuk membuat form di HTML, kita sudah di sediakan element khusus yakni element dengan tag <form> dan tag penutupnya </form>. tag form memiliki dua atribut umum yang sering di gunakan untuk membuat form yakni atribut action="..." dan method="....".
atribut Action di tag <form>
Atribut menentukan di mana lokasi pemrosesan data form akan di lakaukan. contohnya sebagai berikut:
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="Controller.php" >
</form>
</body>
</html>
Secara default data dalam element form akan di proses di dalam dokument itu sendiri jika atribut action tidak di nyatakan atau di set konsong, tapi jika element form seperti contoh di atas artinya data yang berada dalam element form di kirim dan di proses di dokument lain yakni Controller.php.
Atribut method di Tag <form>
Atribut ini di gunakan untuk menentukan bagai mana proses pengiriman data yang di kirim dari element form pada sebuah bahasa pemrograman seperti PHP untuk di proses. Ada dua value untuk atribut ini yakni Get dan post.
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="Controller.php" method="post" >
</form>
</body>
</html>
Atribut method="post" artinya data yang di kirim tidak akan di perlihatkan di bagain url browser, biasanya method (post) di gunkan untuk menangani data form yang bersifat sensitif seperti data pasword.
Atribut method="get" biasanya di gunakan untuk form query pencarian.
jika kita tidak mencamtumkan atribut method="..." makan data form akan terlihat di url ketika data mulai form mulai di kirim.
Field Form di HTML
Field form adalah element yang berada di dalam element form. tag yang menjadi field form antara lain <input>, <textarea>, <select> dan <option>.
Element dengan tag <input>
Element di gunakan untuk menerima input oleh user. Tag input merupakan tag yang paling banyak digunakan di dalam form dan tag ini memiliki banyak bentuk, seperti input text, input text password, checkbox, radio dan tombol submit. ragam dari bentuk element ini di tentukan oleh sebuah atribut yakni atribut type="...".
Input text form
<input type="text"> adalah element yang di gunakan untuk menginput sebuah teks satu baris kedalam web.
contohnya seperti tempat untuk menulis Email pada saat log-in.
Contohnya seperti di bawah ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" value="Email"/>
</body>
</html>
Preview
Value="...." adalah atribut yang berfungsi memberi teks awal yang berada dalam TextBox input.
Input Pasword form
<input type="password"/> adalah element yang digunakan sebagai tempat input sebuah pasword seperti log-in pasword. contoh:
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="password" name="email"/>
</body>
</html>
Preview
Name="..." atribut ini adalah atribut yang akan di panggil ketika nilai input user akan di proses oleh pahasa pemrograman. atribut ini akan selalau di butuhkan ketika kita sudah mulai mengolaborasikan form html dengan bahasa pemrograman.
Input Checkbox form
<input type="checkbox"/> adalah input berupa chak atau centang.
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="Checkbox" name="opsi1"/>
<input type="Checkbox" name="opsi2" checked/>
</body>
</html>
Input Radio form
<input type="radio"/> adalah input sama seperti checkbox. bedanya, user tidak dapat memilih lebih dari satu dalam satu group.
Preview
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" name="opsi1"/>
<input type="radio" name="opsi2"/>
</body>
</html>
Input submit form
<input type="submit" /> adalah input berupa tombol untuk mengirim data dalam sebuah form seperti tombol log-in. input submit ini biasanya di simpan di bawah paling akhir dalam sebuah form.
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="submit" name="kirim" value="log-in" />
</body>
</html>
Element dengan tag <textarea>
element textarea adalah element dengan tag <textarea> element ini di gunakan untuk menampung input text yang panjang dan lebih dari satu baris. tag ini memeiliki beberapa atribut yang sering di gunakan yakni cols="..." dan rows="...".
Contoh element textarea
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<textarea cols="30" rows="30" placeholder="masukkan teks anda di sini" ></textarea>
</body>
</html>
Element dengan tag <Select>
Element HTML ini di gunakan untuk memberi salah satu pilihan yang nilainya sudah di tetapkan oleh pembuat program. element ini menyajikan informasi dengan gaya list. untuk membuat daftar select options, HTML menyediakan element
dengan tag <select> sebagai wrapper (pembungkus data) dan tag <option> sebagai item nya (daftar pilihan).
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
<option>ASP</option>
<option>MySql</option>
</select>
</body>
</html>
Preview
Sampai di sini, sebenarnya kita belum tuntas mempelajari sebuah form di HTML. namun saya rasa ini sudah cukup memberi penjelasan struktur dasar dari sebuah form HTML. Untuk memahami bagaimana form HTML memproses data input dari user (pengguna), kita di tuntut untuk menguasai bahasa pemrograman PHP atau pun ASP , minimal pengetahuan Basic .
Untuk menuntaskan materi belajar HTML form ini, kita akan lanjutkan setelah pemahaman Basic bahasa pemrograman PHP di artikel selanjutnya.