Assalamualaikum Wr. Wb. selamat sore teman-teman 10 RPL 2. Sore ini admin akan tau cara membuat form. Mungkin sebagian sudah ada yang lupa bagaimana caranya. Disini admin memberi tau cara membuat form kembali menggunakan penggabungan HTML dan CSS. Dimana tampilan CSS dapat memperindah tampilan formnya.
Ini kode htmlnya silahkan nanti di copy ke notepad/dreamweaver temen temen :
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="*" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="page">
<div id="konten"><form action="proses.php" method="post">
<table width="300" align="center" bgcolor="#f1f1f1">
<tbody>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="text" name="tanggal" placholder= "Input Date Here"/></td>
</tr>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text" name="judul" placeholder="Input Title Here"/></td>
</tr>
<tr>
<td>Konten</td>
<td>:</td>
<td><input type="text" name="konten" placeholder="masukan konten anda disini"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="simpan"/>
<input type="submit" value="edit"/></td>
</tr>
</tbody>
</table>
</form></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
kemudian save dengan format form.html .
Selanjutnya ditambahkan file CSS nya, dalam menimpan folder CSS harus satu file dengan form.html nya.
Ini script CSS nya :
/* CSS Document */
body{
background:#f1f1f1;
}
#wrapper{
background:#f1f1f1;
border:1px solid black;
width:960px;
margin:0px auto;
height:auto;
}
#header{
background:white;
width:940px;
margin:0px auto;
height:100px;
margin-top:10px;
}
#page{
background:blue;
border:1px solid black;
width:940px;
height:400px;
margin:0px auto;
margin-top:10px;
margin-bottom:10px;
}
#konten{
background:black;
width:630px;
margin:0px inherit;
float:left;
height:auto;
}
#sidebar{
background:red;
float:right;
width:300px;
margin:0px auto;
}
#footer{
background:black;
margin:0px auto;
width:940px;
height:30px;
}
di save dengan format gaya.css .
sekian tutorial dari Admin. Selamat mencoba, liburan jangan juga libur belajarnya ya teman-teman.
Selamat sore Wassalamualaikum Wr. Wb
Sabtu, 28 Desember 2013
