Membuat Form

Membuat Form

Fungsi Form Pada Halaman Web

Salah satu cara untuk membuat halaman web yang interaktif adalah dengan menggunakan form. Biasanya form digunakan untuk meminta input dari pengunjung website. Form banyak digunakan pada guestbook, angket atau polling on-line, form pembelian barang secara on-line, form keanggotaan situs, dan sebagainya.

Hal yang perlu diperhatikan adalah bahwa suatu form seringkali dibuat berkaitan dengan bahasa pemrograman lainnya seperti PHP, ASP dan CGI yang mana untuk menggunakan bahasa pemrograman tersebut diperlukan skill dan pengetahuan pemrograman yang lebih tinggi. Apabila anda menginginkan supaya form yang anda buat bisa berfungsi dengan baik, tidak ada salahnya setelah anda menguasai pemrograman HTML anda juga mempelajari bahasa pemrograman yang lain.

Dikarenakan form juga termasuk di dalam pemrograman HTML maka buku ini juga membahas bagaimana cara membuat form.

Struktur Dasar Suatu Form

Suatu form selalu diawali oleh tag pembuka <form> dan diakhiri oleh tag penutup </form> . Pada tag <form> kita sisipkan atribut action dan atribut method .

Atribut action digunakan untuk menentukan kemana data dari form tersebut dikirim atau apabila tujuan pengiriman data adalah alamat email maka atribut action berisi alamat email dengan menyisipkan kode mailto .

Atribut method digunakan untuk menentukan bagaimana cara pengiriman data pada form tersebut dilakukan. Data pada form biasanya dikirimkan ke server tempat website anda berada. Nilai atribut method ada dua, yaitu : POST dan GET. Data pada method GET dikirimkan dengan cara menambahkan data form tersebut pada akhir URL (alamat tujuan). Sedangkan data pada method POST dikirimkan secara terpisah menuju ke server HTTP.

Struktur dasar kode HTML untuk form adalah sebagai berikut :

<form action=”alamat_tujuan” method=”post atau get”>

</form>

Apabila data form kita kirimkan ke alamat email struktur dasar kode HTML untuk form menjadi :

<form action=”mailto:alamat_email” method=”post atau get” enctype=”text/plain”>

</form>

Atribut enctype=”text/plain” berfungsi supaya data yang kita kirimkan ke alamat email dapat dibaca.

Diantara tag pembuka dan penutup disisipkan tag untuk menentukan jenis form yang kita buat.

Form Textfield

Form textfield digunakan apabila kita menginginkan user mengirimkan data dalam bentuk text.

Kode yang digunakan adalah : <input type=”text” name=”namabox” size=”x” maxlength=”y”> .

Atribut name merupakan nama dari box form tersebut. Nama box harus unik dalam arti bahwa apabila anda membuat box form lebih dari satu maka masing-masing box form harus diberi nama yang berbeda.

Atribut size merupakan ukuran box form. Nilai dari atribut size berupa angka.

Atribut maxlength menentukan jumlah maksimum karakter text yang bisa diketikkan pada box form tersebut.

Contoh form textfield :

<html>

<head>

<title> Form Textfield 1 </title>

</head>

<body>

<h4>

Contoh form textfield.

</h4>

<form action=”tujuan.html” method=”post”>

Nama : <input type=”text” name=”namabox” size=”30” maxlength=”5”>

</form>

</body>

</html>

Simpan kode HTML diatas dengan nama file43a.html .

Buka file43a.html . Perhatikan form textfield yang ditampilkan. Coba anda ketikkan sembarang text. Anda akan mengetahui bahwa kita tidak bisa mengetikkan karakter lebih dari 5. Hal ini dikarenakan kita menentukan nilai maxlength adalah 5. Apabila kita menginginkan tidak ada batasan jumlah karakter yang dapat diketikkan dalam textfield form tersebut maka atribut maxlength tidak perlu ditulis.

Gambar 58. Contoh form textfield untuk menginput nama user.

