input과 label 태그 기본 사용법

input과 label 태그 기본 사용법에서 먼저 볼 부분

label은 입력창의 이름표 역할을 합니다. for와 id를 연결하면 사용성과 접근성이 함께 좋아집니다.

label의 for 값과 input의 id 값이 같으면 라벨을 클릭했을 때 해당 입력창으로 포커스가 이동합니다. 작은 차이지만 폼 사용성이 좋아집니다.

input의 type은 브라우저가 입력값을 어떻게 다룰지 알려줍니다. email, password, number처럼 목적에 맞는 타입을 쓰면 모바일 키보드도 더 알맞게 나옵니다.

name은 서버로 제출될 때 데이터 이름이 됩니다. 화면만 만들 때도 나중을 생각해 의미 있는 name을 붙이는 습관이 좋습니다.

로그인 입력 폼

<label for="email">이메일</label>
<input id="email" name="email" type="email" autocomplete="email">

<label for="password">비밀번호</label>
<input id="password" name="password" type="password">

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• label for와 input id가 같은지 확인하기
• 입력 목적에 맞는 type 사용하기
• name 속성을 의미 있게 작성하기
• 비밀번호 입력은 type="password" 사용하기