お問い合わせフォームの作り方④「教えてマリオ」

• 2012年4月16日
• html,php

今回はPHPではなくお問い合わせフォームに使用するHTMLタグを紹介していきます。お問い合わせフォーム作成時に必要なテキストボックスやセレクトボックスなどです。

1. フォーム
2. 部品.inputタグ
3. その他部品

1.フォーム

まずはフォームを説明させていただきます。フォームとは主に見ている人の操作画面(ユーザインターフェース)で、利用者からの入力を受け付ける部品の集まりのことです。

部品にはテキストボックスやセレクトボックスなど数多くあります。（後述します）

これらの部品は<form>と</form>の間に書かなければなりません。

フォームからサーバーに送信するとき、「どのページに」、「どのような方法で」 データーを送信するか指定します。「どのページ」にはactionを使用し action=”ここに送信先” 、「どのような方法で」は method属性でpostかgetを指定します。postはそのまま送信されgetはurlの一部として送信されます。

記述例

<form action="kakunin.php" method="post">
ここにいろいろと部品を入れる
</form>

上記を言葉で書くと

<form>と</form>の間の部品をkakunin.phpにpost送信で送ります。

となります。

2.部品.inputタグ

フォームの中に入れる部品・inputタグの紹介をします。
inputタグにはさまざまなtypeが存在しますのでよく使うものを紹介していきます。inputタグには閉じタグはありません。

type=”text”→→→1行テキストボックスをつくります。

<input name="任意の名前を半角で" type="text"  />

ブラウザで見ると



です。
文字が入力できる1行テキストができましたね。名前の入力欄やメールアドレス入力欄などに使います。

属性がたくさんありますが今回は省略します。（あまりつかわないので）

データを受信するときは入力されたデータを受信します。

注意点はname=””を必ず入れてください。データの受信をするときにnameを指定して受信するので必要になってきます。

次のtypeは

type=”checkbox”→→→チェックボックスをつくります。チェックボックスは複数選択が可能です。

これは例を挙げて説明します。よくこのサイトを何で知りましたか？（複数選択可）などがありますがあれはチェックボックスで作られています。それを例に挙げてみます。

<p>このサイトを何で知りましたか？</p><br />
<input name="site" type="checkbox" value="ホームページ" />ホームページ<br />
<input name="magazine" type="checkbox" value="雑誌" />雑誌<br />
<input name="frend" type="checkbox" value="知人の紹介" />知人の紹介<br />

ブラウザで見ると

このサイトを何で知りましたか？

ホームページ
雑誌
知人の紹介


です。
複数チェックが入れられるのを確認してください。

チェックボックスはデータを受信するときvalueのデータを受信します。

なのでnameとvalueは必須になります。（上記のようにnameは選択される内容と同じ意味を入れておくと受信するときにわかりやすいです。）

属性でdisabledというのがあります。これを入れると使用不可になります。知人の紹介を使用不可にしてみます。

<p>このサイトを何で知りましたか？</p><br />
<input name="site" type="checkbox" value="ホームページ" />ホームページ<br />
<input name="magazine" type="checkbox" value="雑誌" />雑誌<br />
<input name="frend" type="checkbox" value="知人の紹介" disabled />知人の紹介<br />

ブラウザで見ると

このサイトを何で知りましたか？

ホームページ
雑誌
知人の紹介


です。

使用不可になりましたね。

次のtypeは

type=”radio”→→→ラジオボックスをつくります。ラジオボックスは複数選択が不可能です。

これも例をあげて説明します。あなたの性別を選択してくださいなどがありますがこれはラジオボックスで作られています。性別で複数選択することはないのでチェックボックスではなくラジオボックスが向いていますね。

<input name="sex" type="radio" value="男性" />男性<br />
<input name="sex" type="radio"  value="女性" />女性<br />

ブラウザで見ると

男性
女性

です。
複数チェックが入れられないのを確認してください。

ラジオボックスもデータを受信するときはvalueのデータを受信します。

なのでnameとvalueは必須になります。

ラジオボックスの注意点はname=””の値を同じにするのがポイントです。name=””の値を同じにしてグループにするイメージです。

次のtypeは

type=”hidden”→→→データを表示させずにformのactionで指定したページに送信する際に使用します。

使いどころが今はわからないとは思いますがお問い合わせフォーム作成時に使用しますのでその時詳しく説明します。

画面上には表示されませんが、value属性で指定した値がformのactionで指定されたページに送信されます。

<input name="test" type="hidden" value="test" />

ブラウザで見ると



です。

隠しデータですので表示されません。

これもnameとvalueは必須になります。

次のtypeは

type=”submit”→送信ボタンです。

入力してもらったデータをformのactionで指定されたページに送信するときにクリックしてもらう送信ボタンです。これがないとデータは送信されません。

<input name="sousin" type="submit" value="送信" />

ブラウザで見ると



です。

valueにいれた値がボタン名になります。確認画面に行くならvalue=”確認”にし、送信する場合はvalue=”送信”にする感じです。

次のtypeは

type=”reset”→→→リセットボタンです。
このボタンを押すと、フォーム内のそれまでに入力したデータをすべてキャンセルします。

<input name="reset" type="reset" value="リセット" />

ブラウザで見ると



です。

こちらもsubmitと同じくvalueにいれた値がボタン名になります。

まだほかにもありますがよく使うinputのtypeは以上になります。

3.その他部品

最後にinput以外の部品を紹介します。

複数行の入力が可能なtextareaです。textareaは閉じタグがあります。

お問い合わせ内容などで使われます。

<textarea name="naiyou" cols="*" rows="*"></textarea>

ブラウザで見てみると



です。

複数行かけるのを確認してください。

データを受信するときは入力されたデータを受信します。

colsは列数（横幅）rows行数（高さ）を数字で指定しますが横幅や高さはCSSで指定したほうが良いのでCSSで指定してください。ではなんで入れているかというと、入れなくてもいいのですが入れなければW3Cチェック（HTMLの文法をチェックしてくれるもの）でひかかるので入れています。気にしないという方は取られていいと思います。

最後に選択リストを紹介します。選択リストは<select>と</select>の間にoptionを指定します。選択リストは予約の日を選択してくださいなどで使われています。例を挙げて書いてみます。

<p>予約日を選択してください。</p>
<select name="reserve">
    <option>本日</option>
    <option>明日</option>
    <option>来週</option>
    <option>来月</option>
</select>

ブラウザで見てみると

本日 明日 来週 来月

です。

データを受信する際は選択されたoptionのデータを受信します。

以上がお問い合わせフォームでよく使う部品（タグ）の説明でした。