Fungsi dan Elemen FORM pada HTML

Oke halo semua, ini adalah kali kedua saya posting tentang tugas kuliah, dan temanya masih sama dengan minggu kemaren tentang web programing
hanya saja kali ini kita fokus dalam form dan elemen-elemen dalam form, nah! tak usah berlama-lama karena saya sudah kehabisan kata-kata
untuk membuat kalimat basa-basi ini,, Yuk! langsung saja kita lihat contoh coding dibawah.

Nama: WISNU PRIAMBODO
NIM: 10.01.53.0040
Matakuliah: WEB PROGRAMMING
Dosen : JEFFRI ALFA RAZAQ,M.KOM

Scroll sampai kebawah untuk melihat isi Kode atau klik view plain untuk melihat pada jendela pop-up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<style type="text/css">
body {
background-color: #0F0;
}
</style>
</head>
<body>
<form method="post" action="proses.php">
<table width="331" border="0" align="center">
<tr>
<td colspan="3" align="center" bgcolor="#006600"><b><font color="#FFFFFF"><blink>FORMULIR PENDAFTARAN</blink></font></b></td>
</tr>
<tr>
<td width="112" valign="top" bgcolor="#00FF00">Nama Depan</td>
<td width="3" valign="top" bgcolor="#00FF00">:</td>
<td width="194" valign="top" bgcolor="#00FF00"><input name="namadepan" type="text" size="20" maxlength="20"></td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Nama Belakang</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><input name="namabelakang" type="text" size="20" maxlength="20"></td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Tempat Lahir</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><input name="tempatlahir" type="text" size="20" maxlength="20"></td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Tanggal Lahir</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><input name="tgl" type="text" size="2" maxlength="2">-<select name="Bulan">
<option value="" selected="selected">Pilih Bulan</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
-<input name="tahun" type="text" size="4" maxlength="4"></td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Jenis Kelamin</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><input type="radio" name="jk" value="laki-lahi">Laki-laki <input type="radio" name="jk" value="Perempuan">Perempuan</td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Alamat</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><textarea name="alamat" cols="15" rows="3"></textarea></td>
</tr>
<tr>
<td valign="top" bgcolor="#00FF00">Nomor Telepon</td>
<td valign="top" bgcolor="#00FF00">:</td>
<td valign="top" bgcolor="#00FF00"><input name="notlpn" type="text" size="20" maxlength="14"></td>
</tr>
<tr>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
<td bgcolor="#00FF00"><input type="submit" value="Daftar"><input type="reset" value="reset"></td>
</tr>
</table>
</form>
</body>
</html>

Nah!! Sekarang mari kita telaah coding diatas

FORM

Kode:
<form method="post" action="proses.php"></form>

dipakai untuk pemmembuatan form dalam file HTML.
fungsi 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"

Input Field - Type=TEXT

Kode:
<input name="namadepan" type="text" size="20" maxlength="20">

>Kotak isian bertype text ini menerimadata dari karakter sebanyak satu baris.

Atribut:
Name = Nama vareable dari control yang akan menyimpan nilai dari input field
Type = Jenis data yang akan diinput contoh satu baris text/multi text/password
Size = Jumlah karakter dari input field
Maxlength = Jumlah karakter maxsimum untuk input field

Tampilan:

Tag <TEXTAREA>

Kode:
<textarea name="alamat" cols="15" rows="3"></textarea>

Kotak isian bertype text ini menerimadata dari karakter (default) sebanyak satu baris.

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

Tampilan:

tag <SELECT> dan <OPTION>

Kode:
<select name="Bulan">
<option value="" selected="selected">Pilih Bulan</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</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.

Tampilan:

Input Field - Type = RADIO

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

Tampilan:
Laki-laki Perempuan

Input Field - Type= BUTTON

Kode:
<input type="submit" value="Submit"><input type="reset" value="reset">

Button digunakan sebagai tombol untuk melanjutkan eksekusi submit/reset.

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.

Tampilan:

Nah! Agar lebih rapi tak lupa saya memakai tag table sebagai contoh pada koding berikut,
dibawah adalah tabel dengan lebar 331px dengan tebal border 0, perataan horizontal ditengah, diikuti tag td yang diapit oleh tag tr dengan warna background hijau, untuk yang ingin tahu tentang tag tabel bisa langsung klik disini

Kode:
<table width="331" align="center" border="0"> <tr> <td colspan="3" align="center" bgcolor="#006600"><font color="#FFFFFF"><blink>Judul</blink></font></td> </tr> <tr> <td width="59" align="left" bgcolor="#00FF00">A</td> <td width="4" align="left" bgcolor="#00FF00">B</td>
<td width="115" align="left" bgcolor="#00FF00">C</td>
</tr> </table>

dan disini saya menyisipi sedikit coding css hanya untuk merubah background menjadi hijau saja.

Kode:
<style type="text/css">
body {
background-color: #0F0;
}
</style>

Berikut hasil jadi dari coding diatas:

screenshot

Berikut tampilan hasil dari koding *(Tampilan dibawah tidak sama dengan hasil screenshot karena sebelumnya saya telah merubah css template blog ini pada bagian tabelnya)