［HTML］フォームの練習
フォームの目的は ユーザーの情報・意見の収集
フォームの問題点
- 入力制限が必須 →悪意の内容（プログラム）を書き込まれる可能性あり
- セキュリティーが一番重要 →プログラム、セキュリティ、目的などをよく考慮し
システムを組上げるべき
「お問い合わせフォーム」と「アンケート型フォーム」を分けて考える
htmlでのフォームの種類
<form>タグに必要な要素
・action属性 「どこに」データの送り先
・method属性 「どうやって」データの送信方法 postまたはget
★post＝封筒（差出人住所が見えない）
get ＝葉書（差出人住所が見える）
<form action="#" method="post">ではじめる
マークアップの手順
①テーブル組みにする（tableにボーダーを付ける）
②CSSでtableを整える
ボーダーをCSSのtableに付ける（HTMLにつけたボーダーを取る）
テキスト型 用途：名前
<tr>
<th>お名前</th><td><input type="text" name="name" size="38" maxlength="10" required autofocus></td>
</tr>
name属性
size="●●" 入力できるだいたいの半角文字数（正確ではない）
maxlength="●●" Enterを押したときに入力できる全角の文字数
required 入力必須項目になる
autofocus 自動的にそのフォームにカーソルが置かれる
テキストエリア型 用途：問い合わせ内容
<tr>
<th>内容</th><td><textarea name="name" rows="5" cols="40" required placeholder="お問い合わせ内容"></textarea></td>
</tr>
<textarea>~</textarea>で囲む
rows="5" 行数
cols="40" 1行の文字数 標準はrows="5" cols="40" 文字数200
placeholder="●●" 初期に入力されている薄いグレー文字
※required、autofocus、placeholderはHTML5の新機能
ラジオボタン型
<tr>
<th>性別</th><td><label><input type="radio" name="gender" value="male" checked>男性</label> <label><input type="radio" name="gender" value="female">女性</label></td>
</tr>
基本形
<input type="radio" name="●" value="●">●●
◎初期設定では、クリックできるのはボタンだけ。
<label>～<label>で囲むと、文字を含めてクリックできるようになる
◎checked 最初からチェックがついている状態になる
チェックボックス型 複数選択可能
<tr>
<th>スマートフォン</th><td><label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="2">Android</label> <label><input type="checkbox" name="mobile" value="3">その他</label></td>
</tr>
メニュー型
<tr>
<th>地域</th><td><select name="area"><option value="" selected>以下の中から選択</option><option value="1">北海道</option><option value="2">東北</option><option value="3">関東</option><option value="4">甲信</option><option value="5">北陸</option><option value="6">東海</option><option value="7">関西</option><option value="8">中四国</option><option value="9">九州・沖縄</option></select></td>
</tr>
ボタン
<input type="submit" name="送信">
name="●" ●の文字がボタンの文字になる
<table>タグ内でも外でもよい。下の例は、外に置いている
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<table>
<tr>
<th>お名前</th><td><input type="text" name="name" size="38" maxlength="10" required autofocus></td>
</tr>
<tr>
<th>内容</th><td><textarea name="name" rows="5" cols="40" required placeholder="お問い合わせ内容"></textarea></td>
</tr>
<tr>
<th>性別</th><td><label><input type="radio" name="gender" value="male" checked>男性</label> <label><input type="radio" name="gender" value="female">女性</label></td>
</tr>
<tr>
<th>スマートフォン</th><td><label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="2">Android</label> <label><input type="checkbox" name="mobile" value="3">その他</label></td>
</tr>
<tr>
<th>地域</th><td><select name="area"><option value="" selected>以下の中から選択</option><option value="1">北海道</option><option value="2">東北</option><option value="3">関東</option><option value="4">甲信</option><option value="5">北陸</option><option value="6">東海</option><option value="7">関西</option><option value="8">中四国</option><option value="9">九州・沖縄</option></select></td>
</tr>
</table>
<input type="submit" name="送信">
</form>
</body>
