タイトル画像
サイトタイトル画像

アンケート画面作成

スポンサードリンク

アンケート画面作成

今回は表を応用して、アンケート機能を持ったメール送信フォームを作成してみましょう。

本格的なものは CGI 等を利用することになりますが、これは CGI を用いなくても可能です。CGIに関しては「CGI /PHP を使おう」を参照してください。

【注意】
フォーム送信機能は非常に便利ですが、送信者のコンピュータにメールアドレスが登録されていない場合は送信されません。

また、「Outlook Express」などを利用している方なら問題なく送信できますが、ソフトによっては、送信できない場合があります。

複雑な表製作

サンプルは次のような形になっています。

この「送信する」ボタンを押せば、メールが自動で届きます。

フォーム送信機能

非常に長いですが、HTML文書は次のようになります。
ファイル名:ankert.html

<html>
<head>
<title>アンケートフォーム</title>
</head>
<body>

<form action="mailto:hoge@hoge.co.jp" method="post" enctype="text/plain">
<table>
  <tr>
    <td colspan="2">
      <strong>アンケートフォーム</strong>
    </td>
  </tr>
  <tr>
    <td>
      <strong>アクセスナンバー:</strong>
    </td>
    <td>
    <input type="text" name="アクセスナンバー" maxlength="5">
    </td>
    <td>
      <strong>お名前:</strong>
    </td>
    <td>
    <input type="text" name="お名前" maxlength="5">
    </td>
  </tr>
  <tr>
    <td>
      <strong>電子メール:</strong>
    </td>
    <td>
    <input type="text" name="電子メール" maxlength="5">
    </td>
    <td>
      <strong>性別:</strong>
    </td>
    <td>
    <input type="radio" name="性別" value="男"><input type="radio" name="性別" value="女"></td>
  </tr>
  <tr>
    <td >
      <strong>都道府県:</strong>
    </td>
    <td>
    <input type="text" name="都道府県" maxlength="5">
    </td>
    <td >
      <strong>市外局番:</strong>
    </td>
    <td>
    <input type="text" name="市外局番" maxlength="5">
    </td>
  </tr>
  <tr>
    <td >
      <strong>パソコンのOS:</strong>
    </td>
    <td>
      <select name="パソコンのOS">
        <option>Windows95</option>
        <option>Windows98</option>
        <option>Windowsme</option>
        <option selected>Windows2000</option>
        <option>Windowsxp</option>
      </select>
    </td>
    <td >
      <strong>パソコン歴:</strong>
    </td>
    <td>
    <input type="checkbox" name="パソコン歴" value="一年未満">一年未満
    <br>
    <input type="checkbox" name="パソコン歴" value="一年以上">一年以上 
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <strong>メッセージ:</strong>
    <br>
      <textarea name="メッセージ" rows="5" cols="75"></textarea>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <input type="submit" value="送信する">
    </td>
    <td colspan="2">
    <input type="reset" value="やり直し">
    </td>
  </tr>
</table>
</form>

</body>
</html>

様々な形のボックスを「フォーム」と言います。以下にそれらをまとめておきます。

項目フォームの形内容
テキストフィールド
<input type="text">
ユーザーが任意に1行のみ文字を入力できます。
ラジオボタン
<input type="radio">
どちらか一方を選択するフォームです。例えば「男」を選ぶと「女」を選ぶことはできません。
チェックボックス
<input type="checkbox">
りんご なし 複数選択できるフォームです。例えば「好きな食べ物は?」と言う項目に対して

「りんご」「なし」が両方好きであれば、両方選択できます。

プルダウンメニュー
<select>
「▼」をクリックすれば他の項目が表示され、好きな項目を選択できるフォームです。
セレクトボックス
<select multiple>
複数選択が可能なメーニューフォームです。

例えば「習得言語」に対して「日本語」「英語」というように2つ選択することも可能です。

テキストエリア
<textarea>
自由に文字を書くことができるフォームです。

改行や空白も可能で大抵「具体的な内容」を記述してもらうとき利用されます。

送信結果は次のようになります。フォーム送信結果

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

始めるための基礎知識

タグを覚えよう(非推奨タグ含む)

入門者を卒業した方へ

HTML5を覚えよう

スタイルシートを覚えよう

アクセス数増加、収入を得る仕組み

サイト運営にあたって

HTML 以外も知っておこう

スクリプト・プログラム言語も知ろう

リファレンス

付録

このページの人気コンテンツ

    全ページの人気コンテンツ

    Copyright ©2014 .(since 2003/09/08)