In this article, we’ll be seeing Bulma form addons. Bulma Form provides the addons controls which can be used together with the field container. Bulma only provides 3 addons to be added i.e, inputs, buttons, and dropdown with the field container of form. Below are the classes used for attaching form addons.
Bulma Form addons class:
- has-addons: This class is used for adding attachment controls or addons in a form field.
- is-static: This class is used for making a button static in nature.
- is-expanded: This class is used for filling an input field in full width in a form field.
- is-fullwidth: This class is used for filling a dropdown field in full width in a form field.
- has-addons-centered: This class is used to align the addons at the center.
- has-addons-right: This class is used to align the addons at right.
Syntax:
Simple addons
<div class="field has-addons">
<div class="control">
<input class="input" type="text"
placeholder="Enter your details">
</div>
<div class="control">
<a class="button is-primary">
Search
</a>
</div>
</div>Full width input field or dropdown
<div class="field has-addons">
<div class="control">
....
</div>
<div class="control is-expanded">
<input class="input " type="text">
</div>
</div>Full width dropdown
<div class="field has-addons">
<div class="control">
....
</div>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select>
<option>java</option>
....
</select>
</div>
</div>
</div>Example: Below example demonstrates all addons classes.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GFG</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="container content has-text-centered">
<h1 class="title has-text-success">GeeksforGeeks</h1>
<h1 class="subtitle">Bulma form addons</h1>
<!-- Simple addons -->
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Button with Input addon
</label>
<div class="control">
<input class="input" type="text"
placeholder="Search here">
</div>
<div class="control">
<a class="button is-primary">
Find
</a>
</div>
</div>
<!-- Combining Dropdown, Button, Input addons-->
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Dropdown, Button, Input addon
</label>
<div class="control">
<span class="select">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</span>
</div>
<div class="control">
<input class="input" type="text"
placeholder="Enter your choice">
</div>
<div class="control">
<a class="button is-info">
Add
</a>
</div>
</div>
<!-- addons with static button -->
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Static Button with Input addon
</label>
<p class="control">
<input class="input" type="text"
placeholder="Enter your college">
</p>
<p class="control">
<a class="button is-static">
CS Only
</a>
</p>
</div>
<!-- Full width Input field with addons -->
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Full width Input addon
</label>
<div class="control">
<span class="select">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</span>
</div>
<div class="control is-expanded">
<input class="input " type="text"
placeholder="Enter your choice">
</div>
<div class="control">
<a class="button is-info">
Add
</a>
</div>
</div>
<!-- Full width dropdown addon -->
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Full width dropdown addon
</label>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</div>
</div>
<div class="control">
<a class="button is-info">
Add
</a>
</div>
</div>
<!-- Aligning addons -->
<div class="field has-addons has-addons-centered">
<label for="addons" class="subtitle p-2">
Centered align addons
</label>
<div class="control">
<span class="select">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</span>
</div>
<div class="control">
<input class="input" type="text"
placeholder="Enter your choice">
</div>
<div class="control">
<a class="button is-info">
Add
</a>
</div>
</div>
<div class="field has-addons">
<label for="addons" class="subtitle p-2">
Default align addons
</label>
<div class="control">
<span class="select">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</span>
</div>
<div class="control">
<input class="input" type="text"
placeholder="Enter your choice">
</div>
<div class="control">
<a class="button is-warning">
Add
</a>
</div>
</div>
<div class="field has-addons has-addons-right">
<label for="addons" class="subtitle p-2">
Right align addons
</label>
<div class="control">
<span class="select">
<select>
<option>java</option>
<option>C++</option>
<option>Python</option>
</select>
</span>
</div>
<div class="control">
<input class="input" type="text"
placeholder="Enter your choice">
</div>
<div class="control">
<a class="button is-danger">
Add
</a>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bulma Form addons
Reference: https://bulma.io/documentation/form/general/#form-addons