Bulma 表单控件
说明
Bulma 包含不同类型的表单控件类，用于创建各种表单。它支持以下表单控件类-
.label
.input
.textarea
.select
.checkbox
.radio
.button
.help
表单控件类可以包装在
.control类容器中，并使用
.field容器，以在表单控件类之间保持空间。
下面的简单示例描述了一些表单字段的使用，例如输入、下拉、复选框和单选按钮字段-
<!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>
它显示以下输出-
带有图标的表单域
Bulma 在
control 类容器上提供了 2 种修饰符。
has-icons-left
has-icons-right
您需要使用其他修饰符，例如
icon is-left 类与
has-icons-left 类和
icon is-right 类使用
has-icons-right 类和
icon 类。
下面的简单示例通过使用
has-icons-left 和
has-icons-right 类来描述带有图标的表单字段-
<!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>
执行上面的代码，你会得到下面的输出-
表单插件和表单组
通过使用表单插件，您可以轻松地在基于文本的输入中添加和附加文本或按钮。通过向输入字段添加前置和附加内容，您可以向用户的输入添加通用元素。可以使用
has-addons 修饰符将表单控件添加到一起，并使用字段容器上的
is-grouped 修饰符对表单控件进行分组。
下面的简单示例描述了在字段容器上使用表单插件（使用
has-addons 修饰符）和表单组（使用
is-grouped 修饰符）-
<!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>
它显示以下输出-
在接下来的表单章节中，我们使用了各种颜色类别，例如
is-primary、
is-info、
is-success、
is-warning、
is-danger、
is-small、
is-medium等不同类型的尺寸> 和
is-large 类和状态，例如
is-hovered、
is-focused 和
is-rounded显示输入字段。
