Input을 위한 Label
Coddy HTML 여정의 기초 섹션에 포함된 레슨. 60개 중 39번째.
레이블이 없으면 입력 항목이 무엇을 위한 것인지 항상 명확한 것은 아닙니다. 레이블은 해당 필드에 어떤 유형의 입력이 필요한지 사용자에게 명확한 시각적 단서를 제공합니다. 레이블은 <label> 태그를 사용해 만듭니다.
기본 구문은 다음과 같습니다.
<label for="field">Label text</label>
<input type="text" id="field"><label>: 레이블을 만드는 태그입니다.
for: 레이블과 양식 필드를 연결합니다.for의 값은 양식 필드의id와 일치해야 합니다.
- 레이블 텍스트: 양식 필드의 용도를 설명하는 텍스트입니다.
<input>: 레이블이 가리키는 양식 필드입니다.
id: 레이블의for속성과 일치하는 폼 필드의 고유 식별자입니다.
서로 연결되면 레이블 텍스트를 클릭할 때 해당 입력란에 커서가 놓이고(포커스가 맞춰지고), 사용자가 클릭할 수 있는 영역도 넓어집니다.
챌린지
쉬움다음 태그를 <form> 태그 안에 추가하세요:
- 텍스트가 'First Name:'이고
for속성이 'firstname'으로 설정된<label>. type="text"인<input>필드.<input>필드에는 레이블의for속성과 일치하는id가 있어야 합니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 여기에 코드를 작성하세요 -->
</form>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
기초의 모든 레슨
직접 연습해 보세요: Web 플레이그라운드