Apabila kita menginginkan box form berisi data awal maka pada tag input kita tambahkan atribut value. Nilai dari atribut value adalah text yang ingn kita tampilkan.

Contoh :

<html>

<head>

<title> Form Textfield 2 </title>

</head>

<body>

<h4>

Contoh form textfield.

</h4>

<form action=”tujuan.html” method=”post”>

Nama : <input type=”text” name=”namabox” size=”30” value=”isikan nama anda”>

</form>

</body>

</html>

Simpan kode HTML diatas dengan nama file43b.html .

Buka file43b.html . Perhatikan form tersebut. Text yang kita masukkan sebagai nilai dari atribut value tampak pada box form tersebut.

Gambar 59. Contoh pemberian data awal menggunakan atribut value pada form textfield.

Form Password

Apabila kita menginginkan user memasukkan password maka kita bisa menyembunyikan text yang diketik oleh user. Caranya adalah dengan mengganti nilai dari atribut type menjadi password .

Struktur form password adalah <input type="password" name="namabox" size="x">

Contoh membuat form password :

<html>

<head>

<title> Form Password </title>

</head>

<body>

<h4>

Contoh form password.

</h4>

<form action="tujuan.html" method="post">

Username : <input type="text" name="namabox1" size="30" value="isikan username anda"><br><br>

Password : <input type="password" name="namabox2" size="30">

</form>

</body>

</html>

Simpan kode HTML diatas dengan nama file44.html .

Buka file44.html . Perhatikan form tersebut. Sekarang text yang kita ketikkan pada box password hanya tampak berupa tanda bintang atau bulatan hitam.

Gambar 60. Contoh form password.

Readonly Form

Apabila kita menginginkan form textfield tidak bisa ditulisi oleh user (dalam arti hanya bisa dibaca), maka pada tag <input> kita sisipkan atribut readonly .

Contoh :

<html>

<head>

<title> Readonly Form </title>

</head>

<body>

<h4>

Contoh readonly form.

</h4>


Nama Saya : <input type="text" name="saya" size="30" value="Rio Yudistira Eryanza" readonly>

<br><br>

Nama Anda : <input type="text" name="anda" size="30" value=”isikan nama anda”>

</form>

</body>

</html>


Buka file45.html . Perhatikan form tersebut. Sekarang box form “Nama Saya” tidak bisa ditulisi hanya bisa dibaca.

Gambar 61. Contoh readonly form.

Form Textarea

Berbeda dengan box form textfield yang hanya terdiri dari satu baris, box form textarea bisa terdiri lebih dari satu baris. Biasanya form textarea digunakan untuk mengambil data dari user berupa text panjang.

Kode yang digunakan adalah : <textarea name=”nama_box” cols=”x” rows=”y”></textarea>

Form textarea diawali oleh tag <textarea> dan diakhiri oleh tag </textarea>.

Seperti biasa, atribut name merupakan nama box form harus berisi nama yang unik untuk setiap box form.

Atribut cols menentukan panjang box form sedangkan atribut rows menentukan tinggi box form.

Contoh Form Textarea :

<html>

<head>

<title> Form Textarea 1 </title>

</head>

<body>

<h4>

Contoh form textarea.

</h4>


Deskripsikan Diri Anda :<br>

<textarea name=”nama_box” cols=”30” rows=”4”></textarea>

</form>

</body>

</html>


Buka file46a.html . Perhatikan box form textarea tersebut. Box memiliki 4 rows.

Gambar 62. Contoh form textarea.

Kita juga bisa memberikan text awal pada box form taxtarea. Berbeda dengan form textfield yang memiliki atribut value, form textarea tidak memiliki atribut value. Apabila kita menginginkan adanya text awal maka text awal kita sisipkan diantara tag <textarea></textarea>.

Kodenya menjadi : <textarea name=”nama_box” cols=”x” rows=”y”>Text Awal</textarea>

<html>

<head>


</head>

<body>

<h4>


</h4>



<textarea name=”nama_box” cols=”30” rows=”4”>Coba deskripsikan diri anda !</textarea>

</form>

</body>

</html>


Buka file46b.html . Perhatikan box form textarea tersebut. Sekarang box form tersebut memiliki text awal.

Gambar 63. Contoh pemberian text awal pada form textarea.

Form textarea memiliki atribut lain yaitu atribut wrap . Atribut wrap menentukan tampilan data pada box form dan tampilan data pada saat dikirimkan.

Nilai atribut wrap ada 3 macam, yaitu :

off , menyebabkan text yang kita ketikkan apabila telah menyentuh batas kanan box form terus dilanjutkan tanpa berpindah ke baris baru.

hard , menyebabkan text terpotong ketika text menyentuh batas kanan box form dan membentuk baris baru. Saat data dikirim, data tersebut juga akan dipotong per baris.

soft , menyebabkan text terpotong ketika text menyentuh batas kanan box form dan membentuk baris baru. Saat data dikirim, data tersebut tidak dipotong per baris.

Contoh :

<html>

<head>


</head>

<body>

<h4>


</h4>


<textarea name="nama_box1" cols="30" rows="4" wrap="off" >Nilai wrap off</textarea>

<br><br>

<textarea name="nama_box2" cols="30" rows="4" wrap="hard" >Nilai wrap hard</textarea>

<br><br>

<textarea name="nama_box3" cols="30" rows="4" wrap="soft" >Nilai wrap soft</textarea>

</form>

</body>

</html>

Simpan kode HTML diatas dengan nama file46c.html .

Buka file46c.html . Coba anda ketikkan text pada ketiga box tersebut. Pada box pertama (wrap off), ketika text menyentuh batas kanan box maka text akan diteruskan tanpa memotong text. Sedangkan pada box kedua (wrap hard) dan ketiga (wrap soft), ketika text menyentuh batas kanan box maka text akan terpotong dan membentuk baris baru. Perbedaan antara wrap hard dan soft baru akan tampak ketika text yang diketikkan pada box tersebut dikirim.

Gambar 64. Contoh penggunaan atribut wrap pada form textarea.

Form Check Box

Form checkbox digunakan apabila kita ingin memberi pilihan kepada user. Form check box mengijinkan user memilih lebih dari satu.

Kode form check box adalah sebagai berikut :

<input type=”checkbox” name=”namabox” value=”pilihan”>

Berbeda dengan atribut name pada form textfield dan textarea, atribut name pada form check box bisa diberi nama sama.

Atribut value menentukan nilai data ketika data tersebut dikirimkan ke server.

Contoh Penggunaan Form Check Box :

<html>

<head>

<title> Form Check Box 1 </title>

</head>

<body>

<h4>

Contoh form Check Box.

</h4>


Mata pelajaran apa yang anda sukai ? (boleh pilih lebih dari satu)<br>

<input type="checkbox" name="pelajaran" value="mtk">Matematika<br>

<input type="checkbox" name="pelajaran" value="bhsid">Bahasa Indonesia<br>

<input type="checkbox" name="pelajaran" value="bhsen">Bahasa Inggris<br>

<input type="checkbox" name="pelajaran" value="fis">Fisika<br>

<input type="checkbox" name="pelajaran" value="bio">Biologi<br>

<input type="checkbox" name="pelajaran" value="tdk">Tidak ada yang saya sukai<br>

</form>

</body>

</html>


Buka file47a.html . Perhatikan form check box tersebut. Silahkan anda pilih yang anda sukai. Anda boleh memilih lebih dari satu.

Gambar 65. Contoh form checkbox.

Kita juga bisa memberi tanda check sejak awal pada salah satu pilihan. Atribut yang digunakan adalah atribut checked .

Contoh :

<html>

<head>

<title> Form Check Box 2 </title>

</head>

<body>

<h4>

Contoh form Check Box.

</h4>


<input type="checkbox" name="transportasi" value="sepeda">Sepeda<br>

<input type="checkbox" name="transportasi" value="motor">Motor<br>

<input type="checkbox" name="transportasi" value="mobil" checked >Mobil<br>

<input type="checkbox" name="transportasi" value="pesawat">Pesawat<br>

</form>

</body>

