コーディング
#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した時の変化を決める
参考にしたサイト