Bootstrapでチェックボックスやラジオボタンを実装する

HTML・CSS

公開日時: 2020-02-10 　更新日時: 2022-06-01

この記事でわかること

最新情報や関心のある情報を毎日お届け。 FEnetメールマガジンメルマガ登録はこちらから>>

入力フォームなどを作成する際、「チェックボックスやラジオボタンが簡単に実装できればな～」と思ったことはありませんか？そんなときに使えるのがBootstrapです。もちろんHTMLで実装することもできるのですが、Bootstrapを使うとよりお洒落なチェックボックスやラジオボタンを実装することができるのです。さっそくご紹介します。

システム エンジニア: BootstrapはHTML/CSS/JavaScriptで構成されるWebフレームワークでしたね。

プロジェクト リーダー: クオリティの高いデザインのサイトが簡単に作れるので、色んなWebサイトで使われていますよ。

【前提】
Bootstrapを利用する際は、BootstrapのCSSやJSをダウンロードし、HTMLのヘッダー内に読み込む必要があります。よく分からない……という方は、下記の記事を参考にしてみてください。

【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで

Bootstrapでチェックボックスを実装しよう

まずは、Bootstrapでチェックボックスを実装していきたいと思います。
チェックボックスを作成する際は、「.form-check」「.form-check-input」「.form-check-label」を使います。使い方は下記のとおりです。

チェックボックスの実装例1

※下記コードをbody内に記載してください。

<!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>

<!DOCTYPE html>

<head>

<title>sample</title>

</head>

<body>

<form>

<h3>入力フォーム</h3>

</div>

</div>

</div>

</form>

</div>

</body>

</html>

では、実際にブラウザで見ていきましょう。

【ブラウザで見た画面】

ちゃんと複数選択できるチェックボックスに仕上がっています。とはいえ、「何か味気ないチェックボックスだな…」と思った方もいるのではないでしょうか。そんな方は、「.custom-controll」「.custom-checkbox」を使うことをおすすめします。

チェックボックスの実装例2

こちらのコードも実装してみましょう。

    <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>

<form>

<h3>入力フォーム</h3>

</div>

</div>

</div>

</form>

</div>

label要素のclassが「custom」になっていることが分かると思います。
それでは、こちらもブラウザでチェックしていきましょう。

【ブラウザで見た画面】

選択したときに周りが青くなり、選択済になると完全に青くなっています。いろいろなサイトでよく見る感じに仕上がりました。
チェックボックスの実装は以上です。

Bootstrapでラジオボタンを実装しよう

では次に、Bootstrapでラジオボタンを実装していきたいと思います。
ラジオボタンもチェックボックスと同様、「.form-check」「.form-check-input」「.form-check-label」を使っていきます。コードは以下のとおりです。

ラジオボタンの実装例1

    <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>

<form>

<h3>入力フォーム</h3>

</div>

</div>

</div>

</form>

</div>

「type」がradioに変わっていることが分かるかと思います。
ブラウザで見ていきましょう。

【ブラウザで見た画面】

しっかりとラジオボタンが出来上がりました。
上記のとおり、「checked」を入れるとデフォルトで選択させることもできます。

ラジオボタンの実装例2

また、先ほどと同様に「custom」を使うとちょっとお洒落なラジオボタンに仕上がります。

    <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>

<form>

<h3>入力フォーム</h3>

</div>

</div>

</div>

</form>

</div>

【ブラウザで見た画面】

以上で、ラジオボタンの実装は完了です。
もっと知りたい方は、Bootstrapの公式サイトも参考にしてみてください。

システム エンジニア: 簡単にお洒落な選択肢が作成できましたね。

プロジェクト リーダー: Bootstrapはユーザーにとっても使いやすくデザインされています。

Bootstrapでサクッとお洒落なフォームを作ろう

今回は、Bootstrapでチェックボックスとラジオボタンの実装をしていきました。申し込みフォームや商品のアンケートなど、フォームのデザインは思っている以上にユーザーにとって重要なポイントです。ユーザー受けするお洒落なフォームを作成したい方は、ぜひBootstrapを活用してみましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

Bootstrapでチェックボックスやラジオボタンを実装する

Bootstrapでチェックボックスを実装しよう

チェックボックスの実装例1

チェックボックスの実装例2

Bootstrapでラジオボタンを実装しよう

ラジオボタンの実装例1

ラジオボタンの実装例2

Bootstrapでサクッとお洒落なフォームを作ろう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

Bootstrapでチェックボックスやラジオボタンを実装する

Bootstrapでチェックボックスを実装しよう

チェックボックスの実装例1

チェックボックスの実装例2

Bootstrapでラジオボタンを実装しよう

ラジオボタンの実装例1

ラジオボタンの実装例2

Bootstrapでサクッとお洒落なフォームを作ろう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

【Webフレームワークの種類】画面デザインが簡単にできるBootstrapとは

Bootstrapで日本語を美しく表示するためのツール

Bootstrap4でフォームを作成する方法と新設された機能

Bootstrapのinput-groupを活用してフォームをスタイリッシュにする

Bootstrapにおけるtableの使い方は？テーブル全体の背景色やヘッダ部のみの背景色を指定