Bulma Form

Last Updated : 13 Feb, 2022

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma framework supports and allows the users to build forms using Bulma form controls. The framework supports <form>, <button>, <input>, <textarea> and <label> elements of HTML. The user can build a complete form using Bulma as it provides the best UI design. Bulma uses a control container for maintaining the flow of the form. It uses field class as a container for adding equal spacing between the form elements. There are various classes used in the form controls and they are discussed below.

Bulma Form Classes:

field: It is a container in which the label, control, etc. are used for creating a form.
control: This class is used as a block container which consists of input, level, textarea, select elements.
label: This class is used for adding a label for an input element.
input: This class is used for getting text input from the user.
textarea: This class is used for getting a large text input from the user.
select: This class is used for selecting one option from a list in a dropdown menu.
radio: This class is used for adding radio buttons in Bulma form.
button: This class is used for adding buttons in Bulma form.
checkbox: This class is used for adding a checkbox in the Bulma form for selecting multiple option inputs.

Syntax:

<form>
  <div class="field">
    <label class="label">Label</label>
    <div class="control">
      <input class="input" type="text" 
             placeholder="Text input">
      <input class="input" type="radio">
      <input class="input" type="checkbox">
      ....
    </div>
  </div>
</form>

Example: The below example illustrates the Bulma Form.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <link
      rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
  </head> 
  <body> 
    <div class="container box p-6 
                has-background-light"> 
      <h1 class="title has-text-centered 
                 has-text-success"> 
        GeeksforGeeks 
      </h1> 
      <h2 class="subtitle has-text-centered"> 
        Sign Up Form 
      </h2> 
      <form action=""> 
        <div class="field"> 
          <label class="label">Name</label> 
          <div class="control"> 
            <input class="input" type="text"
                   placeholder="Enter your name" /> 
          </div> 
        </div> 
  
        <div class="field"> 
          <label class="label">Username</label> 
          <div class="control has-icons-left 
                      has-icons-right"> 
            <input
              class="input is-success"
              type="text"
              placeholder="Enter your username"
            /> 
            <span class="icon is-small is-left"> 
              <i class="fas fa-user"></i> 
            </span> 
          </div> 
        </div> 
  
        <div class="field"> 
          <label class="label">Email</label> 
          <div class="control has-icons-left 
                      has-icons-right"> 
            <input
              class="input is-danger"
              type="email"
              placeholder="Enter your email"
            /> 
            <span class="icon is-small is-left"> 
              <i class="fas fa-envelope"></i> 
            </span> 
          </div> 
        </div> 
  
        <div class="field"> 
          <label class="label">Password</label> 
          <div class="control has-icons-left 
                      has-icons-right"> 
            <input
              class="input is-danger"
              type="password"
              placeholder="Enter your password"
            /> 
            <span class="icon is-small is-left"> 
              <i class="fas fa-key"></i> 
            </span> 
          </div> 
        </div> 
  
        <div class="field"> 
          <label class="label"> 
            Choose your Course 
          </label> 
          <div class="control"> 
            <div class="select"> 
              <select> 
                <option>Java</option> 
                <option>C++</option> 
                <option>Python</option> 
              </select> 
            </div> 
          </div> 
        </div> 
  
        <div class="field"> 
          <label class="label"> 
            Something Else 
          </label> 
          <div class="control"> 
            <textarea
              class="textarea"
              placeholder="Want to tell anything?"
            ></textarea> 
          </div> 
        </div> 
  
        <div class="field"> 
          <div class="control"> 
            <label class="checkbox"> 
              <input type="checkbox" /> 
              I agree to the <a href="#"> 
              terms and conditions 
              </a> 
            </label> 
          </div> 
        </div> 
  
        <div class="field"> 
          <div class="control"> 
            <label class="radio"> 
              <input type="radio" 
                     name="question" /> 
              Yes 
            </label> 
            <label class="radio"> 
              <input type="radio" 
                     name="question" /> 
              No 
            </label> 
          </div> 
        </div> 
  
        <div class="field is-grouped"> 
          <div class="control"> 
            <button class="button is-success"> 
              Sign up 
            </button> 
          </div> 
          <div class="control"> 
            <button class="button is-link is-light"> 
              Cancel 
            </button> 
          </div> 
        </div> 
      </form> 
    </div> 
  </body> 
</html>