【HTML入門】初心者でも作れるフォーム(form)のチェックボックス

※当サイトではアフィリエイト広告を利用しています。

HTMLとPHPヘッダー HTML

ウェブサイトを制作する上で、欠かせないのがフォーム。

フォームを構成する部品には、テキストボックスだったり、ボタン、ラジオボタンやチェックボックスなどがあります。

最近のフォームには、入力しやすい工夫が施されているものもあり、それを実現するためには高度な技術が必要だったりします。

高度な技術については、他のブロガーさんにお任せするとして、今回は、フォームを構成する部品の一つ、チェックボックスについて解説していきます。

フォームを作成する上で、基本的な知識となりますので、肩を力を抜いて読んでいただけると幸いです。

inputタグ

フォームを作成するためには、formタグを使います。

formタグについては、下のリンクをご覧ください。

【HTML/PHP】ウェブサイトのフォーム(form)を制作してみる
ウェブサイトで会社やお店とコンタクトを取るのに使われるフォーム。ウェブサイトを制作していくうえで、フォームは重要な役割を果たします。そんなフォームを作成する基本的な方法を解説します。まずはformタグを理解して、フォームの作成を始めましょう。

formタグの内側にフォームを構成する部品を作っていくわけですが、その部品を作るのにinputタグを使います。

type属性をcheckboxに

inputタグのtype属性に「checkbox」と指定すれば、それだけでチェックボックスを作成することができます。

<form>
    <input type="checkbox">英語
    <input type="checkbox">数学
    <input type="checkbox">国語
</form>

英語、数学、国語のチェックボックスを作成してみました。

formタグの内側に、inputタグを。

そして、type属性を「checkbox」に。

とても簡単にチェックすボックスが作れてしまいます。

実際に表示させると下のようになります。

英語 数学 国語

name属性

実際のフォームでは入力されたデータを他ページへ送信することが多いと思います。

送信する時に重要な役割を果たすのがname属性です。

チェックボックスは通常、複数用意することが想定されます。

複数のチェックボックスを1つのグループとして、認識させるためには、このname属性に同じ値を指定します。

そうすると、他ページへ送信される際、配列として送信することができます。

その配列の値として、次に説明するvalue属性で指定した値が使われるわけです。

PHP言語を使いフォームを構築する場合、複数のチェックボックスを1つのグループとし、配列データとして送信するためには、name属性の値を配列表記にしなければなりません。

name属性に指定した値の後に「[]」をつけるのを忘れないようにしましょう。

value属性

value属性で指定される値が実際に送信される値となります。

チェックボックスのname属性が複数同一のものがある場合は、それらが一つのグループと見なされ、配列データとして他ページへ送信されます。

その送信されるデータを指定するのがvalue属性というわけです。

checked属性

checked属性は値を持たず、指定することでチェックされて表示されるようになります。

ウェブサイトが最初に表示された時に、見ている人の手間を考え、チェックされていた方がいい場合とそうでない場合があると思います。

時と場合によって、使い分けるようにしましょう。

PHP具体例

チェックボックスを使ったフォーム送信の仕組みを、具体的な例で見ていきましょう。

PHPでコーディングしてみることにします。

下のファイルをsample.phpと名前を付け、xampp環境で実行しました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
    <form action="result.php" method="post">
        <div>
            <input type="checkbox" name="kamoku[]" value="英語" checked><span>英語</span>
            <input type="checkbox" name="kamoku[]" value="数学" checked><span>数学</span>
            <input type="checkbox" name="kamoku[]" value="国語" checked><span>国語</span>
            <input type="checkbox" name="kamoku[]" value="理科"><span>理科</span>
            <input type="checkbox" name="kamoku[]" value="社会"><span>社会</span>
        </div>
        <input type="submit" value="送信">
    </form>
</body>
</html>

5つのチェックボックスのname属性に「kamoku[]」と配列の値を指定しています。

チェックが入っていれば、「kamoku[]」配列にvalueの値が格納されてデータが送信される仕組みになっています。

次にデータを受け取る側のコードを見てみます。

下のサンプルコードをresult.phpとファイル名を付けて保存します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body style="margin:100px;">
    <p>
        <?php
        foreach (@$_POST['kamoku'] as $data) {
            echo '<div>'. $data . '</div>';
        }
        ?>
    </p>
</body>
</html>

配列データを表示させるために、foreachで配列データを抜き出し、divタグで囲んでウェブサイトに表示しています。

それでは、実際にウェブサイトに表示させてみましょう。

チェックボックスサンプル
sample.php

checked属性が付いた「英語」、「数学」、「国語」にチェックが入った状態で表示されることにも注目しましょう。

「英語」、「数学」、「国語」にチェックが入った状態のまま、送信ボタンをクリックします。

チェックボックスサンプル結果
result.php

上のようにチェックされたデータが表示されることが確認できます。

他のフォーム部品と比べ、大きく違うところは、name属性に配列を指定するところくらいでしょうか。

それさえ注意してしまえば、簡単にチェックボックスを作成できると思います。

その他フォーム部品についても下にリンクを貼っておきますので、ぜひ参照してください。

【HTML/PHP】POSTとGETを使ってサーバーにリクエスト
フォームはウェブサイトに必要不可欠なものです。そんなフォームを制作していく上で、理解が必要になってくるのが、リクエストとレスポンスの違い、またGET送信とPOST送信の違いと使い方です。この記事ではGET送信、POST送信について、解説しています。
【HTML/PHP】ウェブサイトのフォーム(form)を制作してみる
ウェブサイトで会社やお店とコンタクトを取るのに使われるフォーム。ウェブサイトを制作していくうえで、フォームは重要な役割を果たします。そんなフォームを作成する基本的な方法を解説します。まずはformタグを理解して、フォームの作成を始めましょう。
【HTML/PHP】(フォーム)inputタグでラジオボタンを作る
フォームの構成要素としてよく見かけるラジオボタン。ラジオボタンは、inputタグのtype属性を指定することで簡単に作成できます。ただ、押さえておかなければならない注意すべきポイントもあります。今回の記事では、基礎から実践まで、簡単に解説します。
【HTML/PHP】inputでフォームのテキストボックス作成
ウェブサイトを制作すれば、なくてはならない存在でもあるフォーム。そして、フォームの構成要素の中でも欠かすことができないのが、テキストボックスです。この記事では、よく見かけることの多いテキストボックスの作成方法についてとても簡単に解説します。
【HTML】selectでセレクトボックス(プルダウンメニュー)
フォームに何か入力する時、セレクトボックス(プルダウンメニュー)はよく見る部品ですし、必要不可欠な部品の一つです。このセレクトボックス(プルダウンメニュー)をHTMLのselectタグとoptionタグで作成する方法を解説します。
タイトルとURLをコピーしました