label과 input 연결하기

이번 단계에서 배울 내용

<label>은 입력칸이 어떤 값을 받는지 알려 주는 이름표입니다. label의 for 값과 input의 id 값을 같게 작성하면 둘이 연결됩니다.

연결된 이름표를 클릭해도 입력칸에 초점이 이동하므로 마우스와 터치 사용이 편해지고, 화면 읽기 도구도 입력 목적을 알 수 있습니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<label for="nickname">별명</label>
<input id="nickname" name="nickname" type="text">

해야 할 일

이름이라는 글을 실제 <label>로 바꾸고 이름 입력칸과 연결하세요. label의 for와 input의 id는 모두 name을 사용합니다.

완성 조건

• for="name"인 <label>을 한 개 만듭니다.
• name이라는 id의 <input>을 한 개 만듭니다.
• 입력칸의 name 값은 name입니다.
• label과 input이 같은 값으로 올바르게 연결됩니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: for="name"과 id="name"처럼 두 값이 글자까지 정확히 같아야 합니다.