labelの使い方についてまとめ

<p>for属性を使用した場合、ラベル部分をクリックした場合にも入力エリアがアクティブになります。</p>
<p>それぞれのラベル部分をクリックすることで動作の確認ができます。</p>
<hr>
    <div class="form_parts">
        <label>forなしの例</label>
        <input type="text" name="yourName">
    </div>
    <div class="form_parts">
        <label for="contactName">for使用例</label>
        <input id="contactName" type="text" name="yourName">
    </div>

.form_parts {
  padding-bottom: 1rem;
}
label{
  display: inline-block;
  width: 9rem;
  vertical-align: top;
}
hr {
  border: none;
  border-top: 3px double #000;
  height: 1rem;
}