<html>
<head>
<meta charset="utf-8">
<title>お問い合わせフォーム</title>
<style>
th {
text-align:left;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<p>当サイトに関して、ご意見、ご感想などがございましたら、こちらのフォームに必要事項をご入力の上、送信してください。<br>返信には数日かかることもございますことを予めご了承ください。</p>
<p>（※は必須項目です。）</p>
<form action="#" method="post">
<table>
<tr>
<th>お問い合わせタイトル：※</th>
<td><input name="title" type="text" required autofocus></td><td>[全角・半角混在可]</td>
</tr>
<tr>
<th>お問い合わせ内容：※</th><td><textarea name="message" required cols="30" rows="3"></textarea></td><td>[全角・半角混在可]</td>
</tr>
<tr>
<th>お問い合わせの回答方法：※</th>
<td><input type="text" name="how-to-answer" list="data-list">
<datalist id="data-list">
<option value="電話">電話</option>
<option value="メール">メール</option>
<option value="FAX">FAX</option>
<option value="手紙">手紙</option></td><td>[全角・半角混在可]</td>
</tr>
<tr>
<th>お名前：※</th><td><input type="text" name="name"></td><td>[全角]</td>
</tr>
<tr>
<th>フリガナ：※</th><td><input type="text" name="kana"></td><td>[全角カタカナ]</td>
</tr>
<tr>
<th>メールアドレス：※</th><td><input type="email" name="email"></td><td>[半角英数字]</td>
</tr>
<tr>
<th>電話番号：</th><td><input type="tel" name="tel"></td><td>[数字・ハイフン]</td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</body>
</html>
第二回全国統一 HTML5実技コンテスト
jsdo.it
