Project

1. Design the below table and display the data on submit click in the below table row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main class="main">
<div class="container">
<div class="form_wrap">
<form action="" class="main_form">
<fieldset>
<legend>Personal Profile</legend>
<div class="main_form_wrap">
<div class="form_input_wrap full_input half_col">
<label for="hosteler-iD">Hosteler ID</label>
<input
class="form_input"
type="text"
id="hosteler-iD"
name="hosteler-iD"
/>
</div>
<div class="form_input_wrap">
<label for="hosteler-name">Hosteler Name:</label>
<input
class="form_input"
type="text"
id="hosteler-name"
name="hosteler-name" />
</div>
<label for="DOB">DOB:</label>
<input class="form_input" type="date" id="DOB" name="DOB" />
</div>
<label for="hostel-name">Hostel Name:</label>
<input
class="form_input"
type="text"
id="hostel-name"
name="hostel-name"
/>
</div>
<label for="room">Room No:</label>
<select name="room" id="room" class="form_input">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<label for="joining-date">Date of Joining:</label>
<input
class="form_input"
type="date"
id="joining-date"
name="joining-date"
/>
</div>
<label for="room-type">Room Type:</label>
<input
class="form_input"
type="text"
id="room-type"
name="room-type"
/>
</div>
<label for="father-name">Father's Name:</label>

<input
class="form_input"
type="text"
id="father-name"
name="father-name"
/>
</div>
<label for="gender">gender:</label>
<select name="gender" id="gender" class="form_input">
<option value="male">male</option>
<option value="female">female</option>
</select>
</div>
<label for="mobile-no">Mobile No:</label>
<input
class="form_input"
type="number"
id="mobile-no"
name="mobile-no"
/>
</div>
<label for="phone">Phone:</label>
<input
class="form_input"
type="number"
id="phone"
name="phone"
/>
</div>
<label for="mother-name">Mother's Name:</label>
<input
class="form_input"
type="text"
id="mother-name"
name="mother-name"
/>
</div>
<label for="mobile-no2">Mobile No:</label>
<input
class="form_input"
type="number"
id="mobile-no2"
name="mobile-no2"
/>
</div>
<label for="city">City:</label>
<input class="form_input" type="text" id="city" name="city" />
</div>
<label for="Purpose">Purpose:</label>
<input
class="form_input"
type="text"
id="Purpose"
name="Purpose"
/>
</div>
<div class="form_input_wrap full_input">
<label for="address">Address:</label>
<textarea
class="form_input
"
name="address"
id="address"
cols="30"
rows="10"
></textarea>
</div>
<label for="email">Email ID:</label>
<input
class="form_input"
type="email"
id="email"
name="email"
/>
</div>
<label for="contact">Contact No:</label>
<input
class="form_input"
type="number"
id="contact"
name="contact"
/>
</div>
<label for="office-details">Inst./Office Details:</label>
<textarea
class="form_input"
name="office-
details"
id="office-details"
cols="30"
rows="10"
></textarea>
</div>
<label for="phone2">Phone:</label>
<input
class="form_input"
type="number"
id="phone2"
name="phone2"
/>
</div>
<label for="agreement">Agreement (in months):</label>
<input
class="form_i
nput"
type="text"
id="agreemen
t"
name="agree
ment"
/>
</div>
<label for="completion-date">Completion Date:</label>
<input
class="form_input"
type="date"
id="completion-date"
name="completion-date"
/>
</div> </div>
</fieldset>
<fieldset>
<legend>Guardian Information</legend>
<div class="main_form_wrap">
<div class="form_input_wrap full_input half_col">
<label for="guardian-name">Guardian Name</label>
<input
class="form_input"
type="text"
id="guardian-name"
name="guardian-name"
/>
</div>
<label for="address2">Address:</label>
<textarea
class="form_input"
name="address2"
id="address2"
cols="30"
rows="10"
></textarea>
</div>
<label for="mobile2">Mobile No:</label>
<input
class="form_input"
type="number"
id="mobile2"
name="mobile2"
/>
</div>
<label for="phone2">Phone:</label>
<input
class="form_input"
type="number"
id="phone2"
name="phone2"
/>
</div> </div>
</fieldset>
<div class="form_submit">
<button type="submit" class="button">Submit</button>
</div>
</form>
</div>
</div>
</main>
</body>
</html>
Output:--
2. Design a registration page with proper validation as shown below. If the inputted data is
proper and valid then redirect user to next page which is a login page. Login page should
contain fields like username and password and a submit button with validation and if the
login details is valid then redirect user to welcome page.
<!DOCTYPE html>
<script runat="server">
Protected Sub dob_SelectionChanged(sender As Object, e As EventArgs)

End Sub
Protected Sub mobile_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub
Protected Sub checkNat_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub
</script>
<head>
<title>Registration Page</title>
<style type="text/css">
.style1
width: 288px;
.style2
width: 109px;
</style>
</head>
<body>
<form id="f1" method="post" runat="server">
<fieldset style="width:280px">
<legend>Registration Form</legend>
<table bgcolor="#FF66CC" style="width: 384px">

<tr>
<td align="center" bgcolor="#FF66CC" colspan="3">Registration Page</td>
</tr>
<tr>
<td>Registration ID</td><td class="style1">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<td class="style2"><asp:RequiredFieldValidator ID="validTextBox2" runat="server"

ControlToValidate="TextBox2" ErrorMessage="Required"
ForeColor="Red"></asp:RequiredFieldValidator></td>
</td>
<td class="style2"> </td>
</tr>
<tr>
<td>User Name:</td><td class="style1"> <asp:textbox id="user" runat="server"></asp:textbox></td>
<td class="style2"><asp:RequiredFieldValidator ID="validuser" runat="server"

ControlToValidate="user" ErrorMessage="Required!" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Password:</td><td class="style1"><asp:textbox ID="pwd" runat="server"

TextMode="Password"></asp:textbox></td>
<td class="style2"><asp:RequiredFieldValidator ID="validpwd" runat="server"

ControlToValidate="pwd" ErrorMessage="Required!" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>First Name:</td><td class="style1"> <asp:textbox id="txt1" runat="server" ></asp:textbox></td>
<td class="style2"> <asp:RequiredFieldValidator ID="validfname" runat="server"

ControlToValidate="txt1" ErrorMessage="Required!" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Last Name:</td><td class="style1"> <asp:textbox id="txt2" runat="server" ></asp:textbox></td>
<td class="style2"><asp:RequiredFieldValidator ID="validlname" runat="server"

ControlToValidate="txt2" ErrorMessage="Required!" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td> </td><td class="style1"> </td>
</tr>
<tr>
</tr>
<tr>
<td>Gender:</td><td class="style1"><asp:RadioButtonList ID="RadioButtonList1"

runat="server" Width="187px">
<asp:ListItem Text="Male" Value="0"></asp:ListItem>
<asp:ListItem Text="Female" Value="1"></asp:ListItem>
</asp:RadioButtonList></td>
<td class="style2"><asp:RequiredFieldValidator ID="validRadioButtonList1" runat="server"

ControlToValidate="RadioButtonList1" ErrorMessage="Required"
ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>DOB: </td><td class="style1"><asp:TextBox ID="dob" runat="server" TextMode="Date"

Width="168px"></asp:TextBox> </td>
<td class="style2"><asp:RequiredFieldValidator ID="validdob" runat="server"

ControlToValidate="dob" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Address:</td><td class="style1">
<asp:ListBox ID="ListBox2" runat="server" Width="214px"></asp:ListBox>
</td>
</tr>
<tr>
</tr>
<tr>
<td>City</td><td class="style1">
<asp:DropDownList ID="DropDownList1" runat="server" Width="130px">
<asp:ListItem Selected="True">Visnagar</asp:ListItem>
<asp:ListItem>Surat</asp:ListItem>
<asp:ListItem>Navsari</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>State:</td><td class="style1">
<asp:DropDownList ID="DropDownList2" runat="server" Width="125px">
<asp:ListItem Selected="True">Gujarat</asp:ListItem>
<asp:ListItem Value="m">Mumbai</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Country:</td><td class="style1">
<asp:DropDownList ID="DropDownList3" runat="server" Height="16px" Width="115px">
<asp:ListItem Selected="True">India</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Email:</td><td class="style1"><asp:TextBox ID="email" runat="server" TextMode="Email"

></asp:TextBox></td>
<td class="style2"><asp:RequiredFieldValidator ID="validemail" runat="server"

ControlToValidate="email" ErrorMessage="required!" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Mobile:</td><td class="style1"><asp:TextBox ID="mobile" runat="server" TextMode ="Phone"

ontextchanged="mobile_TextChanged"></asp:TextBox></td>
</tr>
<tr>
<td class="style2"></td>
</tr>
<tr>
<td>Hobbies:</td><td class="style1"><asp:CheckBox ID="check" Text="Reading"

runat="server"/><asp:CheckBox id="checkNat" Text="Writing" runat="server"
oncheckedchanged="checkNat_CheckedChanged" /><asp:CheckBox id="checkNat0"
Text="Singing" runat="server" oncheckedchanged="checkNat_CheckedChanged"
/></td>
</tr>
<tr>
</tr>
<tr>
<td></td><td class="style1"> </td>
</tr>
<tr>
<td><asp:Button ID="btn1" runat="server" Text="Submit"></asp:Button></td>
<td class="style1"><asp:Button ID="btn2" runat="server" Text="Reset"></asp:Button></td>
</tr>
</table>
</fieldset>
</form>
</body>
3. Design a registration form as shown in Q2. and perform insert, update, delete and display
operation with the help of grid view control.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="grid_view_demo.aspx.vb"

Inherits="grid_view_demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.newStyle3 { background-color:
#FFFFFF;
.auto-style1 { height:
65px; text-align:
center;
.auto-style3 { width: 122px; fontsize: large;

fontweight: 700;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
%>
<table class="newStyle3" style="width: 68%; height: 97px;">
<tr>
<td class="auto-style1" colspan="2"><strong style="font-size: xxlarge">Registration Page</strong></td>
</tr>
<tr>
<td class="auto-style3">
<asp:Label ID="Label1" runat="server" style="font-size: large; fontweight: 700" Text="Registration

ID"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<asp:Label ID="Label2" runat="server" Text="User Name">
</asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<asp:Label ID="Label3" runat="server" Text="Password">
</asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<asp:Label ID="Label4" runat="server" Text="First Name">
</asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<asp:Label ID="Label5" runat="server" Text="Last Name">
</asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<asp:Label ID="Label6" runat="server" Text="Gender">
</asp:Label>
</td>
<td>
<asp:RadioButton ID="Male" runat="server" Text="Male" />

<asp:RadioButton ID="RadioButton1" runat="server"
Text="Female" />
</td>
</tr>
<tr>
<asp:Label ID="Label7" runat="server" Text="Date of Birth">
</asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
Height="16px" Width="105px">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>

</asp:DropDownList>

</asp:DropDownList>
</td>
</tr>
<tr>
<asp:Label ID="Label8" runat="server" Text="Address"> </asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server" Width="380px">
</asp:TextBox>
</td>
</tr>
<tr>
<asp:Label ID="Label9" runat="server" Text="City">
</asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList4" runat="server" Height="16px" Width="143px">
<asp:ListItem>Visanagar</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<asp:Label ID="Label10" runat="server" Text="State">
</asp:Label>
</td>
<td>
<asp:ListItem>Gujrat</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<asp:Label ID="Label11" runat="server" Text="Country"> </asp:Label>
</td>
<td>
<asp:ListItem>India</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<asp:Label ID="Label12" runat="server" Text="Hobbies">
</asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Reading" />

<asp:CheckBox ID="CheckBox2" runat="server" Text="Writing" />

<asp:CheckBox ID="CheckBox3" runat="server" Text="Singing"
/>
</td>
</tr>
<tr>
<asp:Label ID="Label13" runat="server" Text="Mobil No.">
</asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
           &nb
sp;
      <asp:Button ID="Button4"
runat="server"
Text="Insert" Width="82px" />


<asp:Button ID="Button3" runat="server" Text="Update"
Width="83px" />

<asp:Button ID="Button5" runat="server" Text="Delet"
Width="73px" />
</td>
</tr>
</table>
</div>
<p>
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None" Width="531px">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True"

ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True"

ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White"
HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True"
ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
</p>
</form>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</body>
</html>
Output:--

Project

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project

Uploaded by

Copyright:

Available Formats

1. Design the below table and display the data on submit click in the below table row.

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="./css/style.css" />

<form action="" class="main_form">

<div class="form_input_wrap full_input half_col">

<label for="hosteler-iD">Hosteler ID</label>

<label for="hosteler-name">Hosteler Name:</label>

<label for="hostel-name">Hostel Name:</label>

<label for="room">Room No:</label>

<select name="room" id="room" class="form_input">

<label for="joining-date">Date of Joining:</label>

<label for="room-type">Room Type:</label>

<label for="father-name">Father's Name:</label>

<select name="gender" id="gender" class="form_input">

<label for="mobile-no">Mobile No:</label>

<label for="mother-name">Mother's Name:</label>

<label for="mobile-no2">Mobile No:</label>

<input class="form_input" type="text" id="city" name="city" />

<div class="form_input_wrap full_input">

<label for="email">Email ID:</label>

<label for="contact">Contact No:</label>

<div class="form_input_wrap full_input">

<label for="office-details">Inst./Office Details:</label>

<div class="form_input_wrap full_input">

<label for="agreement">Agreement (in months):</label>

<div class="form_input_wrap full_input half_col">

<label for="guardian-name">Guardian Name</label>

<div class="form_input_wrap full_input">

<label for="mobile2">Mobile No:</label>

<button type="submit" class="button">Submit</button>

Protected Sub dob_SelectionChanged(sender As Object, e As EventArgs)

Protected Sub mobile_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)

Protected Sub checkNat_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)