</html>


Buka file47b.html . Perhatikan form check box tersebut. Sekarang pada pilihan Mobil, box sudah diberi tanda check sejak awal.

Gambar 66. Contoh pemberian data awal pada form checkbox.

Form Radio Button

Seperti pada form check box, form radio button juga digunakan apabila kita ingin memberikan suatu pilihan kepada user. Tetapi berbeda dengan form check box yang mengijinkan user memilih lebih dari satu, maka pada form radio button user hanya boleh memilih salah satu. Form radio button sering kali digunakan pada polling atau quiz on-line.

Kode form radio button adalah sebagai berikut : <input type=”radio” name=”namabox” value=”pilihan”>

Atribut name harus memiliki nilai yang sama untuk semua box pada form radio button.

Contoh Penggunaan Radio Button :

<html>

<head>

<title> Form Radio Button </title>

</head>

<body>

<h4>

Contoh form Radio Button.

</h4>


Apa masakan kesukaan anda ? (pilih salah satu)<br>

<input type="radio" name="masakan" value="sate">Sate Ayam<br>

<input type="radio" name="masakan" value="rendang">Rendang<br>

<input type="radio" name="masakan" value="gudeg" >Gudeg<br>

<input type="radio" name="masakan" value="sop" checked>Sop Buntut<br>

<input type="radio" name="masakan" value="tidakada">Tidak ada pilihan<br>

<br>

Apa minuman kesukaan anda ? (pilih salah satu)<br>

<input type="radio" name="minuman" value="esteh">Es Teh<br>

<input type="radio" name="minuman" value="esjeruk">Es Jeruk<br>

<input type="radio" name="minuman" value="soda" >Soda Gembira<br>

<input type="radio" name="minuman" value="justomat" checked>Jus Tomat<br>

<input type="radio" name="minuman" value="tidakada">Tidak ada pilihan<br>

</form>

</body>

</html>


Buka file48.html . Perhatikan form radio button tersebut. Coba anda kilik pilihan yang anda sukai, anda hanya boleh memilih salah satu saja.

Gambar 67. Contoh form radio button.

Form Menu Dan List

Form Menu memiliki fungsi seperti radio button. Perbedaannya, form menu ditampilkan dalam bentuk box drop down.

Kode form menu adalah sebagai berikut :

<select name=”namabox”>

<option value=”pil1”>Pilihan 1</option>

<option value=”pil2”>Pilihan 2</option>

</select>

Form menu diawali dengan tag <select> dan diakhiri oleh tag </select>. Semua pilihan yang kita sajikan terletak diantara tag <option></option>.

Kita juga bisa memberi pilihan awal dengan menyisipkan atribut selected pada tag <option> menjadi, <option value=”pil2” selected>Pilihan 2</option> .

Contoh Form Menu :

<html>

<head>

<title>Form Menu</title>

</head>

<body>

<h4>

Contoh form Menu.

</h4>


Sebutkan bulan kelahiran anda !

<select name="bulan">

<option value="jan">Januari</option>

<option value="feb">Februari</option>

<option value="mar">Maret</option>

<option value="apr">April</option>

<option value="mei">Mei</option>

<option value="jun">Juni</option>

<option value="jul">Juli</option>

<option value="agt" selected>Agustus</option>

<option value="sep">September</option>

<option value="okt">Oktober</option>

<option value="nov">November</option>

<option value="des">Desember</option>

</select>

</form>

</body>

</html>


Buka file49.html . Perhatikan form menu tersebut. Form menu disajikan dalam bentuk box drop down. Kita menyisipkat atribut selected pada tag <option> untuk bulan Agustus sehingga bulan Agustus ditampilkan sebagai pilihan awal.

Gambar 68. Contoh form menu.

Gambar 69. Bentuk dari form menu adalah drop down box.

Form list mirip dengan form menu. Hanya saja pada form list kita bisa menentukan tinggi box yang ditampilkan dan user boleh memilih lebih dari satu pilihan.

Kode form List adalah sebagai berikut :

<select name=”namabox” size=”2” multiple>

<option value=”pil1”>Pilihan 1




</select>

Atribut size menunjukkan tinggi box sedangkan atribut multiple membolehkan pemilih memilih lebih dari satu pilihan.

Contoh Form List :

<html>

<head>

<title>Form List</title>

</head>

<body>

<h4>

Contoh form List.

</h4>


Pilih bahasa yang anda kuasai ! (boleh pilih lebih dari satu)<br>

<select name="bulan" size="3" multiple>

<option value="id">Bahasa Indonesia</option>

<option value="en">Bahasa Inggris</option>

<option value="ma">Bahasa Mandarin</option>

<option value="jp">Bahasa Jepang</option>

<option value="fr">Bahasa Perancis</option>

<option value="ge">Bahasa Jerman</option>

<option value="ne">Bahasa Belanda</option>

</select>

</form>

</body>

</html>


Buka file50.html . Perhatikan form list tersebut. Form list tersebut memiliki tinggi box 3 baris dan mengijinkan user memilih pilihan lebih dari satu. Pilihan lebih dari satu dilakukan dengan cara menekan tombol Ctrl lalu klik beberapa pilihan.

Gambar 70. Contoh form list.

Form File Field

Form file field biasanya dipakai untuk memudahkan user mengupload file.

Kode form file field adalah sebagai berikut :

<input type="file" name="file" size="x">

Contoh Form File Field :

<html>

<head>

<title> Form File Field </title>

</head>

<body>

<h4>

Contoh form File Field.

</h4>


Upload file : <input type="file" name="uploadfile" size="30">

</form>

</body>

</html>


Buka file51.html . Coba anda klik tombol browse/choose dan pilih salah satu file yang ada di komputer anda. Setelah anda selesai memilih, maka akan tampak alamat file tersebut pada box file field.

Gambar 71. Contoh form file field.

Reset Button

Sesuai namanya, reset button digunakan untuk mengembalikan form kebentuk awal sebelum diisi atau diubah oleh user.

Kode untuk Reset Button adalah : <input type=”reset” name=”namabox” value=”text”>

Atribut name merupakan nama button.

Atribut value pada reset button merupakan text yang akan ditampilkan pada button. Anda bisa memberikan nilai apa saja terhadap atribut ini.

Contoh Penggunaan Reset Button :

<html>

<head>

<title> Reset Button </title>

</head>

<body>

<h4>

Contoh reset button.

</h4>


Nama Anda : <input type="text" name="namaanda"><br>

<br>

Jenis Kelamin :

<select name="kelamin">

<option>Pria</option>

<option>Wanita</option>

</select>

<br>

<br>

Pendidikan anda sekarang : (pilih salah satu)<br>

<input type="radio" name="pendidikan" value="sd">SD dan yang sederajat<br>

<input type="radio" name="pendidikan" value="smp">SMP dan yang sederajat<br>

<input type="radio" name="pendidikan" value="sma">SMA dan yang sederajat<br>

<input type="radio" name="pendidikan" value="univ">Universitas dan yang sederajat<br>

<input type="radio" name="pendidikan" value="tidakada">Tidak ada pilihan<br>

<br>


<textarea name="deskripsi" cols="30" rows="4"></textarea>

<br>

<br>

<input type="reset" name="reset" value="Hapus">

</form>

</body>

</html>


Buka file52.html . Coba anda isi form tersebut. Apabila anda klik tombol “Hapus” maka semua text yang anda ketikkan akan dihapus dan form kembali ke kondisi awal.

Gambar 72. Contoh reset button.

Submit Button

Submit button merupakan tombol aksi yang apabila kita klik maka data yang diketikkan pada form akan dikirim ke alamat tujuan.

Kode submit button adalah : <input type="submit" name="kirim" value="Kirim">

Atribut name merupakan nama button.

Atribut value pada submit button merupakan text yang akan ditampilkan pada button. Anda bisa memberikan nilai apa saja terhadap atribut ini.

Contoh penggunan sumbit button :

<html>

<head>

<title> Submit Button </title>

</head>

<body>

