Kegunaan Form
Berikut ini adalah beberapa contoh kegunaan form dalam web:
- Memperoleh data-data user.
- Untuk mendaftar pada service yang disediakan.
- Memperoleh feedback dari user mengenai website anda.
Sintak penulisan Form:
<form methode="post atau get" action="url">
Elemen-elemen FORM
</form>
Tag <form> digunakan untuk membuat form dalam dokumen HTML.
Atribut | Deskripsi |
method | 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. Syntax: method="post/get" |
action | Menentukan lokasi dari script yang akan memproses data dari form Syntax: action="url" |
Membuat input field
Dalam form, kita dapat membuat input atau kotak isian yang dapat di isi dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isisan adalah tag<input>. Type-type input yang tersedia adalah sebagai berikut:
# Type=TEXT
Kotak isian bertype text ini menerimadata dari karakter (default) sebanyak satu baris.
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="text"> |
Value | Untuk memberikan value ke input field |
Size | Jumlah karakter dari input field |
Maxlength | Jumlah karakter maxsimum untuk input field |
Contoh:
<input type="text" name="text" size="20">
Tampilan:
# Type= PASSWORD
Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Atributnya sama denganinput field type text
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="password"> |
Value | Untuk memberikan value ke input field |
Size | Jumlah karakter dari input field |
Maxlength | Jumlah karakter maxsimum untuk input field |
Contoh:
<input type="password" name="pwd" size="20">
Tampilan:
# Type=CHECKBOX
Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih samasekali, dengan memberikan tanda pada checkbok tersebut.
Atribut | Deskripsi |
Checked | Untuk memberi default check |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="checkbox"> |
Value | Untuk pemberian value ke input |
Size | Ukuran control |
Contoh:
<input type="checkbox" name="renang" value="renang">Renang <br>
<input type="checkbox" name="sepak bola" value="sepak bola">Sepak Bola <br>
<input type="checkbox" name="Tenis Meja" value="Tenis Meja">Tenis Meja <br>
Tampilan :
Renang
Sepak Bola
Tenis Meja
# Type = RADIO
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 | Deskripsi |
Checked | Untuk memberi default check |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="radio"> |
value | Untuk memberikan value ke input |
Size | Ukuran control |
Contoh:
<input type="radio" name="jenis kelamin" value="laki-lahi">Laki-laki <br>
<input type="radio" name="jenis kelamin" value="Perempuan">Perempuan
Tampilan:
Laki-laki
Perempuan
# Type= BUTTON
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="submit"> : mengirimkan form ke url yang telah di definisikan pada atribut action pada tag <form> <input type="reset">: Browser mengembalikan field dalam form ke dalam nilai default (mengosongkan nilai semua elemen form) |
Value | Memberikan nama label pada button |
Size | Memberikan lebar button |
Contoh:
<input type="submit" value="Submit"><input type="reset" value="reset">
Tampilan :
# Tag <TEXTAREA>
Tag ini digunakan untuk membuat input text yang lebar, bisa menampung lebih banyak karakter dibanding input field bertype TEXT. Text yang berada di antara tag <TEXTAREA>dan </TEXTAREA> secara default akan ditampilkan sesuai aslinya
Atribut | Deskripsi |
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 |
Contoh:
<textarea name="textarea" cols="15" rows="3">ini adalah textarea</textarea>
Tampilan:
# TYPE=IMAGE NAME=SUBMIT SRC="...."
Mengirimkan informasi form seperti halnya tombol submit, hanya saja berbentuk gambar.
Contoh:
<input type="image" name="submit" src="catment/Pictures/play.jpg">
Tampilan:
# tag <SELECT> dan <OPTION>
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 | Deskripsi |
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 |
Contoh:
<select name="propinsi">
<option value="">Propinsi</option>
<option value="Jawa Tengah">Jawa Tengah</option>
<option value="Jawa Barat">Jawa Barat</option>
<option value="Jawa Timur">Jawa Timur</option>
</select>
Tampilan:
