pertama kita buat dulu file new dulu ASP web Aplication
ketikkan script berikut,beri nama form_validation_result sebagai penampil hasil dari isian form nantinya :
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Valid_Form_Result.aspx.cs"
Inherits="Bab3.Tugas.ValidasiFormResult" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
font-weight: bold;
}
</style>
</head>
<body Style="background-image:url(images.jpg); background-repeat:repeat;">
<form id="form1" runat="server">
<div style="margin-top: 71px">
<table align="center">
<tr>
<td>
<asp:Label ID="lblNama" runat="server" CssClass="auto-style1" ForeColor="Yellow"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblNIS" runat="server" CssClass="auto-style1" ForeColor="Yellow"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblUmur" runat="server" CssClass="auto-style1" ForeColor="Yellow"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" runat="server" CssClass="auto-style1" ForeColor="Yellow"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server"
CssClass="auto-style1" ForeColor="Yellow"></asp:Label><br
/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
lalu file new seperti tadi lagi,beri nama valid_form:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Valid_Form.aspx.cs" Inherits="Bab3.Tugas.ValidasiForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Isi Form</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style3 {
width: 160px;
}
.auto-style4 {
height: 30px;
}
.auto-style5 {
width: 160px;
height: 30px;
}
</style>
</head>
<body Style="background-image:url(images.jpg); background-repeat:repeat;">
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ID="vsSum" CssClass="div" runat="server" Width="286px"
ShowMessageBox="true" />
</div><br />
<center><table style="width:70%;" >
<tr>
<th colspan="4">FORM BIODATA</th>
</tr>
<tr>
<td rowspan="7">
<center><img src="asm.jpg" height="160px" />
</td>
</tr>
<tr>
<td class="auto-style4">Nama Lengkap :</td>
<td class="auto-style5">
<asp:TextBox ID="txtNama" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
<td
class="auto-style4"> <asp:RequiredFieldValidator
ID="rfvNama" runat="server" ControlToValidate="txtNama"
CssClass="RequiredFieldValidator" ErrorMessage="Nama harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Nama Harus Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">NIS :</td>
<td class="auto-style3">
<asp:TextBox ID="txtNIS" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
<td
class="auto-style4"> <asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNIS"
CssClass="RequiredFieldValidator" ErrorMessage="NIS harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />NIS Harus Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Umur :</td>
<td class="auto-style3">
<asp:TextBox ID="txtUmur" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
<td
class="auto-style4"> <asp:RequiredFieldValidator
ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtUmur"
CssClass="RequiredFieldValidator" ErrorMessage="Umur harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Umur Harus Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Email :</td>
<td class="auto-style3">
<asp:TextBox ID="txtEmail" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
<td
class="auto-style4"> <asp:RequiredFieldValidator
ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail"
CssClass="RequiredFieldValidator" ErrorMessage="Email harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Email Harus Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Password :</td>
<td class="auto-style3">
<asp:TextBox ID="txtPass" runat="server" Width="165px" Height="30px"></asp:TextBox>
</td>
<td
class="auto-style4"> <asp:RequiredFieldValidator
ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtPass"
CssClass="RequiredFieldValidator" ErrorMessage="Password harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Password Harus Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Confirm Password :</td>
<td class="auto-style3">
<asp:TextBox ID="txtConfirm" runat="server" Width="165px" Height="30px"></asp:TextBox>
</td>
<td
class="auto-style4"> <asp:CompareValidator ID="cvPass"
runat="server" ControlToCompare="txtConfirm" ControlToValidate="txtPass"
ErrorMessage="<img src='stacks_image_91.png' width='25px'
/><font color=red /> Password dan Confirm harus
sama"></asp:CompareValidator>
</td>
</tr>
</table>
<br />
<asp:Button ID="KIRIM" runat="server" Text="Daftar"
Height="36px" Width="145px" PostBackUrl="~/Tugas/Valid_Form_Result.aspx"
/>
</form>
</body>
</html>
setelah itu buat file css nya untuk mempercantik :
body {
text-align: center;
vertical-align: central;
}
.div {
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #ffd800;
}
table {
color: #333;
font-family: Arial;
width: 510px;
border-collapse: collapse;
border-spacing: 0;
margin-right: 49px;
text-align: left;
}
td, th {
border: 1px solid #ccc;
height: 30px;
transition: all 0.3s;
}
th {
background: #f3f3f3;
font-weight: bold;
text-align: center;
}
td {
background: #FAFAFA;
vertical-align: central;
}
.td {
text-align: center;
}
tr td:hover {
background: #666;
color: #fff;
}
TEXTAREA, INPUT[type="text"] {
font-family: Tahoma;
font-size: 14px;
color: #808080;
padding: 3px;
background: #EEEfff;
border-left: solid 1px #c1c1c1;
border-top: solid 1px #cfcfcf;
border-right: solid 1px #cfcfcf;
border-bottom: solid 1px #6f6f6f;
}
INPUT[type="text"]:focus, INPUT[type="text"]:active {
border-color: #646464;
background-color: #16bec4;
}
.rfv {
color: red;
}
.rfv:hover {
color: white;
}
.center {
vertical-align: top;
maka hasilnya :
Tidak ada komentar:
Posting Komentar