Categories
28°C, New York
Home Bulma Bulma Form Addons

Bulma Form Addons

Bulma Tag Addons

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=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
</head>
 
<body>
  <div class="container content has-text-centered">
    <h1 class="title has-text-success">w3wiki</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

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Bulma
										
										#Bulma-Form
										
										#CSS
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												Bulma Tag Addons