Bulma Form

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.

Output: