Bulma Form
The Bulma framework supports and allows the users to build forms using Bulma form controls. There are various classes used in the form controls and they are discussed below.
|
Element |
Description |
|---|---|
| Bulma Form field |
The 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. |
| Bulma Form control |
This class is used as a versatile block container which consists of input, level, textarea, and select elements. |
| Bulma Form icons |
Bulma provides icon classes to add icons to a form, one can append either has-icons-left or has-icons-right or both modifiers on the form control and is-left and/or is-right modifier(s) on the icon container depending on the modifiers applied on the form control. |
| Bulma Form addons |
Bulma Form has only three addons to be added i.e, inputs, buttons, and dropdown with the field container of form. |
| Bulma Form group |
Bulam form group classes are used to group the form fields together. There are multiple ways to group form field like center, right, or multiline, etc. |
| Bulma Horizontal form |
These classes are used to create forms horizontally (forms are aligned vertically by default). The labels are aligned next to the input fields |
| Bulma Disabled form |
There is no predefined class to disable a form, we can simply use the HTML disabled attribute for that. |
| Bulma Form Variables |
Bulma Form variables are used to customize form labels in their own ways i.e. user can set label colors, weight, and size |
Bulma Form Complete Reference
Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
The Form in Bulma contains various classes & components which include the text input, select dropdown, textarea, checkbox, etc. These form controls are used to validate the form fields, along with maintaining consistency in the design.
The list of complete references for the Bulma Form is given below: