#codestep 初級編1portfolio 「フォームまとめ」

初出でしたので、まとめておきました。

<section id="contact" class="wrapper">
        <h2 class="sec-title">Contact</h2>

        <form action="#" method="post">
postは本文で送信。初期値はget(urlで送信)

          <dl>
            <dt><label for="name">NAME</label></dt>
labelタグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができる　https://html-coding.co.jp/annex/dictionary/html/label/
            <dd><input type="text" id="name" name="your-name"></dd>
type属性で動作が大きく変わる。指定しなければtext。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
name属性は、データ化した時などにアクセスしやすくするためにつける。
https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/name_attr.php

            <dt><label for="email">E-mail</label></dt>
            <dd><input type="email" id="email" name="your-email"></dd>

            <dt><label for="message">MESSAGE</label></dt>
            <dd><textarea id="message" name="your-message"></textarea></dd>
          </dl>

          <div class="button"><input type="submit" value="送信"></div>
        </form>

      </section>
    </main>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/*-------------------------------------------
Contact
-------------------------------------------*/
#contact dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#contact dt {
  width: 15%;
}
#contact dd {
  width: 85%;
  margin-bottom: 10px;
}
//横に並べて、dtとdd合計で100％になるように幅を決めることで、表になる

#contact dd input,
#contact dd textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 10px;
}
// 幅いっぱいに枠を付けたい。paddingを設定して、枠線をつける

#contact dd textarea {
  height: 10rem;
}
// textareaの高さ指定

#contact .button {
  text-align: center;
}ｘ
//送信ボタンは左右中央

#contact .button input {
  width: 200px;
  background-color: #24292e;
  color: #fff;
  padding: 15px 0;
  border: solid 1px #24292e;
}
//ボタンの仕様を決める

#contact .button input:hover {
  background: #fff;
  color: #24292e;
}
//hoverした時の変化を決める

参考にしたサイト

https://style.potepan.com/articles/20037.html