問い合わせフォームを作ろう

Question

問題1：問い合わせフォームを作ろう

問い合わせフォームを作ってみましょう。

期待する画面を見ながら、同じものを作成してください。
下記条件を考慮してください。

[条件]
・フォームの送信先:ninja.phpで設定してください
(ninja.phpは用意していない為、送信はできません)
・必須項目には「※」マークを付けてください
・チェックボックスとラジオボタンは項目名と紐づけて下さい

Answer 1

解答ソースコード

              <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¥

問い合わせフォームを作ろう

問題1：問い合わせフォームを作ろう

期待する画面

解答ソースコード

解説

補足