How to create login Form on Modal using Bootstrap Framework

sogata (64)in #utopian-io • 6 years ago (edited)

What Will I Learn?

You will learn How to implement the bootstrap on your web page
You will learn How to use modal class from bootstrap
You will learn Parts and contents of Modal

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScript

Difficulty

Intermediate

Tutorial Contents

MODAL is a pop-up window system. When a button is clicked it will exit a small window according to the size set in the coding. For example, you can see when you click the login button on steemit.com, then a small window appears as a login form to login with your username and password. That's the MODAL.

So, On this occasion I will share a tutorial on how to create login form in capital using bootstrap. Immediately, Follow these steps:

Create a file with the html extension, ex : login.html, then open the file with text editor.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. So, to create a page using bootstrap function require to use HTML doctype,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Add the following <meta> tag in <head> element, This's to ensure proper rendering and touch zooming.

<meta name="viewport" content="width=device-width, initial-scale=1">

To use bootstrap you need to download and host the bootstrap file then call it on your page. If you don't want to do this, CDN (Content Delivery Network) is the solution. Add the following code in <head> element. to get update of CDN, visit https://getbootstrap.com/ as the official website of bootstrap.

(html comment removed:  Latest compiled and minified CSS )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
(html comment removed:  Optional theme )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
(html comment removed:  Latest compiled and minified JavaScript )
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap also requires a containing element to wrap site contents. So, before creating any other element, you must do this first. There two container classes provided by bootstrap, it is The .container class : provides a responsive fixed width container and The .container-fluid class : provides a full width container. You can try this two to get different. And in this tutorial I use .container class. Add the following code in <body> element.

<div class="container"></div>

Add the button for opening Modal. To create a button using bootrap you just need call the .btn class, will automaticallay get the button style. For more style of button from bootstrap you can lear on bootstrap officila website.

<button type="button" class="btn" >Login</button>

Create the Modal, Add the following code in <body> element up to you, in this tutorial I put it before </body>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog"></div></div>

.modal : the class of modal
.fade : to adds a transition effect which fades the modal in and out
.modal-dialog : to sets the proper width and margin of the modal

Create Modal content, add the following code in <div class="modal-dialog"> element.

<div class="modal-content"></div>

Create the header of Modal, add the following code in <div class="modal-content">.

<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Welcome back</h4>
 </div>

button in this element is close button, so, if this button clicked will close the modal.
Title write on <h4> element

Create the modal body, just call .modal-body class in <div class="modal-content"> element.

<div class="modal-body"></div>

now, create the login form on <div class="modal-body">. Here the simple code for login form you can modify by yourself.

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

To call modal form the button you should add the the following attribut on <button> element.

data-toggle="modal" data-target="#myModal"

so it becomes like this:

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Login</button>

data-toggle="modal" : atribut to open modal
data-target="#myModal" : to call modal Which you want.

Now, Save the file and run it on your browser. Then try to click the button, the login modal will appear.
Finish, For the full code your can download here or you can copy bellow.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login on Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <center>
            <h2>LOGIN MODAL</h2>
            <button type="button" class="btn" data-toggle="modal" data-target="#myModal">Login</button>
        </center>     
    </div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Welcome Back</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                          <label for="email">Email address:</label>
                          <input type="email" class="form-control" id="email">
                        </div>
                        <div class="form-group">
                          <label for="pwd">Password:</label>
                          <input type="password" class="form-control" id="pwd">
                        </div>
                        <div class="checkbox">
                          <label><input type="checkbox"> Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                      </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

How to create login Form on Modal using Bootstrap Framework

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Curriculum

Coin Marketplace

How to create login Form on Modal using Bootstrap Framework

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Curriculum

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Suggestions

Get Noticed!

Community-Driven Witness!

Coin Marketplace