受け付けフォーム

実用になる受け付けフォームを作ってみましょう。

例

「必須」を * や ※ で表すことがありますが，日本のスクリーンリーダーでは読めないらしいので，ここでは「必須」と書きました。

「メール」に合わせて「氏　名」のように空白を入れて整形するのはスクリーンリーダーに悪影響があるようです。どうしてもスペースを空けたいなら，氏名（<span style="letter-spacing: 1em">氏名</span>）のように書くとよいでしょう。

ソース

このページは単なるHTMLファイルです。

<form method="post" action="apply2.php">
<p>メール（必須）：<input name="email" type="email" size="40"></p>
<p>氏名　（必須）：<input name="name" size="40"></p>
<p>備考（オプション）：<br>
<textarea name="memo" rows="4" cols="60">
</textarea>
</p>
<p>
<input type="submit" value="確認ページに進む"></p>
</form>

もっといろいろ聞いてみる

一つ選ぶにはラジオボタンを使います。

男 女

<form method="post" action="apply2.php">
<p>
<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female"> 女
</p>
</form>

複数選択はチェックボックスを使います。

昼のお弁当を申し込む
懇親会に参加する

<form method="post" action="apply2.php">
<p>
<input type="checkbox" name="lunchbox" value="yes"> 昼のお弁当を申し込む<br>
<input type="checkbox" name="banquet" value="yes"> 懇親会に参加する
</p>
</form>

たくさんの場合はプルダウンメニューのほうがいいかもしれません。

▼選択してください 小学校 中学校 高等学校

<form method="post" action="apply2.php">
<select name="school">
<option value="">▼選択してください</option>
<option value="小学校">小学校</option>
<option value="中学校">中学校</option>
<option value="高等学校">高等学校</option>
</select>
</form>