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 =
< 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 >
|
Output:
![Bulma Form field](https://media.geeksforgeeks.org/wp-content/uploads/20220124225559/formfield.png)
Bulma Form field
Reference: https://bulma.io/documentation/form/general/#form-field
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...