アンケート画面作成

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

本格的なものは 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>

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

項目	フォームの形	内容
テキストフィールド <input type="text">		ユーザーが任意に１行のみ文字を入力できます。
ラジオボタン <input type="radio">	男女	どちらか一方を選択するフォームです。例えば「男」を選ぶと「女」を選ぶことはできません。
チェックボックス <input type="checkbox">	りんごなし	複数選択できるフォームです。例えば「好きな食べ物は？」と言う項目に対して「りんご」「なし」が両方好きであれば、両方選択できます。
プルダウンメニュー <select>		「▼」をクリックすれば他の項目が表示され、好きな項目を選択できるフォームです。
セレクトボックス <select multiple>		複数選択が可能なメーニューフォームです。例えば「習得言語」に対して「日本語」「英語」というように２つ選択することも可能です。
テキストエリア <textarea>		自由に文字を書くことができるフォームです。改行や空白も可能で大抵「具体的な内容」を記述してもらうとき利用されます。

アンケート画面作成

アンケート画面作成

複雑な表製作

オススメ書籍

人気記事

始めるための基礎知識

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

入門者を卒業した方へ

HTML5を覚えよう

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

レスポンシブルデザイン対応

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

サイト運営にあたって

その他の言語

リファレンス

人気コンテンツ