猫カフェのサイトを使って実際にフォームの作成について学習します。
よくあるアンケートフォームのページで使うタグや作成の流れを理解するのが目的です。
HTMLファイルの作成
index.htmlファイルを「form.html」で別名保存して、<main>内の内容を削除します。
こうすることで、ヘッダーやナビゲーションなどの基本レイアウトが完成した状態で、新しくページを作成することができます。
nyanroom
index.html
form.html（index.htmlを別名保存して作成）
form.htmlの文章をコピーして、完成例を参考に見出し・段落をマークアップしましょう。
<main>
アンケートに答えて半額クーポンゲット！
アンケートにお答えいただくと、次回ご来店時に使える「半額クーポン」をプレゼントします。
以下のアンケートにお答えください
お気に入りの猫はいましたか？（複数選択可）
にゃんルームのご利用は？
今回ご利用のお部屋は？
お得な情報をメールでご案内
クーポンをお送りします。メールアドレスとお名前をご入力ください。
よろしければ、ご意見・ご要望・ご感想をお聞かせください
</main>
見出しや段落など、文書構造のタグをマークアップしたら、<section>も忘れずに！
アンケートフォームの作成手順
1つ目の質問 チェックボックスの設置
<section>に、レイアウトやデザインを調整するための、id名を追加します。
<section id="q1"><label>を使って、チェックボックスと画面に表示する回答文を記述します。
<label><input type="checkbox" name="お気に入りの猫" value="ブウくん">ブウくん</label>nameは質問、valueは回答です。
チェックボックスは、複数選択可能な質問で使うボタンです。
他の回答文も作成していきましょう。
2つ目の質問 ラジオボタンの設置
<section>に、レイアウトやデザインを調整するための、id名を追加します。
<section id="q2"><label>を使って、ラジオボタンと画面に表示する回答文を記述します。
<label><input type="radio" name="利用回数" value="1回" checked>はじめて</label>ラジオボタンは、単一選択可能な質問で使うボタンです。
他の回答文も作成していきましょう。
checked属性を追加しておくことで、チェック済みの表示にすることができます。
3つ目の質問 セレクトメニューの設置
<section>に、レイアウトやデザインを調整するための、id名を追加します。
<section id="q3"><label>を使って質問文を囲み、<select>でセレクトメニューを作成します。
回答文は<option>で囲みます。
<label for="room">ご利用のお部屋</label>
<select name="利用した部屋" id="room">
<option value="1F" selected>1Fにゃんルーム</option>
</select>セレクトメニューは、単一選択可能な質問で使うボタンです。
他の回答文も作成していきましょう。
3行目の<option>に、selected属性を追加しておくことで、選択済みで表示することができます。
<label>のfor属性と、<select>のid属性の値を一致させることで、アクセシビリティが高くなります。
<label>の文章と<input>や<select>などのパーツを分けると、レイアウトがしやすくなります。
iPhoneのGoogle Chromeで表示したセレクトメニューです。
OSやブラウザによってセレクトメニューの表示は変わることがありますが、CSSを使ってコントロールすることができます。
4つ目の質問 テキストフィールドの設置
<section>に、レイアウトやデザインを調整するための、id名を追加します。
<section id="q4"><label>を使って質問文を囲み、<input>でテキストフィールドを作成します。
<label for="mail">メールアドレス</label><input type="email" name="メールアドレス" id="mail">テキストフィールドは、テキスト・メールアドレス・電話番号など種類を、type属性で指定します。
メールアドレスや電話番号などもtype=”text”を使えますが、入力する内容に合わせてtype属性を選ぶことで、スマートフォンの入力用キーボード画面が変化します。
value属性の値は、入力された文字が値になるので、<input>にvlaue属性は不要です。
他の回答文も作成していきましょう。
5つ目の質問 テキストエリアの設置
<section>に、レイアウトやデザインを調整するための、id名を追加します。
<section id="q5"><label>を使って質問文を囲み、<textarea>でテキストエリアを作成します。
<label for="message">ご意見・ご要望</label>
<textarea name="ご意見・ご要望" id="message" rows="6" cols="50" placeholder="ご意見・ご要望をお聞かせください"></textarea>テキストエリアは自由入力欄です。
入力するエリアサイズは、rows属性とcols属性で設定できますが、CSSでもコントロールが可能です。
value属性の値は、入力された文字が値になるので、<textarea>にvlaue属性は不要です。
placeholder属性を使うことで、テキストエリア内に入力例などの文字を表示することができます。
placeholder属性は、<input>のテキストフィールドでも使用できます。
<textarea>の開始タグと終了タグの間にテキスト文を入力すると、vlaue値として判断されるので注意が必要です。
送信ボタンの設置
<input>で送信ボタンを作成します。
<section id="q5">
<h3>よろしければ、ご意見・ご要望・ご感想をお聞かせください</h3>
<label for="message">ご意見・ご要望</label>
<textarea name="ご意見・ご要望" id="message" rows="6" cols="50" placeholder="ご意見・ご要望をお聞かせください"></textarea>
</section>
<input type="submit" name="送信" value="アンケートを送信">送信ボタンのボタン名は、valueを使って変えることができます。
<form>の範囲と送信先・送信方法を設定
<form>で、フォームの範囲を囲み、送信先と送信方法を設定します。
<form action="dummy.php" method="post">
<section id="q1">
〜中略〜
<input type="submit" name="送信" value="アンケートを送信">
</form><form>の範囲は、入れ子構造に注意して囲みましょう。
今回の場合であれば、<section>の親要素になるように囲みます。
action属性は送信先になるプログラムファイルまでのパス名、method属性は送信方法でpostまたはgetです。
うまく作れなかった人は、もう一度作成し直すか、下のソースコードを参考に確認してみましょう。
次のCSSに進む際に、HTMLの作成が間に合わない場合は、コードをコピーして使ってください。
本来<h2>の範囲は<article>ですが、今回の動画は仕様変更前に作成したので<article>は使っていません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アンケートフォーム</title>
<!-- <link href="css/destyle.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link href="css/drawer.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
<link href="css/pagetop-link.css" rel="stylesheet"> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<header>
<p><img src="images/logo.png" alt="にゃんルームのロゴ"></p>
<nav id="drawer-nav">
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="room.html">お部屋のご案内</a></li>
<li><a href="#">同居猫の紹介</a></li>
<li><a href="#">カフェメニュー</a></li>
<li><a href="#">保護猫カフェについて</a></li>
<li><a href="#">ご予約・お問い合わせ</a></li>
</ul>
</nav>
<div id="menubtn"><img src="images/nav.png" alt="menuボタン"></div>
<div id="drawer-bg"></div>
</header>
<main>
<h1>アンケートに答えて半額クーポンゲット！</h1>
<p>アンケートにお答えいただくと、次回ご来店時に使える「半額クーポン」をプレゼントします。</p>
<h2>以下のアンケートにお答えください</h2>
<form action="dummy.php" method="post">
<section id="q1">
<h3>お気に入りの猫はいましたか？（複数選択可）</h3>
<label><input type="checkbox" name="お気に入りの猫" value="ブウくん">ブウくん</label>
<label><input type="checkbox" name="お気に入りの猫" value="ワラビくん" checked>ワラビくん</label>
<label><input type="checkbox" name="お気に入りの猫" value="キイくん">キイくん</label>
<label><input type="checkbox" name="お気に入りの猫" value="ミイちゃん">ミイちゃん</label>
</section>
<section id="q2">
<h3>にゃんルームのご利用は？</h3>
<label><input type="radio" name="利用回数" value="1回" checked>はじめて</label>
<label><input type="radio" name="利用回数" value="2〜4回">2〜4回</label>
<label><input type="radio" name="利用回数" value="5〜7回">5〜7回</label>
<label><input type="radio" name="利用回数" value="8回〜">8回〜</label>
</section>
<section id="q3">
<h3>今回ご利用のお部屋は？</h3>
<label for="room">ご利用のお部屋</label>
<select name="利用した部屋" id="room">
<option value="1F">1Fにゃんルーム</option>
<option value="2F" selected>2Fにゃんルーム</option>
<option value="3F">3Fにゃんルーム</option>
</select>
</section>
<section id="q4">
<h3>お得な情報をメールでご案内</h3>
<p>クーポンをお送りします。メールアドレスとお名前をご入力ください。</p>
<label for="mail">メールアドレス</label><input type="email" name="メールアドレス" id="mail"><br>
<label for="name">お名前</label><input type="text" name="お名前" id="name">
</section>
<section id="q5">
<h3>よろしければ、ご意見・ご要望・ご感想をお聞かせください</h3>
<label for="message">ご意見・ご要望</label>
<textarea name="ご意見・ご要望" id="message" rows="6" cols="50" placeholder="ご意見・ご要望をお聞かせください"></textarea>
</section>
<input type="submit" name="送信" value="登録">
</form>
<p id="page-top"><a href="#"><span>Page Top</span></a></p>
</main>
<footer>
<p>2022 © TOU-WEB</p>
</footer>
<script src="js/drawer.js"></script>
<script src="js/pagetop-link.js"></script>
</body>
</html>