입력 목적에 맞는 input type 사용하기

이번 단계에서 배울 내용

<input>의 type은 어떤 값을 받을지 브라우저에 알려 줍니다. 일반 글은 text, 이메일 주소는 email, 가려서 표시할 비밀번호는 password를 사용합니다.

알맞은 입력 종류를 사용하면 모바일 키보드와 브라우저 검증도 입력 목적에 맞게 동작합니다. autocomplete은 브라우저가 저장된 값을 안전하게 제안할 목적을 알려 줍니다.

예시

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

<input id="display-name" type="text">
<input id="contact-email" type="email" autocomplete="email">
<input id="new-pin" type="password" autocomplete="new-password">

해야 할 일

사용자 이름, 이메일, 새 비밀번호 입력칸을 목적에 맞는 세 가지 type으로 구분하세요. 이메일과 비밀번호 입력칸에는 알맞은 autocomplete 값도 지정합니다.

완성 조건

• type="text"인 일반 글 입력칸을 한 개 만듭니다.
• type="email"인 이메일 입력칸을 한 개 만듭니다.
• type="password"인 비밀번호 입력칸을 한 개 만듭니다.
• 이메일 입력칸에 autocomplete="email"을 지정합니다.
• 비밀번호 입력칸에 autocomplete="new-password"를 지정합니다.
• 세 입력칸에 각각 연결된 label이 있습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 세 입력칸의 name을 보고 어떤 값을 받는 칸인지 먼저 구분하세요.