Login page design in asp net c#
In this tutorial, I going to show you how you can create a "login page in asp.net c#". This process is very simple. Here we need to know about some basic knowledge of CSS. The Cascading Style Sheets (CSS) will be placed in the head section of the asp.net webform.
Step to Design a login form in asp.net C#
1.Open visual studio -->File -->New --> Select ASP.NET Empty Website
2. Now add a web form.
3. Add two text boxes and two-button.
4. Place CSS in the head section.
Asp.net WebForm Source Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login Form</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button:hover {
opacity: 0.8;
}
.cnbtn {
background-color: #ec3f3f;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 49%;
}
.lgnbtn {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span
and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cnbtn {
width: 100%;
}
}
.frmalg {
margin: auto;
width: 40%;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="frmalg">
<div class="container">
<center>
<h3>Asp.net
Login form </h3>
</center>
<label for="uname"><b>Username</b></label>
<asp:TextBox runat="server" ID="txt_Username" placeholder="Enter
Username"></asp:TextBox>
<label for="psw"><b>Password</b></label>
<asp:TextBox runat="server" ID="txt_password" TextMode="Password" placeholder="Enter
Password"></asp:TextBox>
<asp:Button runat="server" ID="btn_Login" CssClass="lgnbtn" Text="Login" />
<asp:Button runat="server" ID="btn_cancel" Text="Cancel" class="cnbtn" />
</div>
</form>
</body>
</html>
I hope you like this post about "login page design in asp net c#", If you have any problem related to design or any other thing feel free to comment below.
Sir please upload code for dashboard design
ReplyDeletePost a Comment