お問い合わせフォーム~HTML側~

2900 ワード
HTML CSS プログラミング お問い合わせフォーム HTML テキストリンク

今回はお問い合わせフォームの実装を行います。

完成版はこちらです。

見た目がダサいのは、ご容赦ください😅

HTML

HTML側での実装はこのようになります。

index.html
  <div class="header">
    <div class="header-logo">お問い合わせフォーム</div>
  </div>

  <form class="info" action="#" method="post">
    <dl class="contact">
      <dt>お名前</dt>
      <dd><input type="text"></dd>
      <dt>メールアドレス</dt>
      <dd><input type="email"></dd>
      <dt>電話番号</dt>
      <dd><input type="tell"></dd>
      <dt>パスワード</dt>
      <dd><input type="password"></dd>
      <dt>ご意見</dt>
      <dd><textarea></textarea></dd>
      <button type="submit">送信</button>
    </dl>
  </form>

①　description list (dlタグ)　
このタグは、情報がセットのものをさします。
②　description term　(ddタグ)
このタグは、項目を指します。
③　description,definition (ddタグ)
このタグは、内容を指します。
①〜③までの情報をformタグで囲みます。このタグで囲むことで、returnキーで送信することができます。

actionでは、送信されるURLを指します。今回は送り先は決まってないので、#とします。また、methodで送信形式を定めます。

以上で、HTML側の実装は終わりです。
次にJS側での実装を進めていきます。