Fungsi dan Elemen FORM pada HTML
Selasa, Oktober 09, 2012 | 
Diposting oleh
nunuinux
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"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FF00"> </td>
</tr>
<tr>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FF00"> </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)
| Nama Depan | : | |
| Nama Belakang | : | |
| Tempat Lahir | : | |
| Tanggal Lahir | : | - - |
| Jenis Kelamin | : | Laki-laki Perempuan |
| Alamat | : | |
| Nomor Telepon | : | |
Dipost oleh : Judul : Fungsi dan Elemen FORM pada HTML
Terbit :2012-10-09T22:09:00+07:00
Anda sedang membaca artikel Fungsi dan Elemen FORM pada HTML. Jika ingin mengutip, harap memberikan link aktif dofollow ke URL http://wischain.blogspot.com/2012/10/fungsi-dan-elemen-form-pada-html.html. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih sudah singgah di blog ini.
Fungsi dan Elemen FORM pada HTML
Label:
Langganan:
Posting Komentar (Atom)
Mengenai Saya
-
Wisnu Priambodo
- The great pleasure in life is doing what people say you cannot do.
8 komentar
eeeeaaaa,, tugas dijadiin bahan artikel, hehehe
nais inpoh bro!!! :D
nice post gan.. :D
thanks atas infonya yah gan.. :)
kunjungan tengah malam, menyimak gan
This is really interesting, You are a very
skilled blogger. I have joined your feed and look forward to seeking
more of your magnificent post. Also, I've shared your website in my social networks!
Here is my blog post - beveiligingscamera
ok" prend, lo tu sedikit pun paham.hehe
helpful bang....
sipp gan
Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Mati, Promo, dll.
boleh dikasih emoticon biar kelihatan unyu-unyu
Emoticon Kode Konversi