21日目 HTML5 Form
問い合わせフォームを作る
html5ではインライン要素（<a>タグ等）はブロックレベル要素を囲むことができる
formの作成
ソース------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの練習</title>
<style>
table {
border: 1px solid #AAA;
border-collapse: collapse;
}
th,td {
padding: 5px;
border: 1px solid #AAA;
}
label,
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
</style>
</head>
<body>
<form action="#" method="post"><!--どこに・送り方-->
<table>
<tr>
<th>お名前</th><td><input type="text" name="name" placeholder="例 鈴木一郎" required autofocus></td><!--autofocusは更新したときに最初にお名前の欄にテキストカーソルがくる-->
</tr>
<tr>
<th>Eメール</th><td><input type="text" name"email" placeholder="例 xxx@sample.com" required></td><!--requiredは必須項目エラー-->
</tr>
<tr>
<th>性別</th><td>
<input type="radio" name="gender" id="male" value="男性" checked><label for="male">男性</label> <input type="radio" name="gender" id="female" value="女性"><label for="female">女性</label> </td><!--checkedは初期値-->
</tr>
<tr>
<th>モバイル機種</th><td>
<input type="checkbox" name="mobile" id="iphone" value="iPhone" checked><label for="iphone">iPhone</label>
<input type="checkbox" name="mobile" id="android" value="Android"><label for="android">Android</label>
<input type="checkbox" name="mobile" id="ather" value="その他"><label for="ather">その他</label>
</td>
<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>
<option value="九州・沖縄">九州・沖縄</option>
<option value="その">その他</option><!--value名は日本語2文字以上はあまり使わない-->
</select>
</td>
</tr>
</tr>
<tr>
<th>コメント</th><td><textarea name="comment" rows="4" cols="30" placeholder="コメント内容" required></textarea></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="送信"></th><!--tdで挟むと送信アイコンが左にいく・colspanで２つのカラムをくっつけっている-->
</tr>
</table>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------
<table>の結合
ソース-------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
table {
width: 500px;
height: 500px;
border: 1px solid #AAA;
border-collapse: collapse;
}
td {
border: 1px solid #AAA;
font-weight: bold;
font-size: 25px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">1</td><td rowspan="2">2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td colspan="2">7</td>
</tr>
<tr>
<td colspan="3">8</td><td rowspan="3">9</td><td rowspan="2">10</td>
</tr>
<tr>
<td rowspan="2">11</td><td>12</td><td>13</td>
</tr>
<tr>
<td colspan="2">14</td><td>15</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------
