Blaze UI Input Forms

Last Updated : 21 Apr, 2022

Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Blaze UI Input Forms is used to create the beautiful form by styling the labels, legends, fieldsets, etc. It does not have form classes so it styles the child elements using some classes. In this article, we will discuss Blaze UI Input Forms.

Blaze UI Input Forms Classes:

o-fieldset: This class is used to create the fieldset.
c-label: This class is used to create the label.
c-hint: This class is used to give hints.
o-form-element: This class is used to create the form element.

Syntax:

<fieldset class="o-fieldset">
   ...
</fieldset>

Example 1: The following code demonstrates the Blaze UI Input Forms.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Forms </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;"> GeeksforGeeks </h1> 
        <h3> Blaze UI Input Forms </h3> 
  
        <fieldset class="o-fieldset"> 
            <legend class="o-fieldset__legend"> 
              Registration Form 
            </legend> 
              
            <label class="o-container o-container--xsmall c-label" > 
              First Name 
              <input class="c-field c-field--label"> 
              <div role="tooltip" class="c-hint"> 
                Enter you first name. Eg. John 
              </div> 
            </label> 
              
            <div class="o-container o-container--xsmall o-form-element"> 
              <label class="c-label" for="lastname"> 
                Last Name: 
              </label> 
              <input id="lastname" class="c-field"
                placeholder="Enter your Last Name" > 
            </div> 
        </fieldset> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Input Forms

Example 2: The following code demonstrates the Blaze UI Input Forms.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Forms </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;"> GeeksforGeeks </h1> 
        <h3> Blaze UI Input Forms </h3> 
  
        <fieldset class="o-fieldset"> 
            <legend class="o-fieldset__legend"> 
              Form: 
            </legend> 
              
            <label class="c-label c-field c-field--choice  
               o-form-element" > 
              <input type="checkbox"> 
              GeeksforGeeks 
            </label> 
  
            <label class="c-label" for="gender"> 
              Gender: 
            </label> 
            <input id="gender" type="radio" name="gen" >  
              Male 
            <input id="gender" type="radio" name="gen" >  
              Female 
              
            <div class="o-form-element"> 
              <label class="o-container o-container--xsmall  
                c-toggle"> 
                I agree to the terms and conditions 
                <input type="checkbox" checked> 
                <div class="c-toggle__track"> 
                  <div class="c-toggle__handle"></div> 
                </div> 
              </label> 
            </div> 
        </fieldset> 
    </div> 
</body> 
  
</html>