Form HTML

Pernahkah anda melihat suatu website yang salah satu halamannya berisi form? Misalnya seperti form pendaftaran dan sejenisnya. Nah kalau pernah, berikut ini adalah penerapan form dalam suatu web page dengan menggunakan tag HTML.
Sintaknya:

<form action="url" method="get atau post" enctype="">
</form>

Penjelasan:

  • Atribut action di atas maksudnya adalah sebagai tempat yang dispesifikasikan untuk url (alamat web) yang akan digunakan sebagai pemroses field input form.
  • Method adalah atribut yang digunakan untuk menyatakan masukan-masukan yang berasal dari form yang telah kita buat ke CGI (Common Gatewai Interface). Sedangkan CGI sendiri adalah suatu standar yang menghubungkan (interface) aplikasi eksternal dengan server web.


Nah selain itu, ternyata form sendiri memiliki beberapa jenis. Berikut ini adalah jenis masukan yang tersedia pada form HTML:

  1. Text.Jenis form yang dapat dimasukkan berupa angka maupun teks
  2. Radio.Jenis form yang bentuknya bulat dan biasanya digunakan sebagai masukkan untuk menentukan pilihan. Dan untuk tipe radio ini, hanya satu pilihan yang dapat dipilih.
  3. CheckBox. Checkbox adalah form inputan yang mengijinkan pemilihan lebih dari satu
  4. List. Form yang menyediakan pilihan dalam bentuk list
  5. Button. Salah satu jenis inputan yang bentuknya seperti tombol/button
  6. Submit. Bentuknya hampir sama seperti button, tetapi dia biasanya digunakan untuk memanggil url
  7. Reset. Biasanya digunakan untuk mereset atau mengembalikan seperti semula
  8. Text Area. Jenis form yang digunakan untuk memasukkan data seperti misalnya keterangan dan lain-lain.

Berikut ini adalah beberapa contoh penerapannya:

Field Text

Field Teks adalah contoh inputan yang bisa digunakan untuk menginputkan teks atau angka di dalam field dokumennya tersebut. Contoh kodingannya:


<!DOCTYPE HTML>
<html>
<head>
	<title>input text</title>
</head>
<body>
<!-- coba input teks -->
<form>
Nama Depan:
<input type="text" name="first name">
<br />
Nama Belakang:
<input type="text" name="last name">
</form>
</body>
</html>

Hasilnya akan tampak seperti ini:
a

Input Checkbox

Berikut ini adalah contoh kodingannya:

<!DOCTYPE HTML>
<html>
<head>
	<title>input checkbox</title>
</head>
<body>
<p>Contoh ini mendemonstrasikan bagaimana membuat checkbox pada suatu dokumen HTML, pemakai dapat memiliki atau membatalkan pilihan checkbox</p>
<!-- coba checkbox -->
Saya suka:
<form>
<input type="checkbox">Programming<br />
<input type="checkbox">Desain
</form>
</body>
</html>

Tampilannya akan seperti ini:
a

Tombol Radio

Ini dia contoh kodingannya:

<!DOTYPE HTML>
<html>
<head>
	<title>Input radio</title>
</head>
<body>
<form>
<input type="radio" name="Sex">Laki-laki<br />
<input type="radio" name="Sex">Perempuan
</form>
</body>
</html>

Hasilnya akan tampak seperti ini:
a

Input Dropdown

Ini adalah contoh codingan dengan dropdown:

<!DOCTYPE HTML>
<html>
<head>
	<title>Dropdown box</title>
</head>
<body>
Merk mobil yang anda suka:
<form>
<select name="hewan">
	<option value="sapi">Sapi</option>
	<option value="kucing">Kucing</option>
	<option value="kambing">Kambing</option>
	<option value="kerbau">Kerbau</option>
</select>
</form>
</body>
</html>

Hasilnya akan tampak seperti ini:
Dropdown box - Mozilla Firefox_004
Contoh lain dari dropdown.

<!DOCTYPE HTML>
<html>
<head>
	<title>Dropdown box</title>
</head>
<body>
Merk mobil yang anda suka:
<form>
<select name="hewan">
	<option value="sapi">Sapi</option>
	<option value="kucing">Kucing</option>
	<option value="kambing">Kambing</option>
	<option value="kerbau" selected>Kerbau</option>
</select>
</form>
</body>
</html>

Maka hasilnya akan tampak seperti ini:
a

Text Area

Seperti yang sudah dijelaskan di atas apa itu teksarea, maka contoh berikut ini adalah codingannya:


<!DOCTYPE HTML>
<html>
<head>
	<title>Text area</title>
</head>
<body>
<form>
	<textarea rows="10" cols="30">Ini adalah contoh dari textarea</textarea>
</form>
</body>
</html>

Maka hasilnya akan tampak seperti ini:
a

Membuat Button atau Tombol

Nah dalam HTML ini juga ada fungsi untuk membuat tombol atau button. Mungkin pembaca pernah melihat tombol send atau kirm, cancel dan sebagainya. Jadi bagaimanakah cara membuat tombol itu dengan HTML??
Berikut ini adalah contoh kodingannya:

<!DOCTYPE HTML>
<html>
<head>
	<title>Tombol</title>
</head>
<body>
<form>
	<input type="button" value="Hello World">
</form>
</body>
</html>

Hasilnya maka akan tampak seperti ini:
a

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s