How to Create User Login Registration Portal – Free Download – Coding Cyber
  • Home
  • HTML

How to Create User Login Registration Portal – Free Download

In this article, we will be creating three HTML files for Login, Register and Reset Password. Here I’ve seperated the header section and footer section, then page code.

You have to add the header section and footer section to add the three HTML pages.

And also I’m usig bootstrap cdn files for using bootstrap styling on all these pages.

Download the Complete User Login Registration Portal for Free

Header HTML Code Section

This header section code contains till opening body tag with bootstrap cdn.

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title> Bootstrap Admin Portal</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

Footer HTML Code Section

This footer section contains closing body tag and the closing html tag with boostrap JavaScript file.

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

You should load these two code snippets on all the three HTML pages, inside the body section is the HTML code.

Login HTML Page

Create a page with login.html, then add the code from header section and footer section. Also add this code into login.html file.

On this page, I’ve created a simple four columns bootstrap container with bootstrap panel styling. Inside this panel is the HTML form with email, password and submit button. These input fields are used for logging in the user.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please Sign In</h3>
                </div>
                <div class="panel-body">
                    <form role="form" method="post">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                </label>
                            </div>
                            <input type="submit" value="Login" />
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

User Registration HTML Page

For User Registration page, create a page with register.html. Add the code same as login.html that is header section and footer section, inside that you have to add this code.

This code contains simple user Registration form with four columns bootstrap panel. In this form, I’ve added these form input fields. User name, email, mobile, password and repeat password input fields with submit button.

This form can be used for registering new users.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please Register</h3>
                </div>
                <div class="panel-body">
                    <form role="form" method="post">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="User Name" name="username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Mobile" name="mobile" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Repeat Password" name="passwordr" type="password" value="">
                            </div>
                            <input type="submit" value="Register" />
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Reset Password Page

And finally Reset Password page, Here also we will do the same add the code from header section and footer section, also add this code. Save it as reset.html.

This code contains Reset Password form with four columns bootstrap panel with user name or email input field with submit button.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Reset Password</h3>
                </div>
                <div class="panel-body">
                    <form role="form" method="post">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                            </div>
                            <input type="submit" value="Reset Password" />
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Complete Code

You can create the files by combining above snippets of code, For any reason if you are not able to combine those files. You can Download the Complete User Login Registration Portal for Free.

Conclusion

By following the above steps you can create an awesome looking User Login, User Registration and Reset Password HTML pages. You can use these pages with in your projects. If you want to add User Login, Registration, Reset Password features checkout the links.

Let me know your thoughts through the below comment form.

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: