Home » Basic HTML, Tutorial

Form Dalam HTML

26 July 2009 One Comment

Form digunakan untuk membawa input data ke halaman yang dituju pada action form. HTML akan dipadukan dengan pemrograman server side seperti PHP untuk melakukan manipulasi terhadap data yang masuk. FOrm dalam HTML didefinisikan dalam bentuk “<form …></form>”. Input yang berada didalam tag tersebut akan dibawa ketika form disubmit.

Format penulisan form adalah sebagai berikut :

1
<form action="{URL}" method="{METHOD}" enctype="{TYPE}" name="{NAMA}">.</form>

URL merupakan alamat web yang dituju. Method ada dua yaitu POST dan GET. Method POST berarti input dibawa dalam bentuk post tidak ditampilkan pada halaman URL sedangkan GET akan menampilkannya dalam URL dengan format &input1=nilai_input1&input2=nilai_input2 dan seterusnya. Karena faktor keamanan usahakan variabel dalam bentuk POST saja daripada menggunakan GET. Enctype ini diperlukan kalau kita ingin upload file ke server, pada kasus umum tidak perlu mendefinisikanya. Name sifatnya optional. Selain name ada juga “id” yang masing-masing memiliki sifat tertentu (dijelaskan pada tutorial berikutnya).

berikut contoh penggunaan form :

1
<form action="proses.php" method="POST" name="FormProses">..</form>

atau jika perlu upload file :

1
<form action="proses.php" method="POST" name="FormProses" enctype="multipart/form-data">..</form>

Input masukan

Masukan dalam form bisa berupa text pendek, text panjang (bahkan CMS), combobox, checkbox, dan file yang masing-masing didefinisikan secara berbeda.

text pendek didefinisikan sebagai berikut :

1
<input type="text" name="{nama}" value="{nilai}" size="{ukuran}" tabindex="{urutan}" />

nama merupakan pengenal variabel dalam input sehingga datanya bisa diambil kembali disisi server. Value disini sifatnya optional bisa diisi dan bisa tidak tergantung kebutuhan. Kalau anda ingin memasukkan nilai default dari text maka value wajib diisi. Size merupakan ukuran panjang dari input text, kalau tidak diisi maka akan dikembalikan ke panjang default. Tab index digunakan untuk menentukan urutan pengisian. Jika tidak diisi maka juga akan kembali kepada pengurtan default.

contoh penggunaannya sebagai berikut :

1
<input type="text" name="kata" value="kata awal" size="50"  tabindex="1" />

bisa juga minimal seperti ini :

1
<input type="text" name="{kata}" />

text panjang didefiniskan sebagai berikut :

1
<textarea name="{nama}" rows="{baris}" cols="{kolom}">{nilai}</textarea>

baris digunakan untuk mendefinisikan jumlah baris dan kolom untuk mendefinisikan lebar kolom. Pada banyak kasus textarea inilah yang bisa dikonversi menjadi input CMS.

contoh penggunaannya sebagai berikut :

1
<textarea name="deskripsi" rows="5" cols="60">ini text awal saja ya</textarea>

combobox digunakan untuk input yang memerlukan pilihan. Secara default hanya satu pilihan yang bisa dipilih akan tetapi sebenarnya kita juga bisa melakukan pilihan secara multiple pada combobox.

contoh penggunaanya sebagai berikut :

1
2
3
4
    <select name="combo" id="combo"  tabindex="1">
         <option value="1">Pilihan 1</option>
         <option value="2" selected="selected">Pilihan 2</option>
    </select>

Dalam combobox nilai value dari setiap optionlah yang akan terkirim bukan text yang tampil pada halaman web. Sehingga ketika pilihan “Pilihan 1″ terpilih maka nilai yang masuk adalah 1. Syntak selected=”selected” digunakan untuk menjadikan pilihan itu terpilih secara default pada awal load input ini.

checkbox hampir mirip dengan combobox bedanya checkbox secara default digunakan untuk memilih beberapa pilihan sekaligus.

contoh :

1
2
3
    <input type="checkbox" name="pilihan[1]" >&nbsp;Pilihan1<br/>
    <input type="checkbox" name="pilihan[2]" >&nbsp;Pilihan2<br/>
    <input type="checkbox" name="pilihan[3]" >&nbsp;Pilihan3<br/>

pada checkbox name diberi nama dengan tambahan “[ ]” karena input nantinya dalam bentuk array (gabungan beberapa nilai variabel) bukan hanya satu karena pada checkbox bisa memilih nilai lebih dari satu. &nbsp merupakan kode HTML untuk menggantikan spasi dan <br/> merupakan kode HTML untuk menggantikan ganti baris (enter)

input file digunakan untuk upload file dari komputer lokal ke server. contoh syntaknya sebagai berikut :

1
<input type="file" name="fileku" size="50" />

One Comment »

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.