Input을 위한 Label
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 39번째.
레이블이 없으면 입력 항목이 무엇에 관한 것인지 항상 명확하지는 않습니다. 레이블은 사용자에게 해당 필드에 어떤 유형의 입력이 필요한지에 대한 명확한 시각적 단서를 제공합니다. 레이블은 <label> 태그를 사용하여 생성됩니다.
기본 구문은 다음과 같습니다:
<label for="field">Label text</label>
<input type="text" id="field"><label>: 레이블을 생성하는 태그입니다.
for: label과 폼 필드 사이의 연결입니다.for의 값은 폼 필드의id와 일치해야 합니다.
- 라벨 텍스트: 폼 필드가 무엇을 위한 것인지 설명하는 텍스트입니다.
<input>: 레이블이 참조하는 폼 필드입니다.
id: 폼 필드의 고유 식별자로, 레이블의for속성과 일치합니다.
챌린지
쉬움<form> 태그 안에 다음 태그들을 추가하세요:
- 텍스트가 'First Name:'이고
for속성이 'firstname'으로 설정된<label>을 추가하세요. type="text"인<input>필드를 추가하세요.<input>필드는 레이블의for속성과 일치하는id를 가져야 합니다.
치트 시트
레이블은 <label> 태그를 사용하여 폼 입력에 대한 명확한 시각적 단서를 제공합니다:
<label for="field">Label text</label>
<input type="text" id="field">레이블의 for 속성은 적절한 연결을 생성하기 위해 해당 입력 필드의 id 속성과 일치해야 합니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 여기에 코드를 작성하세요 -->
</form>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