<form id="f1" method="post" runat="server">

<table bgcolor="#FF66CC" style="width: 384px">

<td align="center" bgcolor="#FF66CC" colspan="3">Registration Page</td>

<td>Registration ID</td><td class="style1">

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

<td class="style2"><asp:RequiredFieldValidator ID="validTextBox2" runat="server"

<td class="style2"> &nbsp;</td>

<td>User Name:</td><td class="style1"> <asp:textbox id="user" runat="server"></asp:textbox></td>

<td class="style2"><asp:RequiredFieldValidator ID="validuser" runat="server"

<td>Password:</td><td class="style1"><asp:textbox ID="pwd" runat="server"

<td class="style2"><asp:RequiredFieldValidator ID="validpwd" runat="server"

<td>First Name:</td><td class="style1"> <asp:textbox id="txt1" runat="server" ></asp:textbox></td>

<td class="style2"> <asp:RequiredFieldValidator ID="validfname" runat="server"

<td>Last Name:</td><td class="style1"> <asp:textbox id="txt2" runat="server" ></asp:textbox></td>

<td class="style2"><asp:RequiredFieldValidator ID="validlname" runat="server"

<td>Gender:</td><td class="style1"><asp:RadioButtonList ID="RadioButtonList1"

<asp:ListItem Text="Female" Value="1"></asp:ListItem>

<td class="style2"><asp:RequiredFieldValidator ID="validRadioButtonList1" runat="server"

<td>DOB: </td><td class="style1"><asp:TextBox ID="dob" runat="server" TextMode="Date"

<td class="style2"><asp:RequiredFieldValidator ID="validdob" runat="server"

<asp:ListBox ID="ListBox2" runat="server" Width="214px"></asp:ListBox>

<td class="style2"> </td>

<asp:DropDownList ID="DropDownList1" runat="server" Width="130px">

<asp:DropDownList ID="DropDownList2" runat="server" Width="125px">

<asp:DropDownList ID="DropDownList3" runat="server" Height="16px" Width="115px">

<td>Email:</td><td class="style1"><asp:TextBox ID="email" runat="server" TextMode="Email"

<td class="style2"><asp:RequiredFieldValidator ID="validemail" runat="server"

<td class="style2"> </td>

<td class="auto-style2" colspan="2">

Width="83px" />