ホームページ作成ガイド

メールフォーム2

テキストボックス
一行の文字列の入力を可能にします。例えば名前やe-mailアドレスなどの入力をしてもらう際に利用します。書式は以下のとおりです。

<input type="text" name="テキストボックスの名称">

テキストエリア
比較的長い文章の入力が可能です。感想やご意見などを入力してもらう際に利用します。書式は以下のとおり。なお、テキストエリアはtextarea要素であって、input要素ではないので注意してください。

<textarea name="テキストエリアの名称" cols="幅" rows="行数">～</textarea>

ラジオボタン
今回のご質問にもあるラジオボタンです。例えばアンケートなどで、「男ですか、女ですか？」や、「～の３つの中から選んでください」などという場合に利用します。input要素のtype="radio"で指定します。書式は以下のとおりです。

<input type="radio" name="ラジオボタンの名称" value="選択項目の値"checked>

チェックボックス
幾つかの項目を複数選択する場合に利用します。書式は以下のとおり。

<input type="checkbox" name="チェックボックスの名称" value="選択項目の値">

セレクト
プルダウンメニューによって選択出来るようにします。書式は以下のとおり。
<select name="select1"><option>リストの項目１<option>リストの項目２</select>

ボタン
入力した内容を送信したりする際に利用するボタンです。送信ボタンの場合、type="submit"、リセットの場合、type="reset"になります。

<input type="button" value="ボタンのラベル">

●ラジオボタンを作成する
ラジオボタンの基本は上で説明しましたので、実際に作成してみましょう。
アンケートの内容の1番目は「今回のテストは難しかったですか？」、2番目は「どの科目が好きですか？」です。valueにはデータが送信された際にどの項目が選択されたのかが分かるように個別の値を設定します。

<P>
今回のテストは難しかったですか？
<input type="radio" name="Q1" value="good" id="a1">
<label for="a1">簡単</label>
<input type="radio" name="Q1" value="well" id="a2">
<label for="a2">まあまあ</label>
<input type="radio" name="Q1" value="bad" id="a3">
<label for="">難しい</label>
</P>
<P>
どの科目が好きですか？
<input type="radio" name="Q2" value="japanese" id="b1">
<label for="b1">国語</label>
<input type="radio" name="Q2" value="math" id="b2">
<label for="b2">数学</label>
<input type="radio" name="Q2" value="english" id="b3">
<label for="b3">英語</label>
</P>

以上で分かるとおり、name属性には質問の名称が、value属性には各個別の項目の値が設定されます。ご質問の場合、おそらくname属性をきちっと設定してやれば、valueをうまく使えるはずです。試してみてください。

●ついでにそのままメールを送信するには？
以前も説明したことがありますが、フォームの内容をCGIを通さずにメールで送信する場合、form要素のaction属性にmailto:メールアドレスを指定します。書式は以下のとおりです。

<form action="mailto" method="post" enctype=""MIMEタイプ>～</form>