Bulma Form field

Last Updated : 30 Jan, 2022

Bulma is a modern CSS framework based on flexbox. It ships with pre-styled elements and components which can be used together to make beautiful interfaces. In this article, we will be learning the Bulma Form Field.

Bulma form field is a simple container that contains a label element, a Bulma form control, and an optional help text. The field container maintains consistent spacing between the form fields.

Form field classes:

label: This class is used to set a text label for the field container.
control: This class is used to set a form control for the field container.
help: This class is used to set an optional help text for the field container.

Syntax:

<div class="field">
    <label class="label">...</label>
    <div class="control">
        ...
    </div>
    <p class="help">...</p>
</div>

Example: The below example shows the field container of a form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
      
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .head{ 
            text-align: center; 
        } 
        form{ 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="head"> 
        <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
        <p><b>Bulma Form Field</b></p> 
    </div> 
    <div class="container is-fluid"> 
        <form> 
            <div class="field"> 
                <label class="label">Field With Help text</label> 
                <div class="control"> 
                    <input class="input" type="text" 
                         placeholder="Enter some text"> 
                </div> 
                <p class="help">Some help text here</p> 
  
            </div> 
  
            <div class="field"> 
                <label class="label">Field Without Help text</label> 
                <div class="control"> 
                    <input class="input" type="text" 
                         placeholder="Enter some text"> 
                </div> 
            </div> 
        </form> 
    </div> 
</body> 
</html>