アンケートフォームを作ってみましょう。
chap4ディレクトリを作り
↓question.htmlを作りましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<title>アンケート</title>
</head>
<body>
<div id="contents">
<p>■アンケートにお答えください。</p>
<form action="check_question.php" method="POST">
<p><label>この本の購入日を教えてください。<br/>
<input type="text" name="pdate" value="2010/08/01"></label>
</p>
<p><label>一ヶ月あたりの書籍の平均購入額を教えてください。<br/>
<input type="text" name="pprice" value="5000">円</label>
</p>
<p>本書の評価を教えてください。（5段階）<br/>
<label><input type="radio" name="star" value="5" />5：とても良い</label>
<label><input type="radio" name="star" value="4" />4：良い</label>
<label><input type="radio" name="star" value="3" checked="checked" />3：ふつう</label>
<label><input type="radio" name="star" value="2" />2：悪い</label>
<label><input type="radio" name="star" value="1" />1：とても悪い</label>
</p>
<p>興味のある言語を教えてください。（複数選択可）<br/>
<label><input type="checkbox" name="lang[0]" value="PHP" />PHP</label>
<label><input type="checkbox" name="lang[1]" value="Perl" />Perl</label>
<label><input type="checkbox" name="lang[2]" value="Java" />Java</label>
<label><input type="checkbox" name="lang[3]" value="C#" />C#</label>
<label><input type="checkbox" name="lang[4]" value="C++" />C++</label>
<label><input type="checkbox" name="lang[5]" value="Basic" />Basic</label>
</p>
</p>
<p>あなたの職業を教えてください。<br/>
<select name="job">
<option value="プログラマー">プログラマー</option>
<option value="コンサルタント">コンサルタント</option>
<option value="デザイナー">デザイナー</option>
<option value="研究職">研究職</option>
<option value="学生">学生</option>
<option value="その他">その他</option>
</select>
</p>
<p><input type="submit" value="アンケートを確認する" />
</form>
</body>
</html>
アンケート■アンケートにお答えください。
●radioボタンは一つしか選択できないです。
radioボタンはname属性が同じものは一つの項目としてみなされます。これ重要かも？
●checkボタンは複数選択できます。
つまりname属性が配列になります。これも重要かも？
●labelタグ
ボタンだけでなくテキストもクリックできるようになるタグです。ユーザービリティ、アクセシビリティの面でつけて損はないです。クリッカブルとか言うらしいです。上のでテキストをクリックすると選ばれるで試し見てください。
例えば、この本の購入日を教えてください。をクリックりてみたり。
とても良いをクリックしてみたり。PHPをクリックりてみたりしてください。スマホ的なものに役に立つかな。
アンケート入力画面です（※画像はクリックで拡大できます。画像はCSSで装飾されています。実際の入力画面は、もっとシンプルです。↓
PR
