HTMLフォームでチェックボックスを使用する方法をわかりやすく解説
HTMLフォームを使えば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中に各種フォーム要素を配置することで、テキスト入力、ラジオボタン、送信ボタンなど、さまざまな形式の入力欄を作成できます。
チェックボックスとは
チェックボックスは、複数の選択肢から複数の項目を選ばせたい場合に使用するフォーム要素です。ラジオボタンが「1つだけ選択」であるのに対し、チェックボックスは「該当するものすべてにチェックを入れられる」点が特徴です。
チェックボックスも他の入力要素と同様に<input>タグで作成しますが、type属性の値として「checkbox」を指定します。
チェックボックスで使える主な属性
| No. | 属性と説明 |
| 1 | type 入力コントロールの種類を示します。チェックボックスの場合は「checkbox」を指定します。 |
| 2 | name コントロールに名前を付けます。この名前はサーバーに送信され、値を識別するために使われます。 |
| 3 | value チェックボックスが選択されたときにサーバーへ送信される値です。 |
| 4 | checked 初期状態で選択済みにしたい場合に「checked」を指定します。 |
サンプルコード
以下のコードを実行すると、HTMLフォームでのチェックボックスの動作を確認できます。プログラミング言語の選択画面を想定したシンプルな例です。
<!DOCTYPE html> <html> <head> <title>HTMLチェックボックス</title> </head> <body> <p>使用している言語を選んでください：</p> <form> <input type="checkbox" name="language1" value="java">Java <br> <input type="checkbox" name="language2" value="php">PHP <br> <input type="checkbox" name="language3" value="cpp">C++ <br> </form> </body> </html>
実装時のポイント
実際にチェックボックスを実装する際は、以下の点に注意するとより使いやすいフォームになります。
- name属性の設定： 同じグループのチェックボックスでも、それぞれ異なるnameを付けるか、配列形式（例：language[]）にしてサーバー側で複数の値を受け取れるようにします。
- value属性の明示： valueを省略すると「on」という値が送信されるため、判別しやすい値を必ず指定しましょう。
- label要素との併用： <label>タグでテキストを囲むと、文字部分をクリックしてもチェックできるようになり、操作性が向上します。
このように、type属性に「checkbox」を指定するだけで簡単にチェックボックスを作成できます。アンケートフォームや設定画面など、複数選択が必要な場面でぜひ活用してください。
-
HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法
テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html> <body&
-
HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順
HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep