
問題1:問い合わせフォームを作ろう
問い合わせフォームを作ってみましょう。
期待する画面を見ながら、同じものを作成してください。
下記条件を考慮してください。
[条件]
・フォームの送信先:ninja.phpで設定してください
(ninja.phpは用意していない為、送信はできません)
・必須項目には「※」マークを付けてください
・チェックボックスとラジオボタンは項目名と紐づけて下さい
期待する画面を見ながら、同じものを作成してください。
下記条件を考慮してください。
[条件]
・フォームの送信先:ninja.phpで設定してください
(ninja.phpは用意していない為、送信はできません)
・必須項目には「※」マークを付けてください
・チェックボックスとラジオボタンは項目名と紐づけて下さい
期待する画面

解答ソースコード
<form action="ninja.php" method="post">
<dt>お問い合わせ項目</dt>
<dd>
<label><input type="checkbox" name="category" value="お問い合わせ">お問い合わせ</label>
<label><input type="checkbox" name="category" value="新規お申し込み">新規お申し込み</label>
<label><input type="checkbox" name="category" value="資料請求">資料請求</label>
</dd>
<dt>お名前<span class="must">※</span></dt>
<dd>
<input type="text" name="name" required placeholder="忍者 太郎">
</dd>
<dt>ふりがな<span class="must">※</span></dt>
<dd>
<input type="text" name="kana" required placeholder="にんじゃ たろう">
</dd>
<dt>メールアドレス<span class="must">※</span></dt>
<dd>
<input type="email" name="email" required placeholder="ninjacode@test.com">
</dd>
<dt>電話番号<span class="must">※</span></dt>
<dd>
<input type="tel" name="tel" required placeholder="0312345678">
</dd>
<dt>性別</dt>
<dd>
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
</dd>
<dt>当サイトをお知りになったきっかけ</dt>
<dd>
<select name="how">
<option value="ホームページ">ホームページ</option>
<option value="SNS">SNS</option>
<option value="広告">広告</option>
</select>
</dd>
<dt>お問い合わせ内容<span class="must">※</span></dt>
<dd>
<textarea name="query" cols="30" rows="5" required></textarea>
</dd>
<button type="submit" name="submit">送信する</button>
</form>
¥HTML¥
補足
問い合わせフォームでは、今回の問題のように
inputタグやlabelタグを使いこなすことで様々な用途に合わせた
問い合わせフォームを作成することができるようになります。
今回はHTMLだけで問い合わせフォームを作成している為
見た目の部分では少し物足りなさを感じますが、CSSを組み合わせることで
お洒落で機能的なフォームを作成することができるようになります。
この問題は何度か繰り返して、フォーム実装をマスターしましょう!
inputタグやlabelタグを使いこなすことで様々な用途に合わせた
問い合わせフォームを作成することができるようになります。
今回はHTMLだけで問い合わせフォームを作成している為
見た目の部分では少し物足りなさを感じますが、CSSを組み合わせることで
お洒落で機能的なフォームを作成することができるようになります。
この問題は何度か繰り返して、フォーム実装をマスターしましょう!
#忍者CODE無料問題集で活動を記録しよう
完了にする!
formタグにはaction属性とmethod属性を付与します。
次に定義リストを用いてdt要素内に質問項目、dd要素内にフォームを書きます。
それぞれのtype属性の値は解説コードをご確認ください。
必須項目にはspan要素で「※」を記述し、input要素に'required'を付与しましょう。
問い合わせ項目と性別には識別できるようvalue属性を必ず付与しましょう。
name属性は同じ値を付与することでグループとして認識させることができます。