Blaze UI Input Labels and Form Elements

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 Labels and Form Elements are used to create the form elements along with the labels. We use the o-form-element class to create the form element and the c-label class to create the label. In this article, we will discuss Blaze UI Input Labels and Form Elements.

Blaze UI Input Labels and Form Elements Classes:

o-form-element: This class is used to create the form element.
c-label: This class is used to create the label.

Syntax:

<div class="o-form-element">
  <label class="c-label">
       ...
  </label>
  ...
</div>

Example 1: The following example demonstrates the Blaze UI Input Labels and Form Elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Labels and Form Elements </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 Labels and Form Elements </h3> 
  
    <div class="o-container o-container--xsmall  
       o-form-element" > 
      <label class="c-label" for="firstname"> 
        First Name: 
      </label> 
      <input id="firstname" class="c-field"
        placeholder="Enter your First Name" > 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Blaze UI Input Labels and Form Elements

Example 2: The following example demonstrates the Blaze UI Input Labels and Form Elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Input Labels and Form Elements </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 Labels and Form Elements </h3> 
  
      <div class="o-container o-container--xsmall  
         o-form-element" > 
        <label class="c-label" for="userName"> 
          Username: 
        </label> 
        <input id="userName" class="c-field"
           placeholder="Enter your UserName" > 
  
        <label class="c-label" for="mobile"> 
          Mobile: 
        </label> 
        <input id="mobile" type="number" class="c-field"
           placeholder="Enter your Mobile no." > 
  
        <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> 
    </div> 
</body> 
  
</html>