Friday, 2 July 2021

How To Build/Create a Login Form (CSS, jQuery For Asp.net, .Net Core and MVC Application)

7/02/2021 - By Pranav Singh 0

In this article i will show you how you can create a responsive login form using css, HTML and jQuery.  For this article first we will create a web application and add a new page in it. Now we will design the login form.


So first we will add the below references into the page header. 


       <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

After adding this references we will design our login form. Please check the code.


        <div>

            <input type="button" value="Click to Open Login" class="ui-button ui-icon-alert" id="openloginform" />

        </div>

 

        <!-- This is your login form area-->

        <div id="dialog-form" title="LOGIN AREA">

            <p style="text-align: center;">

                <img src="Login-icon.png" width="150px" />

            </p>

            <p>

                <span  style="float: left; margin: 0 7px 0px 0;font-weight:bold;">Login Id</span>

                <input type="text" class="text" />

            </p>

            <p>

                <span style="float: left; margin: 0 7px 0px 0; font-size: 15px;font-weight:bold;">Password</span>

                <input type="password" class="text" />

            </p>

            <p>

                <input type="button" class="ui-button" value="Login" />

            </p>

        </div>

 

In above code i have added a button control. When user click on the button it will open the login form. Just below the button logon form html tag have been added.

Now we will add the jQuery code which make the login form open the an animated form inside the model popup window.


     $(function () {

            $("#dialog-form").dialog({

                autoOpen: false,

                show: {

                    effect: "blind",

                    duration: 1000

                }

            });

            $("#openloginform").on("click"function () {

                $("#dialog-form").dialog("open");

            });

        });

 

Now here is the complete code of the page. 


<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

       <title>How to create a login form</title>

       <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

       <style>

        input[type=text]input[type=password] {

            width100%;

            padding12px 20px;

            margin8px 0;

            displayinline-block;

            border1px solid #ccc;

            box-sizingborder-box;

        }

       </style>

       <script>

        $(function () {

            $("#dialog-form").dialog({

                autoOpen: false,

                show: {

                    effect: "blind",

                    duration: 1000

                }

            });

            $("#openloginform").on("click"function () {

                $("#dialog-form").dialog("open");

            });

        });

       </script>

 

</head>

<body>

           <div>

            <input type="button" value="Click to Open Login" class="ui-button ui-icon-alert" id="openloginform" />

        </div>

 

        <!-- This is your login form area-->

        <div id="dialog-form" title="LOGIN AREA">

            <p style="text-align: center;">

                <img src="Login-icon.png" width="150px" />

            </p>

            <p>

                <span  style="float: left; margin: 0 7px 0px 0;font-weight:bold;">Login Id</span>

                <input type="text" class="text" />

            </p>

            <p>

                <span style="float: left; margin: 0 7px 0px 0; font-size: 15px;font-weight:bold;">Password</span>

                <input type="password" class="text" />

            </p>

            <p>

                <input type="button" class="ui-button" value="Login" />

            </p>

        </div>

</body>

</html>

 

 

Now we have done open the page in browser to check the output.

Hot to create a login form

Download

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top