<h4>

Contoh submit button.

</h4>


Nama Anda : <input type="text" name="namaanda"><br>

<br>

Jenis Kelamin :

<select name="kelamin">

<option>Pria</option>

<option>Wanita</option>

</select>

<br>

<br>

Pendidikan anda sekarang : (pilih salah satu)<br>

<input type="radio" name="pendidikan" value="sd">SD dan yang sederajat<br>

<input type="radio" name="pendidikan" value="smp">SMP dan yang sederajat<br>

<input type="radio" name="pendidikan" value="sma">SMA dan yang sederajat<br>

<input type="radio" name="pendidikan" value="univ">Universitas dan yang sederajat<br>

<input type="radio" name="pendidikan" value="tidakada">Tidak ada pilihan<br>

<br>


<textarea name="deskripsi" cols="30" rows="4"></textarea>

<br>

<br>

<input type="reset" name="reset" value="Hapus"> <input type="submit" name="kirim" value="Kirim !">

</form>

</body>

</html>


Buka file53.html . Submit button berfungsi sebagai tombol aksi yang akan mengirimkan data ke alamat tujuan. Apabila tombol “Kirim !” kita klik maka akan muncul pesan error karena form tersebut tidak bisa berfungsi sepenuhnya.

Catatan :

Suatu form supaya bisa berfungsi dengan sepenuhnya harus dikaitkan dengan bahasa pemrograman lain seperti : PHP, CGI atau ASP. Pembahasan mengenai bahasa pemrograman PHP, CGI dan ASP akan saya utarakan pada tutorial yang berbeda.

Gambar 73. Contoh submit button.

Image Field

Image field memiliki fungsi sama dengan submit button yaitu sebagai tombol aksi yang akan mengirim data ke alamat yang dituju. Perbedaanya, image field menggunakan gambar sebagai tombolnya.

Kode image field adalah :

<input type="image" name="namabox" src="alamat_gambar" width="x" height="y" border="z">

Atribut src merupakan alamat image/gambar yang akan kita gunakan dalam image form.

Atribut width dan height merupakan lebar dan tinggi gambar.

Atribut border menentukan tebal border yang mengelilingi gambar. Biasanya para pembuat website lebih suka untuk tidak memberi border pada gambar sehingga mengisi atribut border dengan nilai 0.

Kita juga bisa menambahkan atribut align untuk menentukan posisi gambar. Nilai yang digunakan biasanya adalah absmiddle yang berfungsi untuk meletakkan gambar pada posisi absolut tengah segaris dengan text.

Contoh penggunaan image field :

<html>

<head>

<title>Image Field</title>

</head>

<body>

<h4>

Contoh image field.

</h4>


Search : <input type="text" name="cari">

<input type="image" name="kirim" src="images/go.gif" width="35" height="22" border="0" align=”absmiddle”>

</form>

</body>

</html>


Buka file54.html . Image field memiliki fungsi yang sama dengan submit button, yaitu sebagai tombol aksi.

Gambar 74. Contoh image field.

Hidden Field

Sesuai namanya hidden field merupakan form yang disembunyikan (hidden). Hidden field akan mengirim data tetapi bukan data dari user. Data yang dikirim merupakan data yang sebelumnya sudah ditentukan oleh si pembuat situs. Data ini penting untuk pengolahan database situs menggunakan PHPMySQL atau CGI Script. Pembahasan mengenai pengolahan database situs akan saya ulas pada buku yang berbeda.

Kode hidden field adalah sebagai berikut : <input type="hidden" name="namabox" value="text">

Contoh penggunaan hidden field :

<html>

<head>

<title>Hidden Field</title>

</head>

<body>

<h4>

Contoh hidden field.<br>

Kita tidak bisa melihat bentuk dari hidden field.

</h4>


<input type="hidden" name="namabox" value="text">

</form>

</body>

</html>


Buka file55.html . Kita tidak bisa melihat bentuk dari hidden field karena memang disembunyikan.

Gambar 75. Hidden field tidak ditampilkan oleh browser.

Documents

Membuat Form