前回、簡易的なフォームを作成して、裏側で起きている仕組みについて解説しました。

今回と次回は、もう少し一般的なフォームに近づけて詳しく説明していきます。

アンケートフォームや会員登録ページでよく見る、「パスワードの入力」や「入力以外の要素」の扱い方について理解していきましょう。

formタグの属性

前回も使いましたが、入力フォームはfromタグで記述します。formタグは、ユーザーが入力したデータをサーバーに送信するときに使用します。

アンケートフォームの作成では、2つ属性を使用していきます。

一つ目はaction属性です。この属性はformに入力されたデータをどこに送信するのか、送信先を指定するときに使用します。

二つ目はmethod属性です。この属性はformに入力されたデータをどのようにして送信するか、送信方法を指定するときに使用します。「method」は方法という意味で、formでは送信方法を指すと覚えておいてください。

このmethodですが、getとpostという方法があります(詳細は第7回参照)。

大まかな違いとしては、getは送信されるデータをURLの後ろにくっつけて送信する方法で、postはくっつけないで送信する方法です。

なので、URLの表示されてしまうとまずいデータ(個人情報など)を使用するときはpost送信するようにしましょう。

何も指定しないと、get送信になりますのでご注意ください。

サンプルソースコード

では実際に使用してみましょう。

テキストボックス、セレクトボックス、ラジオボタン、送信ボタンを作っていきます。

<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8"><title></title></head>
<body>
<form action="" method="post">
<div>
<!-- テキストボックス -->メール:<input type="email" name="email" ><br>
<!-- パスワード用テキストボックス -->パスワード:<input type="password" name="password" ><br>
</div>
<div>
<!-- ラジオボタン -->
<input type="radio" name="region" value="japan">日本
<input type="radio" name="region" value="america">アメリカ
<input type="radio" name="region" value="china">中国
</div>
<div>
<!-- セレクトボックス -->
<select name="list">
<option value="item1">アイテム1</option>
<option value="item2" selected>アイテム2</option>
<option value="item3">アイテム3</option>
</select>
</div>
<input type="submit" value="送信">
</body>
</html>

実行結果

上記のサンプルを実行すると以下のようなフォームが表示されます。

実行結果

以下、順に解説していきましょう。

inputタグ

メール、パスワードの入力欄

前回の復習になりますが、名前やメールアドレス、パスワードなどの欄を作りたいときは、「input」タグで作成します。type属性は必ず指定するようにしましょう。

例えば、メールだとemail、名前だとtextになります。Passwordを指定すると、入力した文字が黒丸になります。名前に関しては、name属性を指定するようにしておきましょう。

これら欄に入力されたデータは、プログラム内でこの属性を指定して呼び出すことになるので重要です。例えばメールアドレスだとemailと言った感じです。

セレクトボックス

セレクトボックス

上記のサンプルでは、セレクトボックスというものも使用しています。その名の通り、選ぶ欄を作ることができます。「select」タグと「option」タグを使用します。

value属性では、サーバに送信する実際の値を指定します。ですので、上のソースコードでは、アイテム2が選ばれても実際に送信されるデータの中身は「item2」になります。

また、「selected」を使用することで、最初に表示されている項目を指定することができます。

ラジオボタン

ラジオボタン

ラジオボタンは上記のような選択画面です。

今回は使用していませんが、「checked」を使用することでデフォルトで選択される項目を指定することができます。

送信ボタン

最後に送信ボタンです。以下のコードで実点しています。

<input type="submit" value="送信">

これで、formタグによる送信欄の作成ができるようになりました。

なお、サンプルコードで使用した属性は次のとおりでした。

  • name属性 : データの名前を指定する。
  • type属性 : inputタグの形式を変更するときに使用します。
  • value属性 : 送信される実際の値を指定できます。

*　　*　　*

一般的なフォームタグで使われるラジオボタンやセレクトボックスについて解説しました。

パスワードの黒丸やアンケートフォームでよく見るセレクトボックスなど、フォームを作る上では欠かせない要素も実際に書いて理解しておきましょう。

次回は、条件分岐を使って出力結果を変更するやり方について解説します。

著者紹介


TechAcademy　(https://techacademy.jp/)

プログラミングやWebデザイン、アプリ開発が学べるオンラインスクールを運営。

TechAcademyマガジンでは、プログラミングやWebデザインなど技術に関する最新トレンド、ツールの使い方を紹介しています。開発作業や学習に役立つコンテンツがご覧になれます。

なお、本稿はTechAcademy の「はじめてのプログラミングコース」を元に解説しています。