今回はお問い合わせフォームの実装を行います。
完成版はこちらです。
見た目がダサいのは、ご容赦ください😅
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側での実装を進めていきます。
↧