Elemen FORM pada HTML

Form pada HTML digunakan untuk menerima masukan uatau isian dari user kemudian di olah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang punya web. Elemen dari form HTML adalah <form> yang menunjukan awal dari suatau form HTML dan di akhiri dengan </form>. Dalam sebuah dokumen dapat memiliki lebih dari satu form HTML.

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:

ini adalah textarea

# 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:

PropinsiJawa TengahJawa BaratJawa Timur

[Download E-book]