Praktikum web development selanjutnya mengenai form dan frame. Form merupakan sebuah tag yang digunakan untuk membuat sebuah bentuk interaksi antara user dan web. Sedangkan frame adalah jendela yang dapat digunakan untuk mengganti objek, berikut tata contoh form yang sudah saya buat bersama beberapa teman saya
Login.html
<html>
<head>
<title>Form Login</title>
</head>
<body>
<font face="lucida grande" size="10">
<table border=0 bgcolor="#3b5998" padding="3">
<tr><td> </td>
<td><font color=white size="1" ><strong>Email</strong></td>
<td><font color=white size="1"><strong>Password</strong></td>
</tr>
<tr><td> </td>
<td><input type=text name=username maxlenght=25></td>
<td><input type=password name=pass maxlenght=25></td>
<td><input type="submit" name="login" value="Log In"></td>
</tr>
<tr><td> </td>
<td><input type=checkbox name=log><font color=white size="1">Keep me logged in</td>
<td><font color=white size="1">Forgot your password?</td>
</tr>
</table>
</font>
</body>
</html>
advancesearch.html
<html>
<head>
<title>Form Advanced Search</title>
</head>
<body>
<font face="arial" size="10">
<table border=0 align="center" width=600>
<tr>
<td>General search</td>
<td><input type=text name=gsearch size=60 maxlength=60></td>
</tr>
<tr><td>Artist</td>
<td><input type=text name=artist size=25 maxlength=25</td>
</tr>
<tr><td>Title Diciplins</td>
<td><input type=text name=title size=25 maxlength=25</td>
</tr><tr><td> </td></tr>
<tr><td colspan=2><hr style="dot"><br /></td></tr>
<table border=0 align="center" width="600" >
<tr>
<td><input type=checkbox name=hobby>Architecture and <br>decorative art picture</td>
<td><input type=checkbox name=hobby>Pastel</td>
<td><input type=checkbox name=hobby>Sculpture</td>
</tr>
<tr>
<td><input type=checkbox name=hobby>Medal</td>
<td><input type=checkbox name=hobby>Painting</td>
<td><input type=checkbox name=hobby>Miscellaneous</td>
</tr>
<tr>
<td><input type=checkbox name=hobby>Art objects</td>
<td><input type=checkbox name=hobby>Photography</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td colspan=3><hr style="dot"><br /></td></tr>
</table>
<table align="center" width=600>
<tr>
<td width="50%">Designation</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr><td>Materials and technics</td>
<td colspan=4><input type=text name=artist size=25 maxlength=25</td>
</tr>
<tr><td>Work date</td>
<td width="5%">In</td><td width="auto"><input type=text name=title size=5 maxlength=5</td><td width="5%"> </td><td width="30%"> </td>
</tr>
<tr><td> </td>
<td width="5%">De</td><td width="5%"><input type=text name=title size=5 maxlength=5</td><td width="5%">to</td><td><input type=text name=title size=5 maxlength=5</td></td>
</tr>
<tr><td>Works History</td>
<td colspan=4><input type=text name=artist size=25 maxlength=25</td>
</tr>
<tr><td>Year of acquisition</td>
<td width="5%">In</td><td width="auto"><input type=text name=title size=5 maxlength=5</td><td width="5%"> </td><td width="30%"> </td>
<tr><td> </td>
<td width="5%">De</td><td width="5%"><input type=text name=title size=5 maxlength=5</td><td width="5%">to</td><td><input type=text name=title size=5 maxlength=5</td></td>
</tr>
<tr>
<td width="50%">Place of conservation</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr>
<td width="50%">Iconographic subject</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr>
<td width="50%">Represented place</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr>
<td width="50%">Character represented</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr>
<td width="50%">Work represented</td>
<td colspan=4><input type=text name=gsearch size=25 maxlength=25></td>
</tr>
<tr>
<td width="50%">Posting mode</td>
<td width="5%"><img src=list.gif width="30" height="30"></td><td colspan="3"><input type=radio name=mode>List without picture</td><td> </td><td> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="5%"><img src=preview.jpg width="30" height="30"></td><td colspan="3"><input type=radio name=mode>Preview</td><td> </td><td> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="5%"><img src=mosaic.jpg width="30" height="30"></td><td colspan="3"><input type=radio name=mode>Mosaic</td><td> </td><td> </td>
</tr>
<tr>
<td width="50%">Number of answers per page</td>
<td width="5%"> </td><td colspan="3"><select name="jurusan">
<option value="21">21</option>
<option value="25">25</option>
<option value="29">29</option>
</select><td> </td><td><input type=button name=tombol value=SEARCH></td>
</tr>
</table>
</table>
</body>
</html>
menu.html
<html>
<head>
<title>Menu</title>
<style type="text/css">
a:link,a:visited{
color:#494949;
text-decoration:none;
outline:none;
}
a:hover{
color:#6699ff;
text-decoration:none;
outline:none;
}
</style>
</head>
<body>
Pilihan menu:<br>
<ul>
<li><a href="t_loginform.html" target="isi">Login</a></li>
<li><a href="t_advancedsearchform.html" target="isi">Daftar</a></li>
</ul>
</body>
</html>
index.html
<html>
<head>
<title>Index Form</title>
</head>
<frameset cols="30%, 70%">
<frame src="menu.html" />
<frame name="isi" />
</frameset>
</html>
Mungkin itu dulu saja yang bisa saya share saat ini, karena masih ada banyak urusan yang harus segera tak selesaikan. Mungkin materinya kurang lengkap, lain kali jika ada waktu akan saya lengkapi. Semoga bermanfaat
Leave a Comment