HTML~フォーム④~

ではでは、今まで使った技術でフォームで作っていきましょう！！

index.html

<link rel="stylesheet" href="css/style.css">
  <div class="form">
    <h1>お問い合わせフォーム</h1>
  <label>名前：<input type="text"></label><br>
  <label>電話番号：<input type="number"></label><br>
  <label>メールアドレス：<input type="email"></label><br>
  <fieldset>
    <legend>どこで当社を知りましたか？？(複数選択可)</legend>
    <label><input type="checkbox">知り合い</label>
    <label><input type="checkbox">新聞・テレビ</label>
    <label><input type="checkbox">インターネット</label>
  </fieldset>
  <label for="comment">お問い合わせ内容</label>
  <textarea id="comment" name="comment"></textarea>
  <button>送信</button>

</div>

簡易的なお問い合わせフォームなので雑ですが🥲
今まで作れなかった人が作れたので勘弁してあげてください笑
labelのあとのbrは行を変えたかったので作りました。
textareaはidとforを紐付けました👍

style.css

.form {
  background-color: aqua;
  width: 40%;
  margin: 30px 40px ;
  padding: 30px;
  display: flex;
  flex-direction:column;
}

h1 {
  border: 2px solid black;
  width: 50%;
}

fieldset {
  width: 52%;
  margin-bottom:10px ;
}

textarea {
  display: block;
  height: 200px;
  margin: 20px;
  width: 80%%;
}


button {
  width: 10%;
  margin: 0px 0px 20px 20px;
}

cssは完全に感なのであれですが、、、、
噂のフレックスボックスですね(^_^;)フレックスボックスはこちらを
https://qiita.com/akari_0618/items/85a6f6d7eaf6681e11df

一応、ブラウザではこうなります！！