Bootstrapでチェックボックスやラジオボタンを実装する
入力フォームなどを作成する際、「チェックボックスやラジオボタンが簡単に実装できればな～」と思ったことはありませんか？そんなときに使えるのがBootstrapです。もちろんHTMLで実装することもできるのですが、Bootstrapを使うとよりお洒落なチェックボックスやラジオボタンを実装することができるのです。さっそくご紹介します。
- SE
- BootstrapはHTML/CSS/JavaScriptで構成されるWebフレームワークでしたね。
- PL
- クオリティの高いデザインのサイトが簡単に作れるので、色んなWebサイトで使われていますよ。
Bootstrapを利用する際は、BootstrapのCSSやJSをダウンロードし、HTMLのヘッダー内に読み込む必要があります。よく分からない……という方は、下記の記事を参考にしてみてください。
目次
Bootstrapでチェックボックスを実装しよう
まずは、Bootstrapでチェックボックスを実装していきたいと思います。
チェックボックスを作成する際は、「.form-check」「.form-check-input」「.form-check-label」を使います。使い方は下記のとおりです。
チェックボックスの実装例1
※下記コードをbody内に記載してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <div class="container"> <form> <h3>入力フォーム</h3> <div class="form-group"> <label class="control-label">設問1</label> <div class="form-check"> <input class="form-check-input" type="checkbox" id="check1a" checked> <label class="form-check-label" for="check1a">選択肢1</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="check1b"> <label class="form-check-label" for="check1b">選択肢2</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="check1c"> <label class="form-check-label" for="check1c">選択肢3</label> </div> </div> </form> </div> </body> </html> |
では、実際にブラウザで見ていきましょう。
【ブラウザで見た画面】
ちゃんと複数選択できるチェックボックスに仕上がっています。とはいえ、「何か味気ないチェックボックスだな…」と思った方もいるのではないでしょうか。そんな方は、「.custom-controll」「.custom-checkbox」を使うことをおすすめします。
チェックボックスの実装例2
こちらのコードも実装してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <form> <h3>入力フォーム</h3> <div class="form-group"> <label class="control-label">設問1</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="custom-check-1"> <label class="custom-control-label" for="custom-check-1">選択肢1</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="custom-check-2"> <label class="custom-control-label" for="custom-check-2">選択肢2</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="custom-check-3"> <label class="custom-control-label" for="custom-check-3">選択肢3</label> </div> </div> </form> </div> |
label要素のclassが「custom」になっていることが分かると思います。
それでは、こちらもブラウザでチェックしていきましょう。
【ブラウザで見た画面】
選択したときに周りが青くなり、選択済になると完全に青くなっています。いろいろなサイトでよく見る感じに仕上がりました。
チェックボックスの実装は以上です。
Bootstrapでラジオボタンを実装しよう
では次に、Bootstrapでラジオボタンを実装していきたいと思います。
ラジオボタンもチェックボックスと同様、「.form-check」「.form-check-input」「.form-check-label」を使っていきます。コードは以下のとおりです。
ラジオボタンの実装例1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <form> <h3>入力フォーム</h3> <div class="form-group"> <label class="control-label">設問1</label> <div class="form-check"> <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked> <label class="form-check-label" for="radio1a">選択肢1</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="radio2" id="radio1b"> <label class="form-check-label" for="radio1b">選択肢2</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="radio3" id="radio1c"> <label class="form-check-label" for="radio1c">選択肢3</label> </div> </div> </form> </div> |
「type」がradioに変わっていることが分かるかと思います。
ブラウザで見ていきましょう。
【ブラウザで見た画面】
しっかりとラジオボタンが出来上がりました。
上記のとおり、「checked」を入れるとデフォルトで選択させることもできます。
ラジオボタンの実装例2
また、先ほどと同様に「custom」を使うとちょっとお洒落なラジオボタンに仕上がります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <form> <h3>入力フォーム</h3> <div class="form-group"> <label class="control-label">設問1</label> <div class="custom-control custom-radio"> <input type="checkbox" class="custom-control-input" id="custom-radio-1"> <label class="custom-control-label" for="custom-radio-1">選択肢1</label> </div> <div class="custom-control custom-radio"> <input type="checkbox" class="custom-control-input" id="custom-radio-2"> <label class="custom-control-label" for="custom-radio-2">選択肢2</label> </div> <div class="custom-control custom-radio"> <input type="checkbox" class="custom-control-input" id="custom-radio-3"> <label class="custom-control-label" for="custom-radio-3">選択肢3</label> </div> </div> </form> </div> |
【ブラウザで見た画面】
以上で、ラジオボタンの実装は完了です。
もっと知りたい方は、Bootstrapの公式サイトも参考にしてみてください。
- SE
- 簡単にお洒落な選択肢が作成できましたね。
- PL
- Bootstrapはユーザーにとっても使いやすくデザインされています。
Bootstrapでサクッとお洒落なフォームを作ろう
今回は、Bootstrapでチェックボックスとラジオボタンの実装をしていきました。申し込みフォームや商品のアンケートなど、フォームのデザインは思っている以上にユーザーにとって重要なポイントです。ユーザー受けするお洒落なフォームを作成したい方は、ぜひBootstrapを活用してみましょう。
