- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Form controls
Description
Bulma contains different types of form control classes for creating variety of forms. It supports following form control classes −
.label
.input
.textarea
.select
.checkbox
.radio
.button
.help
The form control classes can be wrapped in the .control class container and uses the .field container, to keep space between form control classes.
The below simple example describes use of some of the form fields such as input, dropdown, checkbox and radio button fields −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Form Fields
</span>
<br>
<br>
<span class = "is-size-5">
Input Fields
</span>
//field class container keeps the space between form control classes
<div class = "field">
<label class = "label">Name</label>
//control class container wraps the form control classes
<div class = "control">
<input class = "input" type = "text" placeholder = "enter your name...">
</div>
</div>
<div class = "field">
<label class = "label">Email</label>
<div class = "control">
<input class = "input" type = "email" placeholder = "enter your email...">
</div>
</div>
<br>
<span class = "is-size-5">
Dropdown Field
</span>
<div class = "field">
<div class = "control">
<div class = "select">
<select>
<option>Option One</option>
<option>Option Two</option>
</select>
</div>
</div>
</div>
<br>
<span class = "is-size-5">
Checkbox Field
</span>
<div class = "field">
<div class = "control">
<label class = "checkbox">
<input type = "checkbox">
I agree to the <a href = "#">terms and conditions</a>
</label>
</div>
</div>
<br>
<span class = "is-size-5">
Radio Button Fields
</span>
<div class = "field">
<div class = "control">
<label class = "radio">
<input type = "radio" name = "question">
Yes
</label>
<label class = "radio">
<input type = "radio" name = "question">
No
</label>
</div>
</div>
<span class = "is-size-5">
Button Field
</span>
<div class = "field is-grouped">
<div class = "control">
<button class = "button is-link">Submit</button>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Form Fields with Icons
Bulma provides 2 types of modifiers on control class container.
has-icons-left
has-icons-right
You need to use other modifiers such as icon is-left class with has-icons-left class and icon is-right class with has-icons-right class along with the icon class.
The below simple example describes form fields with icons by using has-icons-left and has-icons-right classes −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Form Fields with Icons
</span>
<br>
<br>
<span class = "is-size-5">
Input Fields
</span>
<div class = "field">
<label class = "label">Name</label>
<div class = "control">
<p class = "control has-icons-left has-icons-right">
<input class = "input" type = "email" placeholder = "Enter user name">
<span class = "icon is-small is-left">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-small is-right">
<i class = "fas fa-check"></i>
</span>
</p>
</div>
</div>
<div class = "field">
<label class = "label">Email</label>
<div class = "control">
<p class = "control has-icons-left">
<input class = "input" type = "password" placeholder = "Enter your email id">
<span class = "icon is-small is-left">
<i class = "fas fa-envelope"></i>
</span>
</p>
</div>
</div>
<br>
<span class = "is-size-5">
Dropdown Field
</span>
<div class = "field">
<p class = "control has-icons-left">
<span class = "select">
<select>
<option selected>Players</option>
<option>Sachin Tendulkar</option>
<option>M S Dhoni</option>
</select>
</span>
<span class = "icon is-small is-left">
<i class = "fas fa-globe"></i>
</span>
</p>
</div>
<br>
<span class = "is-size-5">
Sizes of Input Fields
</span>
<div class = "field">
<label class = "label is-small">Small Input</label>
<div class = "control">
<p class = "control has-icons-left has-icons-right">
<input class = "input is-small" type = "email" placeholder = "Enter user name">
<span class = "icon is-small is-left">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-small is-right">
<i class = "fas fa-check"></i>
</span>
</p>
</div>
</div>
<div class = "field">
<label class = "label is-medium">Medium Input</label>
<div class = "control">
<p class = "control has-icons-left has-icons-right">
<input class = "input is-medium" type = "email" placeholder = "Enter user name">
<span class = "icon is-small is-left">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-small is-right">
<i class = "fas fa-check"></i>
</span>
</p>
</div>
</div>
<div class = "field">
<label class = "label is-large">Large Input</label>
<div class = "control">
<p class = "control has-icons-left has-icons-right">
<input class = "input is-large" type = "email" placeholder = "Enter user name">
<span class = "icon is-small is-left">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-small is-right">
<i class = "fas fa-check"></i>
</span>
</p>
</div>
</div>
</div>
</section>
</body>
</html>
Execute the above code and you will get the below output −
Form Addons and Form Group
By using form addons, you can easily prepend and append text or buttons to the text-based inputs. By adding prepended and appended content to an input field, you can add common elements to the user's input. The form controls can be added together by using has-addons modifier and group the form controls by using is-grouped modifier on the field container.
The below simple example describes use of form addons (using has-addons modifier) and form group (using is-grouped modifier) on the field container −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Form Addons
</span>
<br>
<br>
<span class = "is-size-5">
Search Box
</span>
<div class = "field has-addons">
<div class = "control">
<input class = "input" type = "text" placeholder = "Search your product">
</div>
<div class = "control">
<a class = "button is-info">Search</a>
</div>
</div>
<br>
<span class = "is-size-5">
Static Button
</span>
<div class = "field has-addons">
<p class = "control">
<input class = "input" type = "text" placeholder = "Your email id">
</p>
<p class = "control">
<a class = "button is-static">@gmail.com</a>
</p>
</div>
<br>
<span class = "is-size-5">
Dropdown
</span>
<div class = "field has-addons">
<div class = "control">
<div class = "select">
<select name = "country">
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select>
</div>
</div>
<div class = "control">
<button type = "submit" class = "button is-primary">Choose</button>
</div>
</div>
<br>
<span class = "title">
Form Group
</span>
<br>
<br>
<div class = "field is-grouped">
<p class = "control">
<a class = "button is-primary">Yes</a>
</p>
<p class = "control">
<a class = "button is-info">No</a>
</p>
</div>
<span class = "is-size-5">
Centered Form Group
</span>
<div class = "field is-grouped is-grouped-centered">
<p class = "control">
<a class = "button is-primary">Yes</a>
</p>
<p class = "control">
<a class = "button is-info">No</a>
</p>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
In the upcoming chapters of form, we have used variety of color classes such as is-primary, is-info, is-success, is-warning, is-danger, different types of sizes such as is-small, is-medium and is-large classes and states such as is-hovered, is-focused and is-rounded to display the input field.
bulma_form.htm
Advertisements