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)

FORMULIR PENDAFTARAN
Nama Depan :
Nama Belakang :
Tempat Lahir :
Tanggal Lahir : -
-
Jenis Kelamin : Laki-laki Perempuan
Alamat :
Nomor Telepon :
thumbnail Dipost oleh : Wisnu Priambodo
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.

4.5 401 Fungsi dan Elemen FORM pada HTML

8 komentar

gee Admin delete 14 Oktober 2012 22.37

eeeeaaaa,, tugas dijadiin bahan artikel, hehehe
nais inpoh bro!!! :D

sewa mobil di surabaya Admin delete 1 November 2012 18.00

nice post gan.. :D

rental mobil surabaya Admin delete 9 November 2012 20.28

thanks atas infonya yah gan.. :)

Li Bebek Admin delete 11 November 2012 00.16

kunjungan tengah malam, menyimak gan

Anonim Admin delete 23 November 2012 22.55

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

hilda Admin delete 20 Desember 2012 08.45

ok" prend, lo tu sedikit pun paham.hehe

Anonim Admin delete 3 Januari 2013 13.21

helpful bang....

Anonim Admin delete 26 Mei 2015 13.10

sipp gan

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Mati, Promo, dll.
boleh dikasih emoticon biar kelihatan unyu-unyu
Emoticon Kode Konversi

Terjemahkan



Mengenai Saya

Foto Saya

The great pleasure in life is doing what people say you cannot do.

Kategori

Back-to-top