ログイン
問題1

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

HTMLで問い合わせフォームを作るには、ここまで学習した内容を振り返ればある程度の作り方が身についているはずです。 学習した内容を振り返りながら自力で完成させてみましょう。

アイコン画像

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

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

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

[条件]
・フォームの送信先: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¥
            

コメントのアイコン解説

まず問い合わせフォーム全体を囲むformタグを書きましょう。
formタグにはaction属性とmethod属性を付与します。

次に定義リストを用いてdt要素内に質問項目、dd要素内にフォームを書きます。
それぞれのtype属性の値は解説コードをご確認ください。
必須項目にはspan要素で「※」を記述し、input要素に'required'を付与しましょう。

問い合わせ項目と性別には識別できるようvalue属性を必ず付与しましょう。
name属性は同じ値を付与することでグループとして認識させることができます。
ログインして解答を見る

コメントのアイコン補足

問い合わせフォームでは、今回の問題のように
inputタグやlabelタグを使いこなすことで様々な用途に合わせた
問い合わせフォームを作成することができるようになります。

今回はHTMLだけで問い合わせフォームを作成している為
見た目の部分では少し物足りなさを感じますが、CSSを組み合わせることで
お洒落で機能的なフォームを作成することができるようになります。

この問題は何度か繰り返して、フォーム実装をマスターしましょう!
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる