Wednesday, March 10, 2010

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:



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



[Download E-book]