Blaze UI Example Login

Last Updated : 06 May, 2022

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

In this article, we will create the login form page using Blaze UI. The login page is used to proceed to any website, it may be used for authentication, setting credentials, managing data, etc.

Blaze UI Classes used:

o-container: This class is used to make the container that will contain other components in it.
c-card: This class is used to make the login page look like a card.
c-heading: This class is used to add the heading to the card.
c-card__body: This class is used to add the body components to the card.
c-card__footer: This class is used to add the footer components to the card.
o-form-element: This class is used to add the elements of the login form.
c-label: This class is used to add the label to any component.
o-form-element: This class is used to add the elements to the login form.
c-hint: This class is used to add hints to an element.
c-toggle: This class is used to add the toggle button.
c-button: This class is used to add the button to submit the login form.

Syntax:

<form class="o-container...">
    <header class="c-card...">
          <h2 class="c-heading...">
            ...
          </h2>
    </header>
    <div class="c-card__body">
        ...
    </div>
    <div class="o-form-element">
           ...
    </div>
    <div class="c-card__footer ...">
        <button type="..." class="c-button ...">
              ...
           </button>
      </div>
</form>

Example 1: The following code demonstrates the Blaze UI login form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <form class="o-container o-container--xsmall c-card u-high"> 
        <header class="c-card__header"> 
            <h2 class="c-heading" style="color:green"> 
                GeeksforGeeks 
                <div class="c-heading__sub"> 
                    Blaze UI Login Form Example 
                </div> 
            </h2> 
        </header> 
  
        <div class="c-card__body"> 
            <div class="o-form-element"> 
                <label class="c-label"> 
                    Name: 
                    <input class="c-field" type="email" 
                        placeholder="Enter Name" /> 
                </label> 
            </div> 
            <div class="o-form-element"> 
                <label class="c-label"> 
                    Email: 
                    <input class="c-field" type="email" 
                        placeholder="Enter e-mail" /> 
                </label> 
            </div> 
            <label class="o-form-element c-label"> 
                Password: 
                <input class="c-field" type="password"
                    placeholder="Enter password" /> 
            </label> 
            <label class="o-form-element c-label"> 
                Enter OTP: 
                <input class="c-field" type="text"
                    placeholder="Enter OTP" /> 
            </label> 
        </div> 
        <div class="c-card__footer"> 
            <button type="button" 
                class="c-button c-button--success"> 
                Login 
            </button> 
        </div> 
    </form> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the Blaze UI login form using the other classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <br /> 
    <form class="o-container"> 
        <header class="c-card__header"> 
            <h2 class="c-heading" style="color:green"> 
                GeeksforGeeks 
                <div class="c-heading__sub"> 
                    Blaze UI Login Form Example 
                </div> 
            </h2> 
        </header> 
        <div class="c-card__body"> 
            <div class="o-form-element"> 
                <label class="c-label"> 
                    Name: 
                    <input class="c-field" type="email"
                        placeholder="Enter Name" /> 
                </label> 
            </div> 
            <div class="o-form-element"> 
                <label class="c-label"> 
                    Email: 
                    <input class="c-field" type="email"
                        placeholder="Enter e-mail" /> 
                    <div role="tooltip" class="c-hint"> 
                        The email used to register the account 
                    </div> 
                </label> 
            </div> 
            <label class="o-form-element c-label"> 
                Password: 
                <input class="c-field" type="password" 
                    placeholder="Enter password" /> 
            </label> 
            <label class="o-form-element c-label"> 
                Enter OTP: 
                <input class="c-field" type="text" 
                    placeholder="Enter OTP" /> 
            </label> 
        </div> 
        <div class="c-card__footer"> 
            <button type="button" 
                class="c-button c-button--success"> 
                Login 
            </button> 
        </div> 
    </form> 
</body> 
  
</html>