Belajar HTML ( Tag Form ) aplikatif implementasinya yaitu Membuat Form pada HTML. Form HTML merupakan tag yang paling penting adalam pemrograman HTML
khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan property
masukan yang terdiri dari berbagai jenis, berupa textbox, check box, radio
button, dan button.
Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari
form untuk login, form kontak, form untuk pendaftaran user, form advertiser,
form sitemap, bahkan untuk mengirimkan data antar halaman web. Pada tutorial
belajar HTML: cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.
Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form
biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari
user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau
PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya
akan menjelaskannya pada tutorial tentang PHPdan JavaScript.
Tag dasar yang akan bisa digunakan untuk membuat form pada HTML adalah tag
form, input, textarea, select dan option.
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Seperti yang sudah dipelajari
mengenai penulisan kode pada HTML diawali dengan <Nama Function Tag> ......( Isi
sebuah tag )..... </Nama Function Tag>
Pada bagian terakhir kita harus menutup kode dengan menambahkan slash ( / ).
Bagian Isi Tag dapat dimasukkan oleh beberapa atribut untuk dapat berfungsi
dengan seharusnya.
Dua buah atribut yang digunakan adalah action dan method. Dianalogikan action
adalah sesuatu yang mengoperasikan fungsi dari pada form tersebut. Sedangkan
method adalah bagian-bagian cara yang mengumpulkan setiap data yang diperlukan
untuk diproses. Actionberfungsi menjelaskan lokasi data yang didapat form akan dikirimkan.
Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP
yang akan memproses isi data form. Sedangkan fungsi dari Method, adalah untuk menjelaskan bagaimana
data isian form akan dikirim. Nilai dari atribut method ini bisa berupa get
atau post.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah
nilai default seandainya kita tidak menuliskannya) maka isian form akan
terlihat pada url browser. Method get ini biasanya digunakan untuk query
pencarian. Method post biasanya digunakan untuk data yang lebih sensitif
seperti yang berisi password, atau registrasi user. Data hasil form tidak akan
terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Bagian script kode diatas yang berwarna biru dan ungu dapat ditambahkan
attribut lainnya seperti style, class, dan lain-lain. Karena berhubungan dengan
form login maka hanya menambahkan action dan method saja. Sisanya bisa
menggunakan kode HTML dngan meletakkannya pada satu baris diatas form :
<div id='pandauan-belajar-html' class='membuat-form'> dan kita dapat menambahkan kode CSS
berdasarkan id dan class tersebut. Jangan lupa penutupnya di bagian bawah form
yaitu : </div>
Properti masukan pada elemen form
1. Text box<input
type="text">
Dignakan untuk memasukan input yang berupa teks.
Size
= ukuran dari textbox dalam karakter
Maxsize
= maksimal jumlah karakter yang dapat di input
Nama
= nama variable yang dikirim ke suatu aplikasi
Value
= akan menampilkan isinya sebagai nilai default
2. Password<input
type="password">
Di gunakan untuk memasukan password
Size
= ukuran textbox dalam karakter
Maxsize
= maksimal jumlah karakter yang dapat di input
Name
= nama variable yang dikirim ke suatu aplikasi
Ada lagi jenis input lainnya yaitu :
<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau
tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman
ditampilkan. Contoh inputan checkboxberupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantarapilihan group radio. Type radio ini berada dalam suatu grup dan user
hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis
kelamin.
<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.
3. Hidden<input
type"hidden">
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk
dilihat oleh browser.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= nilai dari variable
4. Check Box<input
type="checkbox">
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= nilai dari variable
Checked (checkbox yang sudah ditandai)
5. Radio Button<input
type="radio">
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
Name
= nama veriabel yang dikirim ke suatu aplikasi
Value
= nilai dari variable
Checked (radio button yang sudah di tandai)
6. Push Button<input
type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk
menghasilkan suatu aksi.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= label teks di atas tombol
7. Submit<input
type="submit">
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya
ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= label teks di atas tombol
8. Image Submit Button<input
type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
Name
= nama dari variable ayng dikirim ke suatu aplikasi
9. Reset<input
type="reset">
Digunakan untuk mereset semua masukan dalam form.
Value
= label teks di button
1. Text Area<textarea>…</textarea>
Elemen untuk memasukan teks secara leluasa seperti notepad.
Nama
= nama dari veriabel yang dikirim ke suatu aplikasi
Rows
= panjang baris dalam karakter
Cols
= tiggi kotak
1. Select<select>…</select>
Daftar isi dalam property select menggunakan tag <option>
Size
= jumlah pilihan yang dapat terlihat
Name
= nama dari veriabel yang dikirim ke suatu aplikasi
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</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
tag value. Jika tag value berisi nilai, maka nilai value lah yang akan dikirim.
Sama seperti tag option type checkbox dan type radio, atribut checked dapat
ditambahkan agar tag select berisi nilai awal, contoh penggunaanya sebagai
berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga"
selected>Pilihan 3</option>
</select>
Contoh dari pembuatan Form pada HTML yaitu sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">
Nama: <input type="text" name="nama" value="Nama
Kamu" />
<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 />
Hobi: <input type="checkbox"
name="hobi_baca" /> Membaca Buku Javascript
<input
type="checkbox" name="hobi_nulis" checked /> Menulis
Code HTML, CSS, PHP
<input
type="checkbox" name="hobi_mancing" /> Menggambar Design
Banner Website
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota
Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota
Semarang" checked>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5"
cols="20">Silahkan berikan komentar anda</textarea>
<br />
<input type="submit" value="Proses" >
</form>
</body>
</html>
Tampilan pada form tersebut memang kurang rapih karena tidak menggunakan kode
CSS, untuk seorang developers web tampilan merupakan hal yang paling utama juga
terlepas dari segi data dan keamanan. Oleh karena itu anda harus belajar
pemrograman bahasa CSS ( Cascading Style Sheet ). Demikian tutorial cara membuat form pada html, semoga bermanfaat.
