Belajar html Cara Membuat Form.

ke bawah

Form atau Borang ( dalam istilah bahasa Indonesia ) adalah merupakan daftar isian yang digunakan untuk berbagai keperluan, misalnya untuk pengumpulan data, login, registrasi dan bahkan survey.

Tag Form dan Atributnya.
Tag <form> merupakan sebuah tag yang digunakan untuk menandakan sebuah formulir isian pada dokumen html.
Pada tag ini, atribut yang digunakan yaitu: atribut action dan atribut method.

Action:

Atribut ini berfungsi untuk menindaklanjuti data yang yang dibuat dan dikirim, yang nantinya akan diproses melalui dokumen proses.php.

Method:

Atribut ini berfungsi untuk menentukan cara pengiriman sebuah dokumen formulir isian. ada dua methode yang digunakan yaitu: Methode Get dan Methode Post.


Berikut adalah contoh kerangka penulisan html sebuah form:


<form id="form" name="form"
action="proses.php"

method="get"|"post">

<input type="....">

<input type="....">
. . . . . . . . . . . . . .

<input type=".....">

<input type="submit"....>

<input type="reset"....>

</form>


Input type yang sering digunakan diantaranya adalah:

Type text : merupakan kolom untuk memasukan data text biasa dengan ukuran atau jumlah karakter yang sedikit, misalnya untuk memasukan data berupa nama, alamat email, alamat tempat tinggal dan lain-lain.

Cara menuliskan htmlnya sbb:


Nama Anda:

<input type="text"

name="nama" size="25">

Alamat Email:

<input type="text" name="e_mail" size="25">

Dan inilah hasilnya yang tampil dihalaman web.

Nama Anda :



Alamat Email :


Dalam penulisan html diatas terlihat atribut name : ini berfungsi untuk memberitahukan pada server bahwa input data yang terkirim adalah sebuah nama.

Sedangkan atribut size berfungsi menentukan lebar kolom untuk menuliskan data.

Input type: Password.

Dalam type password ini tidak jauh beda dengan type text biasa, hanya saja setelah pengunjung menuliskan data maka karakter yang dituliskan akan langsung berubah menjadi karakter lain yaitu berupa tanda bintang atau titik( * ).
Ini diperuntukkan menjaga kerahasiaan sebuah password atau kata sandi.

Penulisannya adalah sbb:

Kata Sandi :

<input type="password"

name="password" size="20">

Inilah hasil yang dapat ditampilkan pada halaman browser.

Kata Sandi :


Input type: Select.

Input select dimaksudkan agar pengunjung hanya memilih salah satu dari beberapa pilihan yang disediakan.

Pada tag ini terdapat pula atribut selected dan value yang telah ditentukan. Karakater dari atribut selected adalah: apabila pengunjung tidak memilih satupun dari pilihan yang ada, maka otomatis data yang ditentukan oleh selected itulah yang dimasukkan sebagai pilihan.

Seperti pada contoh berikut, selected menentukan Jakarta sebagai pilihan jika tak satupun yang dipilih oleh pengunjung.

Berikut adalah cara menuliskan htmlnya:

Kota Asal:


<select name="kota_asal">

<option selected> Jakarta
</option>

<option> Bandung

</option>

<option> Semarang

</option>

<option> Surabaya

</option>

</select>

Berikut penampilannya:


Kota Asal :


Jakarta

Bandung
Semarang
Surabaya


Input type: Radio.

Option dengan type radio digunakan apabila diharuskan memilih satu diantara dua atau beberapa pilihan yang disediakan. Pada tag dengan type radio selalu disertakan atribut value yang merupakakan pilihan atau option yang disediakan.

Type radio biasanya digunakan untuk mengambil data pilihan dari pengunjung halaman web, misalnya status perkawinan, jenis kelamin dll.

Berikut cara menuliskan htmlnya misalnya untuk mengambil data jenis kelamin :

Jenis Kelamin :


<input type="radio" name="jenis_kelamin" value="pria"> Pria

<input type="radio" name="jenis_kelamin" value="wanita"> Wanita

Berikut yang ditampilkan pada halaman web.

Jenis Kelamin :

Pria


Wanita


Type checkbox :
Sebenarnya type ini mirip dengan type radio maupun select, yang berbeda pada type ini, pengunjung bisa menentukan pilihannya lebih dari satu, semua, bahkan tidak memilih sama sekali. Tentu saja jika tidak memilih maka tidak ada data yang terkirim.

Cara menuliskan htmlnya adalah seperti dibawah ini:

Hobbi Anda:

<input type="chackbox" name="hobi" value="olah_raga"> Olah Raga

<input type="chackbox" name="hobi" value="jalan_jalan"> Jalan-jalan

<input type="chackbox" name="hobi" value="computer"> Komputer

<input type="chackbox" name="hobi" value="lainnya"> Lainnya

Inilah penampakannya dihalaman web browser:

Hobi Anda :

Olah Raga
Jalan-jalan
Computer
Lainnya

Text Area :

Text area merupakan suatu papan atau kolom yang disediakan untuk mengambil data dari pengunjung, yang sifatnya memiliki tulisan yang lebih panjang jika dibandingkan dengan input yang lainnya.

Pada papan text area biasanya data yang dimasukkan adalah descriptsi diri, kesan-kesan, komentar dan yang lainnya.
Berikut cara menuliskan htmlnya.

Tentang Anda :

<textarea name="descript"cols="20" rows="10">
Tulis tentang diri anda disini.
</textarea>
Berikut adalah penampilannya:

Tentang Anda :

Tulis tentang diri anda. <br />

Submit dan Reset :

Type Submit berfungsi menyediakan tombol untuk mengirim data ke server untuk diproses melalui kode pemroses pada sistem php.

Type ini merupakan hal yang sangat penting karena tanpa adanya type submit data yang telah dibuat tidak dapat diproses pada server. Sehingga data yang telah kita buat tidak akan berarti apa-apa tanpa diproses.

Berbeda dengan type submit yang berguna untuk mengirim data, maka type reset adalah justru menyediakan tombol yang berfungsi untuk menghapus semua data yang telah ditulis oleh pengguna, hal ini dimaksudkan misalnya untuk mengatur ulang data dan sebagainya.

Berikut cara menuliskan htmlnya:

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

Inilah penampakannya di halaman web browser.

 

Itulah beberapa input type yang banyak digunakan dalam Form.


Semoga bermanfaat.


kembali ke atas