How to Create Login Form in ASP.NET with SQL Server

Hello Developers, Here is Article to Create Login Form in ASP.NET with SQL Server. Here i am using Microsoft Visual Studio and Microsoft SQL server.First i am going to create registration form using SQL server.Let’s Follow some important steps.

step 1 : Open Visual Studio.Go to File Tab –>Project –>Web –>ASP.NET Web Application –>Select Empty –>Check Web Forms and MVC–>OK. see below image.

step 2 : Right click on Project –>Add –>Web Forms –>Item name –> OK. see below image.

Step 3: Remove all Codes and Paste Following given codes.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="LoginTest.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            font-size: xx-large;
            color: #003399;
        }
        .auto-style3 {
            width: 401px;
        }
        .auto-style4 {
            background-color: #0099CC;
        }
        .auto-style5 {
            background-color: #33CCCC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table class="auto-style1">
                <tr>
                    <td>
                        <table class="auto-style1">
                            <tr>
                                <td class="auto-style2"><strong>-------------------Register---------------</strong></td>
                            </tr>
                            <tr>
                                <td>Create Your Account.Its Free and Only Takes a Minute</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <table class="auto-style1">
            <tr>
                <td class="auto-style3">
                    <asp:Label ID="Label1" runat="server" Text="Enter First Nae"></asp:Label>
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtFirstName" ErrorMessage="Enter FirstName" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
                <td>
                    <asp:Label ID="Label2" runat="server" Text="Enter Last Name"></asp:Label>
                    <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtLastName" ErrorMessage="Enter Last Name" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" Text="Enter Email"></asp:Label>
                    <asp:TextBox ID="txtEmail" runat="server" TextMode="Email" Width="348px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="Enter Email" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label4" runat="server" Text="Enter Password"></asp:Label>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="316px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtPassword" ErrorMessage="Enter Password" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" Text="Enter Confirm Password"></asp:Label>
                    <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" Width="258px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtConfirmPassword" ErrorMessage="Enter Confirm Password" ForeColor="#FF3399"></asp:RequiredFieldValidator>
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPassword" ControlToValidate="txtConfirmPassword" ErrorMessage="Password Must be Match" ForeColor="#FF3399"></asp:CompareValidator>
                </td>
            </tr>
        </table>
        <asp:CheckBox ID="CheckBox1" runat="server" CssClass="auto-style5" Text="I accept the Terms of Use &amp; Privacy Policy" />
        <table class="auto-style1">
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" CssClass="auto-style4" Height="50px" OnClick="Button1_Click1" Text="Submit" Width="306px" />
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

step 4 : create table in SQL server . see below image.

step 5 : write following codes in webform.aspx.cs. see below image.

step 6 : Fill all details in text-box. see below image.

step 7 : now, execute the table in Microsoft SQL server.

Step 8 : Right click on Project –>Add –>Web Forms (Login) –>Item name –> OK. First remove the codes and copy+paste below codes.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="RegistrationFormExample.Login" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <style type="text/css">
        .auto-style1 {
            font-size: xx-large;
            text-decoration: underline;
            color: #000099;
        }
        .auto-style2 {
            width: 54%;
        }
        .auto-style3 {
            width: 111px;
        }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" class="newStyle1">
        <div class="auto-style1">
            Login Page</div>
        <table class="auto-style2">
            <tr>
                <td class="auto-style3">User Name</td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="Enter Your Password" ForeColor="#FF6600"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style3">Password</td>
                <td>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassword" ErrorMessage="Enter Your Password" ForeColor="#FF6600"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style3">&nbsp;</td>
                <td>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Sign In" />
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Registration.aspx">Sign Up</asp:HyperLink>
                </td>
            </tr>
        </table>
        <p>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </p>
    </form>
</body>
</html>

step 9 : go to designer of web-form and double click on the button. write below codes.

step 10 : Now execute the webform. you can see Login page that created by using Microsoft SQL server. Happy Programming.. Thanks.

Post Author: adama