Bulma-form-controls
提供：Dev Guides
Bulma-フォームコントロール
説明
Bulmaには、さまざまなフォームを作成するためのさまざまなタイプのフォームコントロールクラスが含まれています。 次のフォーム制御クラスをサポートしています-
- 。ラベル
- 。入力
- .textarea
- .select
- .checkbox
- 。無線
- 。ボタン
- 。助けて
フォームコントロールクラスは_.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-hovered 、 is-focused 、 is-rounded_などの_is-large_クラスと状態。
