Bulma Form field
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" >w3wiki</ 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 > |
Output:
Reference: https://bulma.io/documentation/form/general/#form-field