Membuat Form Menggunakan Eksternal Style


1.   Tuliskan text seperti dibawah ini di notepad

body {background:blue; border:3px double red;}
h2{font-family:comic sans ms; background-color:red; 
text-align:center;}
table{background:grey;border: 3px double red;}
.td{font-weight:bold}

2.  lalu save dengan nama style.css

3.  lalu ketikkan lagi text seperti dibawah ini:

<html><head>
<title>FORM</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body><h2><marquee>Free Registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" align="center" cellpadding="0"><tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" 
id="txtNama"></td></tr>
<tr><td class='td'>Tgl lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtBulan" 
size="4" maxlength="2">
/
<input name="txtBulan" type="text" id="txtBulan" 
size="4" maxlength="2">
/
<input name="txtTahun" type="text" id="txtBulan" 
size="8" maxlength="4">
</td></tr>
<tr><td class='td'> Alamat</td>
<td>&nbsp;</td>
<td><textarea name="txtAlamat" cols="40" rows="2" 
id="txtAlamat"></textarea><td></tr>
<tr><td class='td'>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td>
<input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel"type="reset" id="btnCancel"value="Cancel">
</td></tr>
</table></form></body></html>

4.  Simpan dengan nama = form.html

5.  Lalu klik 2 pada file form.html, maka hasilnya seperti dibawah ini

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s