アンケート画面作成

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

本格的なものは 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>パソコンのＯＳ：</strong>
    </td>
    <td>
      <select name="パソコンのＯＳ">
        <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>

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

windows95
windows98
windowsme
windows2000
windowsxp

日本語(japanese)
英語(english)
中国語(chinese)
その他(others)

送信結果は次のようになります。

オススメ書籍

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