フォームの練習
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの練習</title>
</head>
<body>
<form id="entryForm" action="#" method="post">
<table border="1">
<tr>
<th>猫ちゃんのお名前：</th>
<td><input type="text" name="cat-name" placeholder="みーちゃん"></td>
</tr>
<!--placeholderを入れると文字がうすく表示されて入力のヒントになる-->
<tr>
<th>お住まい：</th>
<td>
<select name="pref">
<option value="" selected>選択してください</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="関東甲信越">関東甲信越</option>
<option value="東海・北陸">東海・北陸</option>
<option value="近畿">近畿</option>
<option value="中国・四国">中国・四国</option>
<option value="九州・沖縄">九州・沖縄</option>
</select>
<!--selectedは最初に表示される-->
</td>
</tr>
<tr>
<th>性別：</th>
<td>
<label><input type="radio" name="sex" value="男の子" checked>男の子</label>
<label><input type="radio" name="sex" value="女の子">女の子</label>
</td>
<!--name="sex"と両方に指定する同じラジオボタンのグループになり、男の子と女の子のどちらかのラジオボタンしか選択できない-->
</tr>
<tr>
<th>好物：</th>
<td>
<label><input type="checkbox" name="like1" value="お魚">お魚</label>
<label><input type="checkbox" name="like2" value="お肉">お肉</label>
<label><input type="checkbox" name="like3" value="ミルク">ミルク</label>
<label><input type="checkbox" name="like4" value="カリカリ">カリカリ</label>
<label><input type="checkbox" name="like5" value="猫缶">猫缶</label>
<label><input type="checkbox" name="like6" value="甘いもの">甘いもの</label>
</td>
<!--nameにはすべて違う名前をつける-->
</tr>
<tr>
<th>飼い主のお名前：</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>飼い主の年齢：</th>
<td>
<select>
<script>
for( var i = 10; i <= 100; i++ ) {
document.write('<option value="i">'+i+'歳</option>');
}
</script>
<!--JavaScriptを使用してselectの選択肢を作成している-->
</select>
</td>
</tr>
<tr>
<th>メールアドレス：</th>
<td><input type="email" name="email" required>※必須</td>
</tr>
<!--
・type="email"としておくと簡易なメールアドレスチェックをしてくれる
・requiredをいれるとメールアドレスを入力しないと送信(投稿)できなくなる
-->
<tr>
<th>コメント：</th>
<td><textarea name="comment" rows="4" cols="40"></textarea></td>
</tr>
</table>
<input type="reset" value="クリア">
<input type="submit" value="投稿">
</form>
</body>
</html>
実行結果
