フォームにおけるチェックボックスの作り方｜HTMLやフォーム作成ツールを紹介

チェックボックスは、複数の選択肢から複数選択が可能な入力項目です。フォームでチェックボックスを上手に活用したいと思っている方も多いのではないでしょうか。

「フォームでチェックボックスを活用したい」
「実際にフォームでチェックボックスを作る方法を知りたい」

こんな疑問に答えるために、本記事では、フォームにおけるチェックボックスの作り方や、HTMLやフォーム作成ツールを使用する具体的な方法を詳しく解説します。

また、フォーム作成ツールを使った手軽な方法から、HTMLを用いたカスタマイズ方法まで幅広く紹介します。目的に合わせたチェックボックスの作成方法を学び、アンケートやフィードバック収集をより効率的に行いましょう。

豊富な選択肢からフォームを作成したい方には、フォーム作成ツール「formrun（フォームラン）」がおすすめです。

「formrun（フォームラン）」は、デザイン性や機能、セキュリティ面で優れており、次の特徴があります。

デザイン性の高いテンプレートが120種類以上あり、さまざまなニーズに対応
セキュリティに強く、大企業もビジネスシーンで利用可能
お問い合わせ管理やメール対応、通知設定などの機能も充実

無料でほとんどの機能を試せるため、興味がある方はぜひチェックしてみてください。

チェックボックス付きのフォームを簡単に作成する

入力フォームはチェックボックスを含めて3種類
フォームでチェックボックスを作る2つの方法
【補足】HTMLにおけるチェックボックスの選択機能
チェックボックスのHTML作成・デザインならフォーム作成ツール「formrun」もおすすめ！
入力フォームのチェックボックスを上手に活用しよう！

入力フォームはチェックボックスを含めて3種類

入力フォームと呼ばれる項目は、主に次の3種類です。

チェックボックス
ラジオボタン
セレクトボックス

それぞれ解説します。

チェックボックス

1つ目の入力項目は、チェックボックスです。

チェックボックスは、ユーザーが複数の選択肢から複数選択ができる入力フォームです。各選択肢の横に小さな四角いボックスが表示され、ユーザーがクリックすることで選択した状態を示すチェックマークが表示されます。例えば、興味のある趣味を選ぶ項目で使用されます。

ラジオボタン

2つ目の入力項目は、ラジオボタンです。

ラジオボタンは、ユーザーが複数の選択肢から一つだけを選択できる入力フォームです。各選択肢の横に小さな丸いボタンが表示され、ユーザーがクリックすることで選択した状態を示す点が表示されます。例えば、性別や年代を選ぶ項目で使用されます。

セレクトボックス

3つ目の入力項目は、セレクトボックスです。

セレクトボックスは、ユーザーがドロップダウンリストから一つの選択肢を選択できる入力フォームです。セレクトボックスをクリックすると、選択肢のリストが表示され、ユーザーが選びたい項目をクリックすることで選択が確定されます。例えば、国や地域を選ぶ項目で使用されます。

フォームでチェックボックスを作る2つの方法

フォームでチェックボックスを作るには、次の2つの方法があります。

フォーム作成ツールで作る
HTMLで作る

それぞれ解説します。

フォーム作成ツールで作る

1つ目の作成方法は、フォーム作成ツールで作る方法です。

フォーム作成ツールを使用すると、プログラミングの知識がなくても簡単にチェックボックスを追加できます。

例えば、GoogleフォームやMicrosoft Forms、formrunなどのツールを使えば、ドラッグ＆ドロップで項目を追加し、直感的にチェックボックスを設定できます。また、回答の集計や分析もツール内で行えるため便利です。

▼ クリックだけでフォームを作成するならformrun
とにかく早く簡単にフォームを作成したいが、デザイン性や機能、セキュリティが気になる方は「formrun」がおすすめです。専門知識は不要で、フォーム作成から問い合わせ管理まで一括で可能なツールです。無料でフォーム作成ができますので、気軽にさわってみてください。

フォーム作成ツールで作る

HTMLで作る

2つ目の作成方法は、HTMLで作る方法です。

HTMLを使用すると、よりカスタマイズ性の高いフォームを作成できます。簡単なコード例は次のとおりです。

<form>
<label><input type="checkbox" name="option1" value="1"> 選択肢1</label><br>
<label><input type="checkbox" name="option2" value="2"> 選択肢2</label><br>
<label><input type="checkbox" name="option3" value="3"> 選択肢3</label>
</form>

上記のように、HTMLタグを用いてチェックボックスを作成し、必要に応じてCSSやJavaScriptでスタイルや動作を調整できます。

【補足】HTMLにおけるチェックボックスの選択機能

最後に、HTMLで作成するチェックボックスの選択機能に関して、複数選択と選択制限の2つを解説します。

チェックボックスの複数選択はHTMLのデフォルト機能

HTMLのチェックボックスに搭載されているデフォルト機能では、ユーザーが複数の選択肢を選べるようになっています。これは、ユーザーが複数の回答を選ぶ必要がある場合に便利です。例えば、複数の興味や関心事を選ぶアンケートなどに利用されます。

チェックボックスで1つだけの選択制限はHTMLでは設定できない機能

HTMLのみでは、チェックボックスの選択を一つだけに制限することはできません。しかし、JavaScriptを使用することで、ユーザーが一つのチェックボックスしか選択できないようにすることが可能です。以下にJavaScriptのコード例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックスの選択制限</title>
<script>
function onlyOneCheckbox(checkbox) {
var checkboxes = document.getElementsByName('singleChoice');
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false;
});
}
</script>
</head>
<body>
<form>
<label><input type="checkbox" name="singleChoice" value="1" onclick="onlyOneCheckbox(this)"> 選択肢1</label><br>
<label><input type="checkbox" name="singleChoice" value="2" onclick="onlyOneCheckbox(this)"> 選択肢2</label><br>
<label><input type="checkbox" name="singleChoice" value="3" onclick="onlyOneCheckbox(this)"> 選択肢3</label>
</form>
</body>
</html>