Bootstrap Forms:

Register/Login Form with Tabs using Bootstrap

As we all know, the login page is one of the most important sections of a website and one of the most commonly known as well. It is a web page or an entry page that needs authentication and identification from the users which is often performed by providing a username and a password or an equivalent of these two. Logins let the users experience the whole website plus all the services and removes the limit they would have if they did not register as a member in your website. From the website owner side, when a user logs in, their actions and behaviours can be tracked which allows the website to perform much better. Sometimes websites even use session only cookies to further prove the importance of having a login page and a login form. These cookies only work when the user is logged in and will be deleted once the user logs out.

With that said, this post is about a register form in Bootstrap. This is in fact a register form with tabs with an extremely simple and minimalistic look to it. The code features both a Bootstrap login form and a register form each represented by their own respective tabs. You can use this login form with tabs as a basic login page for your users as it has all the necessary functions of a register/login form.

Register Form with Tabs

Bootstrap Login Form

Login Form with Tabs

Register Form in Bootstrap

<!-- This script got from frontendfreecode.com -->
<div class="cover-container">
    <div class="masthead clearfix">
        <div class="inner">
            <h3 class="masthead-brand"></h3>
            <ul class="nav masthead-nav">
                <!--<li class="active"><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>-->
            </ul>
        </div>
    </div>
    <div class="inner cover">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Please Sign Up It's free and always will be.</h3>
            </div>
            <div class="panel-body">
                <!-- tabs -->
                <ul id="dTab" class="nav nav-tabs">
                    <li class="active"><a href="#pane1" data-toggle="tab">Register</a></li>
                    <li><a href="#pane2" data-toggle="tab">Login</a></li>
                    <!--<li><a href="#pane3" data-toggle="tab"></a></li>-->
                </ul>
                <div class="tab-content">
                    <div id="pane1" class="tab-pane fade in active">
                        <!-- Register Username -->
                        <form action="" method="POST">
                            <fieldset>
                                <div class="form-group">
                                    <label class="control-label" for="username">Username</label>
                                    <input type="text" id="username" name="username" placeholder="Username can contain any letters or numbers" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- E-mail -->
                                    <label class="control-label" for="email">E-mail</label>
                                    <input type="text" id="email" name="email" placeholder="Please provide your E-mail" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- Password-->
                                    <label class="control-label" for="password">Password</label>
                                    <input type="password" id="password" name="password" placeholder="Password should be at least 4 characters" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- Password -->
                                    <label class="control-label" for="password_confirm">Password (Confirm)</label>
                                    <input type="password" id="password_confirm" name="password_confirm" placeholder="Please confirm password" class="form-control" />
                                </div>
                                <!--    <div class="form-group">
<select class="form-control">
  <option>select</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>-->

                                <!-- <div class="form-group">
    <label for="exampleInputFile">File Upload</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">upto 500KB</p>
  </div>-->
                                <button class="btn btn-success">Register</button>
                            </fieldset>
                        </form>
                    </div>
                    <div id="pane2" class="tab-pane fade">
                        <!-- login -->
                        <form role="form" action="" method="POST">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                            </div>
                            <button type="submit" class="btn btn-success">Submit</button>

                            <button type="reset" class="btn btn-success" id="forgetBtn">Forget Password</button>
                        </form>
                        <!-- login-ends-->
                    </div>
                    <div id="pane3" class="tab-pane fade">
                        <!-- password forget -->
                        <form role="form" action="" method="POST">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Request a password reset. Enter your email" />
                            </div>

                            <button type="submit" class="btn btn-success">Reset Password</button>
                            <button type="reset" class="btn btn-success" id="loginBtn">Login</button>
                        </form>
                        <!-- password forget -->
                    </div>
                </div>
                <!-- -->
            </div>
        </div>
        <!-- <h1 class="cover-heading"></h1>
            <p class="lead"> Click to Register</p>
            <p class="lead">
              <a href="#" class="btn btn-lg btn-default">register</a>
            </p>-->
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.cover {
    width: 400px;
    margin: auto;
}
.mastfoot {
    padding-top: 0px;
    text-align: center;
    margin: auto;
}

