Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

 




Creating Simple Login Form Template using Bootstrap

Twitter Bootstrap provides an easy and fastest way to create different types of form using its already defined CSS classes like form-group and form-control. We can use twitter bootstrap forms as per our need and create different types and styles of forms. Bootstrap supports inline form, horizontal form and vertical form and with this we can create signup and Login form template using Bootstrap.

In this section of our Bootstrap Tutorials we will discuss about designing and creating simple login page template using bootstrap forms. If you are already familiar with html and bootstrap then you can directly understand the design else start learning html and bootstrap basics. You can go through the explanation of the code or simply download the source code and use it in your web project. 

This is how our login form look like:

Creating login.html

Create a HTML (Hypertext Markup Language) File, with name login.html and add below code:

Start adding Bootstrap references

First thing fist as we will be using bootstrap forms to create login form, so we need to add bootstrap to our html file. For that we need to add <link> tag to head section of our page as:

On the above code <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>  will implement jQuery in our page. Similarly, <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>  will implement javascript used by bootstrap itself.

Adding Login Form

Now we’ll add login or Sign in form first, for that you can add the code below to login.html file.

Adding Custom CSS Styles for Login Page

Here, you will see a file custom.css added for css class definition that are not in bootstrap but you’ll be needing for your preferences, so create a custom.css file inside css folder and copy this css code:

So, this is how we conclude our login page, but there is still more to add, we’ll also be adding Sign-up page with login form. For that, we’ll create a javascript onclick() event to load Sign Up page and hide sign-in page, for that we’ll add some code for the <a> tag of Sign Up Here text. This will add a simple animated look for the login page.

<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> Sign Up Here </a>

onClick attribute will trigger javascript when the text link is clicked, see more on event driven programming. So, when the link is clicked, #loginbox i.e id of login div will be hidden by the javascript hide() function and after that div is hidden, #signupbox i.e id of signup div will be shown by the javascript show() function.

Free Source code for Sign up and Login Form using Bootstrap

Now, here is over all code for Sign In and Sign Up form.

 

Thank you for your love.
share
1 Response

What do you think?

Your email address will not be published. Required fields are marked *

%d bloggers like this: