Document HTML tidak terlepas dari pembuatan form. Mulai dari form
login, form registrasi (form pendaftaran), form kontak, form input data customer dan masih banyak lagi form-form
lainnya. Dalam sebuah form bisa jadi memiliki banyak sekali kontrol (form control) yang digunakan seperti input
box, combo box (select), checkbox, textarea, radio button dan yang mana
masing-masing kontrol memiliki kegunaan yang berbeda.
Pembuatan Form pada dokumen HTML di awali dengan Tag <form> dan
berakhir dengan Tag </form> dan diantara Tag inilah kontrol akan
diletakan. Berikut ini adalah Struktur dasar form :
<form
action=”simpan.php” method=”post”>
......
</form>
Tag <input>
Tag ini di tujukan unuk melakukan inputan (masukan). Jenis-jenis dari
Tag input adalah :
-
<input type=”text” />
Inputan ini berbentuk textbox
dan digunakan untuk memasukan teks / kalimat pendek.
-
<input type=”password” />
Inputan ini berbentuk textbox
sama seperti type text, perbedaan nya adalah teks yang di inputkan disamarkan
isi nya biasannya berupa bintang atau bulatan hitam. Input Type password
biasanya digunakan hanya untuk inputan
password (form login).
-
<input type=”checkbox” />
Inputan ini
berbentuk checklist (centang). Biasanya di gunakan untuk pilihan-pilihan yang
lebih dari satu atau data yang bersifat optional.
-
<input type=”radio” />
Berbeda dengan checkbox inputan
ini hanya memungkinkan penggunanya memilih satu dari sekian banyak pilihan.
Input type radio biasa nya digunakan untuk melakukan pilihan yang spesifik
seperti pilihan untuk agama, gender(jenis kelamin), atau pun soal dengan
jawaban pilihan ganda.
-
<input type=”submit” />
Inputan ini
berbentuk tombol (button) dan digunakan
untuk melakukan proses form.
Tag <select>
Biasa disebut juga sebagai dropdown atau combo box. Secara terminologi
(penggunaan) sama seperti input type radio karena Tag ini hanya memungkinkan
penggunanya memilih satu dari sekian banyak pilihan hanya saja karena ruang
dari desain web yang terbatas penggunaan Tag select menjadi pilihan untuk para
developer web untuk membuat suatu daftar input pilihan. Contoh penggunaan Tag
select adalah sebagai berikut:
<select>
<option>Pilihan</option>
<option value=”nilai1”>Pilihan
1</option>
<option value=”nilai2”>Pilihan
2</option>
<option value=”nilai3”>Pilihan
3</option>
<option value=”nilai4”>Pilihan
4</option>
<option value=”nilai5”>Pilihan
5</option>
</select>
Pada Tag
select pada saat sebuah form di proses atribut value yang akan di kirimkan data
nya. misal kita melakukan pilihan pada Pilihan
2 maka data yang terkirim adalah nilai2.
Tag <textarea>
Tag textarea
mirip seperti model input type text, hanya saja pada textarea memiliki cols dan
rows untuk mengatur panjang dan lebar nya inputan ini. Dan inilah yang memungkinkan
textarea untuk memuat banyak text / kalimat. Contoh penggunaan Tag
select adalah sebagai berikut:
<textarea
cols="100" rows="10"></textarea>
Berikut ini
adalah contoh pembuatan form.
<!doctype
html>
<html>
<head>
<title>Selamat Datang</title>
</head>
<body>
<form action="simpan.php"
method="post">
<b>Nama
Lengkap</b><br />
<input type="text"
name="nama" /><br /><br />
<b>Jenis
Kelamin</b><br />
<input name="jk"
type="radio" value="L">Laki-Laki
<input name="jk"
type="radio" value="P">Perempuan
<br /><br />
<b>Pendidikan</b><br
/>
<select
name="pendididkan">
<option>Pilih
Pendidikan Terakhir</option>
<option
value="sd">Sekolah Dasar</option>
<option
value="sltp">Sekolah Menengah Pertama</option>
<option
value="sma">Sekolah Menengah Atas</option>
<option
value="d3">Diploma</option>
<option
value="s1">Sarjana</option>
<option
value="s2">Magister</option>
<option
value="s3">Doktor</option>
</select><br /><br
/>
<b>Tuliskan Biografi singkat
anda</b><br />
<textarea cols="80"
rows="15"></textarea>
<br /><br />
<input type="submit"
name="submit" value="simpan">
</form>
</body>
</html>
Sebenarnya pada contoh form di atas masih sangat jauh
dari standar pembuatan form , masih banyak yang harus di perbaiki dari tampilan
dan juga proses, tapi karena ini hanya sekedar pengenalan pembuatan form maka
materi ini saya cukupkan sampai disini. pada artikel berikutnya akan sama-sama
kita buat form yang lebih menarik lagi.
No comments:
Post a Comment