$(document).ready(function () {
    $("#forgetBtn").click(function () {
        $("#dTab li:eq(2) a").tab("show");
        $(".tab-content div.active").removeClass("active in");
        $(".tab-content").find("#pane3").addClass("active in");
    });
    $("#loginBtn").click(function () {
        $("#dTab li:eq(1) a").tab("show");
        $(".tab-content div.active").removeClass("active in");
        $(".tab-content").find("#pane2").addClass("active in");
    });
});

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style>
.cover {
    width: 400px;
    margin: auto;
}
.mastfoot {
    padding-top: 0px;
    text-align: center;
    margin: auto;
}
</style>

</head>
<body>
<div class="cover-container">
    <div class="masthead clearfix">
        <div class="inner">
            <h3 class="masthead-brand"></h3>
            <ul class="nav masthead-nav">
                <!--<li class="active"><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>-->
            </ul>
        </div>
    </div>
    <div class="inner cover">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Please Sign Up It's free and always will be.</h3>
            </div>
            <div class="panel-body">
                <!-- tabs -->
                <ul id="dTab" class="nav nav-tabs">
                    <li class="active"><a href="#pane1" data-toggle="tab">Register</a></li>
                    <li><a href="#pane2" data-toggle="tab">Login</a></li>
                    <!--<li><a href="#pane3" data-toggle="tab"></a></li>-->
                </ul>
                <div class="tab-content">
                    <div id="pane1" class="tab-pane fade in active">
                        <!-- Register Username -->
                        <form action="" method="POST">
                            <fieldset>
                                <div class="form-group">
                                    <label class="control-label" for="username">Username</label>
                                    <input type="text" id="username" name="username" placeholder="Username can contain any letters or numbers" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- E-mail -->
                                    <label class="control-label" for="email">E-mail</label>
                                    <input type="text" id="email" name="email" placeholder="Please provide your E-mail" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- Password-->
                                    <label class="control-label" for="password">Password</label>
                                    <input type="password" id="password" name="password" placeholder="Password should be at least 4 characters" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <!-- Password -->
                                    <label class="control-label" for="password_confirm">Password (Confirm)</label>
                                    <input type="password" id="password_confirm" name="password_confirm" placeholder="Please confirm password" class="form-control" />
                                </div>
                                <!--    <div class="form-group">
<select class="form-control">
  <option>select</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>-->

                                <!-- <div class="form-group">
    <label for="exampleInputFile">File Upload</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">upto 500KB</p>
  </div>-->
                                <button class="btn btn-success">Register</button>
                            </fieldset>
                        </form>
                    </div>
                    <div id="pane2" class="tab-pane fade">
                        <!-- login -->
                        <form role="form" action="" method="POST">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                            </div>
                            <button type="submit" class="btn btn-success">Submit</button>

                            <button type="reset" class="btn btn-success" id="forgetBtn">Forget Password</button>
                        </form>
                        <!-- login-ends-->
                    </div>
                    <div id="pane3" class="tab-pane fade">
                        <!-- password forget -->
                        <form role="form" action="" method="POST">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Request a password reset. Enter your email" />
                            </div>

                            <button type="submit" class="btn btn-success">Reset Password</button>
                            <button type="reset" class="btn btn-success" id="loginBtn">Login</button>
                        </form>
                        <!-- password forget -->
                    </div>
                </div>
                <!-- -->
            </div>
        </div>
        <!-- <h1 class="cover-heading"></h1>
            <p class="lead"> Click to Register</p>
            <p class="lead">
              <a href="#" class="btn btn-lg btn-default">register</a>
            </p>-->
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $("#forgetBtn").click(function () {
        $("#dTab li:eq(2) a").tab("show");
        $(".tab-content div.active").removeClass("active in");
        $(".tab-content").find("#pane3").addClass("active in");
    });
    $("#loginBtn").click(function () {
        $("#dTab li:eq(1) a").tab("show");
        $(".tab-content div.active").removeClass("active in");
        $(".tab-content").find("#pane2").addClass("active in");
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS