利用規約に同意すると送信できるチェックボックスを作る方法
利用規約への同意を確認してから送信できるチェックボックスを作る方法を紹介します。このサンプルでは、「利用規約に同意します」のチェックボックスと送信ボタンを配置し、チェックが入っていない状態では送信ボタンを無効にします。利用者がチェックを入れると送信ボタンが有効になり、チェックを外すと再び無効になる仕組みです。
HTMLでチェックボックス、送信ボタン、送信完了を確認するためのメッセージを作成し、CSSでチェック項目やボタンのデザイン、有効・無効状態の見た目を設定します。JavaScriptではチェックボックスの状態を確認し、checkedの値に応じて送信ボタンのdisabledを切り替えます。送信ボタンをクリックすると、このサンプルでは実際にデータを送信する代わりに「送信できました。」という確認用メッセージを表示します。
利用規約への同意だけでなく、プライバシーポリシーの確認や申し込み条件への同意など、チェックを必須にしてから次の操作を許可したい場合にも応用できます。画面幅640px以下ではチェック項目の余白や文字サイズ、チェックボックスと送信ボタンのサイズを調整しているため、スマートフォン・タブレット・PCで利用できます。なお、このサンプルは送信ボタンの有効・無効を切り替えるフロントエンド側の動作例であり、サーバーへのフォーム送信処理は実装していません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
利用規約に同意すると、送信ボタンを押せるようになります。
「利用規約に同意します」にチェックを入れると送信ボタンが有効になり、クリックすると送信完了のサンプルメッセージが表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>利用規約に同意すると送信できるチェックボックス</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 利用規約への同意エリア全体 -->
<div class="agree-checkbox-submit_wrap">
<!-- チェックボックスを囲むエリア -->
<div class="agree-checkbox-submit_box">
<!-- チェックボックスとラベル -->
<label
class="agree-checkbox-submit_label"
for="agree-checkbox-submit_check">
<input
class="agree-checkbox-submit_input"
id="agree-checkbox-submit_check"
type="checkbox">
<span>
利用規約に同意します
</span>
</label>
</div>
<!-- 同意するまで無効になっている送信ボタン -->
<button
class="agree-checkbox-submit_button"
id="agree-checkbox-submit_button"
type="button"
disabled>
送信する
</button>
<!-- 送信ボタンを押したときに表示する確認メッセージ -->
<div
class="agree-checkbox-submit_result"
id="agree-checkbox-submit_result"
role="status"
aria-live="polite">
送信できました。
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで利用規約への同意を確認するチェックボックス、最初は無効になっている送信ボタン、送信ボタンを押したあとに表示する確認メッセージを作成します。CSSではチェック項目や送信ボタン、確認メッセージの見た目を設定し、JavaScriptでチェック状態に応じて送信ボタンの有効・無効を切り替えます。
ページを開いた直後は送信ボタンにdisabledが設定されているため、ボタンを押すことはできません。「利用規約に同意します」にチェックを入れるとJavaScriptがチェック状態を取得してdisabledを解除し、送信ボタンを押せる状態にします。チェックを外した場合は再び送信ボタンが無効になります。
このサンプルでは実際のフォームデータをサーバーへ送信する処理は実装していません。送信ボタンをクリックすると、動作例として「送信できました。」という確認メッセージを表示します。外部ライブラリや外部サービス、APIなどは使用しておらず、APIキーやURLなど利用者自身で用意する情報もありません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは、利用規約への同意を確認するチェックボックス、送信ボタン、確認メッセージを記述するファイルです。チェックボックスにはid="agree-checkbox-submit_check"、送信ボタンにはid="agree-checkbox-submit_button"が設定されています。送信ボタンには最初からdisabledを指定し、チェックされるまでは操作できない状態にしています。「利用規約に同意します」というラベルや「送信する」というボタン名、「送信できました。」という確認メッセージを変更する場合もindex.htmlを編集します。
style.cssは、同意エリア全体、チェック項目、チェックボックス、送信ボタン、確認メッセージのデザインを設定するファイルです。送信ボタンの通常状態と:disabledによる無効状態で背景色や文字色を変更しているため、現在ボタンを操作できるかどうかを見た目でも確認できます。確認メッセージは最初にdisplay:noneで非表示にし、is-showクラスが付いた場合だけdisplay:blockで表示します。画面幅640px以下のサイズ調整もstyle.cssで行っています。
script.jsは、チェックボックスと送信ボタンの状態を制御するファイルです。チェックボックスのchangeイベントでcheckedを確認し、チェックされている場合は送信ボタンを有効、チェックされていない場合は無効にします。また、チェック状態を変更したときは表示済みの確認メッセージからis-showを削除して非表示へ戻します。送信ボタンをクリックすると確認メッセージへis-showを追加して表示します。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsの3ファイルを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">からstyle.cssを読み込み、ページ下部の<script src="script.js"></script>からscript.jsを読み込む構成です。3ファイルを配置したら、sample/index.htmlをブラウザで開きます。
ページを開いた直後は「送信する」ボタンが無効になっています。「利用規約に同意します」のチェックボックスへチェックを入れると送信ボタンが有効になり、クリックできるようになります。チェックを外すと再び無効状態へ戻ります。
有効になった「送信する」ボタンをクリックすると、「送信できました。」という確認メッセージが表示されます。ただし、この処理は実際のフォーム送信を再現するための表示例です。配布コードにはform要素、送信先、通信処理、サーバー側の受信処理などは含まれていないため、このコードだけで入力データが外部へ送信されることはありません。
カスタマイズできる内容
index.htmlでは、「利用規約に同意します」というチェック項目の文章、「送信する」というボタンの文字、「送信できました。」という確認メッセージを変更できます。利用規約以外にも、プライバシーポリシーへの同意や申し込み条件の確認など、用途に合わせて表示する文章を変更できます。
style.cssでは、同意エリア全体の最大横幅・余白・枠線・角丸・背景色、チェック項目の余白や背景色、チェックボックスの大きさやチェック時の色、送信ボタンの高さ・色・角丸、無効時の背景色と文字色、確認メッセージの背景色・文字色・余白などを変更できます。.agree-checkbox-submit_button:disabledを編集すると、利用規約へ同意していない状態の送信ボタンのデザインを変更できます。
script.jsでは、チェックボックスの状態によって送信ボタンのdisabledを切り替える処理と、送信ボタンをクリックしたときに確認メッセージへis-showを追加する処理を記述しています。チェック状態を変更した際に確認メッセージを非表示へ戻す処理もscript.jsにあります。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:700px;
同意エリア全体の最大横幅です。値を大きくすると横に広く表示でき、小さくすると全体が狭くなります。
margin:40px auto;
同意エリア全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。
padding:32px;
同意エリア全体の内側余白です。値を大きくすると外枠とチェック項目・送信ボタンとの間隔が広がります。
border:1px solid #e5e7eb;
同意エリア全体の枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
同意エリア全体の角丸です。値を大きくすると丸みが強くなります。
margin:0 0 24px;
チェック項目と送信ボタンの間隔です。24pxを大きくすると両者の間隔が広がります。
padding:20px;
チェック項目を囲むエリアの内側余白です。値を大きくするとチェックボックスや文字と枠線との間隔が広がります。
border-radius:12px;
チェック項目を囲むエリアの角丸です。値を大きくすると丸みが強くなります。
gap:12px;
チェックボックスと「利用規約に同意します」という文字との間隔です。値を大きくすると両者の間隔が広がります。
font-size:16px;
チェック項目の文字サイズです。値を大きくすると文字が大きくなります。
line-height:1.6;
チェック項目の行間です。文章が複数行になった場合の行間を調整できます。
width:22px;・height:22px;
チェックボックスの横幅と高さです。値を大きくするとチェックボックスが大きくなります。
outline:3px solid rgba(11,107,255,.22);
キーボード操作でチェックボックスや送信ボタンへフォーカスしたときに表示する枠線です。3pxを大きくするとフォーカス枠が太くなります。
outline-offset:3px;
チェックボックスまたは送信ボタンとフォーカス枠との間隔です。値を大きくするとフォーカス枠が外側へ離れます。
min-height:52px;
送信ボタンの最小高さです。値を大きくするとボタンが高くなります。
padding:14px 20px;
送信ボタンの内側余白です。14pxが上下、20pxが左右を表します。
border-radius:10px;
送信ボタンと確認メッセージで使用している角丸です。値を大きくすると丸みが強くなります。
transition:background-color .3s ease, color .3s ease;
送信ボタンの背景色と文字色が切り替わる時間です。.3sは0.3秒を表し、値を大きくするとゆっくり、小さくすると速く変化します。
margin:20px 0 0;
確認メッセージの上側余白です。20pxを大きくすると送信ボタンとの間隔が広がります。
padding:14px 16px;
確認メッセージの内側余白です。14pxが上下、16pxが左右を表します。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。同意エリア全体へwidth:100%とmax-width:700pxを設定しているため、最大700pxを基準にしながら画面の横幅に合わせて縮小します。送信ボタンにもwidth:100%を指定しているため、同意エリアの横幅に合わせてボタンも伸縮します。
画面幅640px以下では@media (max-width:640px)を使用し、同意エリア全体の内側余白を24px 18px、チェック項目の内側余白を18px 16pxへ変更します。チェックボックスと文字の間隔は10px、ラベルの文字サイズは15px、チェックボックスは20px四方へ調整します。送信ボタンも最小高さ48px、内側余白12px 16px、文字サイズ15pxへ変更するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント