label for 태그 오류? htmlFor로 해결!

 

 

 

🔍 회원가입시 많은 인풋창들을 넣어 정보를 받게되는데 그때 label태그를 이용합니다.

 

 

❌ 라벨태그는 for속성을 넣어 인풋의 id같으면 연결되는데 for로 사용하면 오류가발생하였습니다.

<form action="/examples/media/action_target.php" method="get">
    여러분의 나이대를 골라보세요.<br>
    <input type="radio" name="ages" id="teen" value="teenage">
    <label for="teen">10대</label><br>
    <input type="radio" name="ages" id="twenty" value="twenties">
    <label for="twenty">20대</label><br>
    <input type="radio" name="ages" id="thirty" value="thirties">
    <label for="thirty">30대</label><br>
    <input type="radio" name="ages" id="forty" value="forties">
    <label for="forty">40대 이상</label><br>
    <input type="submit">
</form>

 🔼  위 와 같이 for를 사용했을때 오류화면발생

 

 

 

<Form>
        <p>회원가입</p>
        <label htmlFor="memberName">id</label>
        <Input
          placeholder="아이디를 입력해주세요."
          {...register("memberName",{ required: true, pattern:/^(?=.*[a-zA-Z])[-a-zA-Z0-9]{4,10}$/, })}
          // onChange={handleUsername}
        />
<Form>

😉 for ⇒ htmlFor로 수정하여 사용하여 오류를 해결하였습니다.