フォーム関連機能（3）
演習課題（1）解答例
- type属性は、InternetExploereが未対応ななため積極的に使う段階ではありません
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5でお問い合わせフォーム</title> <style> th { text-align: left; } span.red { color: #F00; } span.small { font-size: small; } </style> </head> <body> <header> <h1>お問い合わせフォーム</h1> </header> <section id="contact"> <p> 当サイトに関して、ご意見、ご感想などがございましたら、<br> こちらのフォームに必要事項をご入力の上、送信してください。 <br> 返信には数日かかることもございますことを予めご了承ください。<br> </p> <form action="#" method="post" id="inquiry"> <p class="attention"><span class="red">※</span>全て必須項目です。</p> <table> <tr> <th>お問い合わせタイトル：<span class="red">※</span></th> <td><input type="text" name="title" id="title" size="55" placeholder="〜について" autocomplete="on" autofocus="autofocus" required></td> <td><span class="small">[全角・半角混在可]</span></td> </tr> <tr> <th>お問い合わせ内容：<span class="red"><span class="red">※</span></th> <td><textarea name="question" id="question" cols="40" rows="4" placeholder="具体的に" required></textarea></td> <td><span class="small">[全角・半角混在可]</span></td> </tr> <tr> <th>お問い合わせへの回答方法：<span class="red">※</span></th> <td><input type="text" name="course" list="reply" placeholder="メール" required> <datalist id="reply"> <option value="メール">メール <option value="電話">電話 <option value="その他">その他 </datalist> </td> <td><span class="small">[全角・半角混在可]</span></td> </tr> <tr> <th>お名前：<span class="red">※</span></th> <td><input type="text" name="name" id="name" size="30" placeholder="山田太郎" autocomplete="on" required></td> <td><span class="small">[全角]</span></td> </tr> <tr> <th>フリガナ：<span class="red">※</span></th> <td><input type="text" name="furigana" id="furigana" size="30" placeholder="ヤマダタロウ" autocomplete="on" pattern="^[ア-ン゛゜ァ-ォャ-ョー]+$" required></td> <td><span class="small">[全角カタカナ]</span></td> </tr> <tr> <th>メールアドレス：<span class="red">※</span></th> <td><input type="email" class="textmiddle" name="email" size="55" placeholder="yamada@example.co.jp" autocomplete="on" required></td> <td><span class="small">[半角英数字]</span></td> </tr> <tr> <th>電話番号：</th> <td><input type="tel" class="textmiddle" name="tel" size="55" placeholder="03-1234-5678" autocomplete="on" pattern="^[0-9\-]+$" required></td> <td><span class="small">[数字・ハイフン]</span></td> </tr> </table> <p><input type="submit" value="送信"></p> </form> </section> </body> </html>
演習課題（2）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>宿泊予約</title> <style> body { line-height: 2.0; } th { text-align: right; } span.red { color: #F00; } </style> </head> <body> <h1>宿泊予約</h1> <form action="#" method="post" id="inquiry"> <p class="attention"><span class="red">※</span>全て必須項目です。</p> <table> <tr> <th><span class="red">※</span>ID：</th><td><input type="text" name="userID" id="userID" size="20" autofocus required></td> </tr> <tr> <th><span class="red">※</span>料理：</th><td><input type="text" name="menu" id="menu" size="20" list="menuList" autocomplete="on" required><br> <datalist id="menuList"> <option value="海鮮丼">海鮮丼 <option value="海の幸と山の幸">海の幸と山の幸 <option value="海の幸づくし">海の幸づくし <option value="山の幸づくし">山の幸づくし <option value="高級あわび料理">高級あわび料理 <option value="高級寿司">高級寿司 <option value="うに丼">うに丼 <option value="うにいくら丼">うにいくら丼 <option value="季節料理">季節料理 <option value="季節の野菜料理">季節の野菜料理 <option value="季節の魚料理">季節の魚料理 </datalist> </td> </tr> <tr> <th><span class="red">※</span>予約日：</th><td><input type="date" id="resDay" name="resDay" required></td> </tr> <tr> <th><span class="red">※</span>予約時間：</th><td><input type="time" id="resTime" name="resTime" required></td> </tr> <tr> <th><span class="red">※</span>予約人数：</th><td><input type="number" id="resNumber" name="resNumber" min="1" max="20" required>(1-20人)</td> </tr> <tr> <th>部屋の色：</th><td><input type="color" id="roomColor" name="roomColor"></td> </tr> <tr> <th><span class="red">※</span>メール：</th><td><input type="email" id="mailAddress" name="mailAddress" required></td> </tr> <tr> <th>電話番号：</th><td><input type="tel" id="telephone" name="telephone"></td> </tr> <tr> <th>空き室状況：</th><td><meter min="0" max="50" value="41" low="25" high="40" optimum="0">41部屋予約されています</meter></td> </tr> </table> <p><input type="submit" value="送信"></p> </form> </body> </html>
meter要素
- 下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用します
- 測定値は、必須属性のvalue属性で指定します
- 下限と上限を指定しない場合には範囲が0〜1と見なされます。この場合、value属性で指定する値を0〜1の範囲内にする必要があります
- 測定値はmeterタグのvalue属性で指定しますが、meterタグをサポートしていないブラウザを使用しているユーザーにも分かるように、測定状況をテキストで記述することが推奨されています
- meterタグは、進行状況を示すのに使用するべきではありません。そのような目的には、progressタグを使用してください
- meter要素に対応しているブラウザでは、計測結果がゲージで表示されます
