HTML 폼 검증 속성 적용하기

이번 단계에서 배울 내용

HTML 속성만으로도 제출 전에 기본 입력 조건을 확인할 수 있습니다. required는 반드시 입력해야 한다는 뜻이고, 숫자 입력의 min과 max는 허용 범위를 정합니다.

pattern은 입력 글의 모양을 검사합니다. [A-Z]{3}-[0-9]{4}는 영문 대문자 세 글자, 하이픈, 숫자 네 자리 형태를 뜻합니다.

예시

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

<input type="number" min="1" max="10" required>
<input pattern="[0-9]{3}-[0-9]{4}" required>

해야 할 일

이메일, 참여 인원, 초대 코드를 모두 필수 입력으로 만드세요. 참여 인원은 1명 이상 5명 이하로 제한하고, 초대 코드는 영문 대문자 세 글자와 숫자 네 자리 형식으로 제한합니다.

완성 조건

• 세 입력칸 모두에 required 속성이 있습니다.
• members라는 id의 입력칸이 한 개 있습니다.
• code라는 id의 입력칸이 한 개 있습니다.
• 참여 인원 입력의 min 값은 1입니다.
• 참여 인원 입력의 max 값은 5입니다.
• 초대 코드의 pattern은 [A-Z]{3}-[0-9]{4}입니다.
• 세 입력칸에 각각 연결된 label이 있습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 값이 없는 required는 required="true"가 아니라 속성 이름만 작성해도 됩니다.