[HTML] label & input

박지원 ·2023년 7월 27일
0
post-thumbnail

우리가 로그인 창 같은 정보를 입력 받아서 서버에다가 보내줄 수 있는 것들을 form이라고 함

form의 구성요소에는 label과 input이 있음

쉽게 label은 인풋의 이름 또는 설명, input은 입력 받는 창이라고 생각하면 됨

input 활성화 하는 방법

1)input을 label로 감싸줬을 때

    <form>
      <label>이메일
        <input>
      </label>
    </form>


이메일이라는 이름만 클릭해도 input창이 활성화 됨

꼭 input을 label안에 넣지 않아도 input창을 활성화 시킬 수 있는 방법도 있는데

2) id와 for을 이용했을 떄

    <form>
      <label for="signup-email">이메일</label>
      <input id="signup-email">
    </form>

1)과 동일한 결과를 출력해 냄.

정보를 보내야할 때, name이라는 속성을 사용해야 됨

    <form>
      <label for="signup-email">이메일</label>
      <input id="signup-email" name="email">
    </form>

name안으로(email) 내
가 입력한 정보가 들어가는 것을 확인할 수 있음.

*form 태그 안에다가 적어줘야지 관리가 편할 듯
왜냐하면 버튼 태그와 같은 것도 form 태그 안에 있으면 누르면 따로 자바스크립트를 연동시키지 않아도, 내용이 넘어가게 됨

profile
배움이 즐거운 개발자

2개의 댓글

comment-user-thumbnail
2023년 7월 27일

잘 읽었습니다. 좋은 정보 감사드립니다.

1개의 답글