Ⅵ-９　コメント送信用のフォームを作る

１）ご意見箱のページを作ります

ご意見箱のページは色の呼び名のページをベースにして作ります。
「マイドキュメント」の「webpage」から「iromei.htm」を開き、表示からソースを開きます。
<title>～</title>の中を「ご意見箱」と書き換え、「box.htm」と名前を付けて保存します。
見出しのテーブルと、トップページへのリンクを残して、<table border>～</table>を削除します。

２）見出し部分のテキストを書き換えます

ご意見箱ページとして利用するため、見出しの部分の内容を書き換えます。
リンク済みの文字色の変更と、リンク文字の下線を消す設定を追加しました。【参照】

３）フォームを書く場所を用意します

フォームを書く場所として「<form></form>」を見出しのテーブルの下に追加します。
ここでは、フォーム部分が画面の中央に配置されないようにするため、
<div align="left">～</div>で囲みます

４）テキスト入力欄を作ります

テキストの入力欄を作るため、<form>～</form>の中に<input type="text">を追加します。【参照】

５）名前の入力欄として設定します

入力欄に名前を書いてもらえるように、項目名を「名前：」とします。
<input>にはname設定を追加し、値を「namae」と指定します。【参照】

６）メールアドレスの入力欄を作ります

名前の入力欄と同じように、メールアドレスの入力欄を作ります。
このとき、項目名を「メールアドレス：」とし、nameは「mail」とします。【参照】

７）入力欄の横幅を指定します

入力欄の横幅を指定するため、サイズ設定を追加し、size="40"として、inputに追加します。
これで入力の文字が４０文字分の横幅で表示されます。【参照】

８）コメントの入力欄を作ります

ここでは長い文章を入れてもらうため、「<textarea></textarea>」を使います。
又項目名を「コメント：」とし、nameは「comment」と指定します。【参照】

８）コメントの入力欄の大きさを指定します

大きさはcolsで横幅、rowsで高さを指定します。尚横幅は文字数、高さは行数です。
ここでは、cols="50"とrows="8"に指定しtextareaに追加します。【参照】

９）送信ボタンとリセットボタンを作ります

<input type="～">で「submit」と指定すると送信ボタン、「reset」と指定するとリセットボタンを作ることが出来ます。
それぞれ「<input type="submit">」「<input type="reset">」を追加します。
valueでは、ボタン上に表示する文字を指定します。
「value="コメントを送る"」と「value="リセット"」を<input>に追加します。【参照】

１０）項目の間に余白を入れます

項目の間に余白を入れるため、項目を<div>～</div>で囲みます。
<form>～</form>の中だけにデザインを設定をするため、
「form div{～}」を<style>に追加し、margin-bottomで値を「15px」と指定します。
form div{margin-bottom:15px}と書きます。これでフォームの項目の下に１５ピクセルの余白が入ります。【参照】

１１）フォーム部分の左側に余白を入れます

フォームの部分は左に寄りすぎているため、余白を入れ右にずらします。
フォーム全体にデザインを設定をするため、<style>に「form{～}」を追加します。
margin-leftで値を「10%」と指定します。form{margin-left:10%}と書きます。
これでフォームの左側に、画面の横幅に対して10%の余白が入ります。【参照】

１２）フォームデーターの送信設定をします

ここではメールで送信するため、actionでメールアドレスを指定します。
さらに、enctypeを「text/plain」methodを「post」指定します。
<form>の中に「action="mailto:sora@free.japandesign.ne.jp"enctype="text/plain"method="post"」を追加します
enctypeでは送信データーのエンコードの種類を指定します。
入力された日本語データーをそのまま受け取りたいため、「text/plain」と指定します。
methodでは送信方法を指定します。メールで送信する場合、「post」と指定します。
尚送信設定を追加しても、フォームの画面表示には影響しません。

１３）フォームの作動を確認します

設定ができあがったら、フォームの作動を確認してみましょう。
きちんと送信できれば、<form action="～">で指定したメールアドレスに、フォームデーターが届きます【参照】

<html>
<head>
<title>ご意見箱</title>
<style type="text/css"></style>
</head>
<body>
<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1"><h1>ご意見箱</h1></td>
<td class="head2">スタイルシートについて少しは参考になりましたでしょうか？
参考書【ＨＴＭＬ＆スタイルシート・・<a href="http://www.ebisu.com/">エビスコム</a>著】に基づいて書き進めて参りました。
ご意見ご感想、その他何でも気が付いたことがあれば、コメントを送って下さい。
疑問・質問には一緒に学習させて頂きます。
</td>
</tr></table>
<div align="left">
<form action="mailto:sora@free.japandesign.ne.jp"enctype="text/plain"method="post">
<div>
名前：<br>
<input type="text" name="namae" size="40"><br>
</div>
<div>
メールアドレス：<br>
<input type="text" name="mail" size="40"><br>
</div>
<div>
コメント：<br>
<textarea name="comment" cols="50" rows="8"></textarea><br>
</div>
<div>
<input type="submit"value="コメントを送る">
<input type="reset"value="リセット" > </div>
</form>
</div>
<hr>
<div><a href="index.htm">Sky&Water by sora</a>
</div>
</div>
</body>
</html>

１４）テキスト入力欄の種類

フォームでは次のようなテキスト入力欄を作ることが出来ます。
テキスト入力欄では、１行分のテキストを入力することが出来ます。
パスワード入力欄は、基本的にテキスト入力欄と同じですが、入力したテキストが「*」で表示されます。
しかし、送信先にはきちんと入力したテキストが送信されます。
尚、パスワード入力欄では、パスワードの送信が目的なので、英数字しか入力することが出来ません。

●テキスト入力欄を利用したフォーム

テキスト入力欄 <input type="text">

パスワード入力欄 <input type="password">

複数行のテキスト入力欄 <textarea></textarea> あいうえお　　　　　かきくけこ

送信ボタン <input type="submit">

送信ボタン <input type="submit"value="送る">

リセットボタン <input type="reset">

１５）チェックボタンとラジオボタン

チェックボタンとラジオボタンは<input type="～">を次のように指定することで作ることが出来ます。
それぞれ、項目の選択に利用出来ます。
チェックボタンでは複数の項目を選択でき、ラジオボタンでは一個の項目のみ選択出来ます。

ＨＴＭＬ表示

チェックボタン <input type="checkbox"> 赤　青　緑

ラジオボタン <input type="radio"> 黄　橙　紫

チェックボタンとラジオボタンを使った【見本】です。
nameで全体の項目名を示し、valueでそれぞれの値を指定します。【sauce】

	ＨＴＭＬ	表示
チェックボタン	<input type="checkbox">	赤　青　緑
ラジオボタン	<input type="radio">	黄　橙　紫

１６）プルダウン

フォームはプルダウンで項目を選択してもらうことが出来ます。
プルダウンの項目は、<select>と<option>を使って作ります。
<select>～</select>でプルダウンを書く場所を用意し、nameで全体の項目を指定します。
<option>ではプルダウンに表示する項目を指定し、valueでそれぞれの値を指定します。【見本】【sauce】

テキスト入力欄	<input type="text">
パスワード入力欄	<input type="password">
複数行のテキスト入力欄	<textarea></textarea>	あいうえお　　　　　かきくけこ
送信ボタン	<input type="submit">
送信ボタン	<input type="submit"value="送る">
リセットボタン	<input type="reset">

Ⅵ-９ コメント送信用のフォームを作る