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

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

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

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

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

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

inputタグ
type属性をcheckboxに
name属性
value属性
checked属性
PHP具体例

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タグで囲んでウェブサイトに表示しています。

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