HTML form

HTML Form

Form merupakan elemen HTML yang sangat sering dijumpai dalam situs web. Hampir seluruh halaman web yang Anda kunjungi mengandung unsur form didalamnya. Form dapat ditemukan pada halaman web yang memiliki fungsi komunikasi, bukan hanya komunikasi antar pengguna internet seperti chatting, social network, dan email, tetapi juga komunikasi antara pengguna internet dengan web server seperti format pendaftaran untuk membuat account sebuah situs. Saat seseorang hendak membuat account sebuah situs, dia memberikan informasi kepada web server yang biasanya berupa identitas diri. Identitas tersebut diinputkan melalui form kemudian dikirim ke database web server.

Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol.

Elemet kontok tersebut berguna untuk mengimputkan data kewebserver antaralain:

1. Teks baris tunggal
2. Teks baris jamak
3. Tombol submit dan reset
4. Checkbox
5. Radio button
6. Menu Pilihan

Sebelum mulai membuat type input data dalam form, kita harus mengerti bagaimana membuat form. Dalam Dreamwaver, form dapat lngsung di inputkan, pilih menu Insert -> Form -> Form. Sedangkan tag form sendiri adalah: <form>…….</form>.
dalam form ada beberapa atribut yang harus kita mengerti yaitu;

fungsi method

Syntax: method="post/get"
menentukan bagaimana data akan dikirim ke server.

get         : data akan dikirim dengan menggunakan query string pada url.

post       : data akan dikirim ke server sebagai block datake script.

Fungsi action

Menentukan lokasi dari script yang akan memproses data dari form
Syntax: action="url"

Sehingga contoh syntag fom: <form method="post" action="tampil.php"></form>

Input data

1.       Input Field - Type=TEXT

Syntag = <textarea name="alamat" > isi textfield……….</textarea>

Text field merupakan kotak isian dengan penganturan default 1 baris, umunya digunakan untuk mengisi nama, no telp dan lain-lain

Atribut:
Name = Nama vareable dari control yang akan menyimpan nilai dari input field
Rows = Jumlah baris textarea
Cols = Lebar kolom textarea
Wrap = WRAP=PHYSICAL –tampilan word-wrap. Default WRAP=OFF

2.       Tag <TEXTAREA>
Syntag: <textarea name="alamat" ></textarea>

Text area merupakan kotak isian yang lebih dari 1 baris, umumya digunakan untuk komentar,alamat dan lain-lain yang membutuhkan ruang yang ukup bnyak.

Atribut:
Name = Nama vareable dari control yang akan menyimpan nilai dari input field
Rows = Jumlah baris textarea
Cols = Lebar kolom textarea
Wrap = WRAP=PHYSICAL –tampilan word-wrap. Default WRAP=OFF

3.       Menu pilihan

Syntag :

<select name="Bulan">
<option value="" selected="selected">Pilih Bulan</option>
<option value="1">Januari</option>
<option value="2">Februari</option>

…………………………………………………………

<option value="12">Desember</option>
</select>

Digunakan untuk membuat field yang berbentuk pilihan. Tag <select> dan <option> ini harus digunakan secara bersama-sama. tag <option> mendefinisikan pilihan dari item-item. Tag ini dipasang diantara tag <select> dan </select>.

Atribut:
Name    = Nama vareable dari control yang akan menyimpan nilai dari input field
Value    = Text yang di tampilkan pada tombol, default = "submit query"
Size        = Untuk menampilkan jumlah baris.
Multiple = Untuk menentukan apakah user boleh memilih lebih dari satu option apa tidak.
Selected = Pilihan ini di pilih secara default.

4.       Radio button

Syntag :

<input type="radio" name="jk" value="laki-lahi">Laki-laki <input type="radio" name="jk" value="Perempuan">Perempuan

Hanya mengijinkan satu dari banyak pilihan. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button harus secara explisit memberikan nilai ke atribut value.

Atribut:
Name = Nama vareable dari control yang akan menyimpan nilai dari input field
value = Untuk memberikan value ke input
Size = Ukuran control

5.       Checkbox

Syntag :

                <input type=checkbox name=hobby value=Membaca>Membaca Buku

                <input type=checkbox name=hobby value=Menyanyi>Menyanyi

                <input type=checkbox name=hobby value=Memasak>Memasak           

Checkbox merupakan salah satu input type data yang ada dalam form digunkan untuk memasukan pilihan lebihdari satu, contoh hoby.

          

6.       Button

Syntag : <input type="submit" value="Submit">

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

Button digunakan sebagai tombol untuk melanjutkan eksekusi submit. Dan Reset digunakan untuk merubah pada settingan awal sebelum memasaukan data.

Atribut:
Type= mengirimkan atau mereset form ke url yang telah di definisikan pada atribut action pada tag
<form>
Value = Memberikan nama label pada button.
Size = Memberikan lebar button.

Tips Dalam penggunan form, umumnya digunakan pada file php. Karena sering digunakan dalam web dinamis. Sehingga form sering direlasikan dengan database.