접근 가능한 회원가입 폼 완성하기

이번 단계에서 배울 내용

접근 가능한 폼은 입력 목적을 알려 주는 label, 관련 선택지를 묶는 fieldset과 legend, 반드시 입력할 값을 표시하는 required, 실행 목적이 분명한 제출 버튼을 함께 사용합니다.

이번 문제는 지금까지 배운 폼 요소를 조합해 작은 회원가입 폼을 완성하는 연습입니다.

예시

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

<form>
  <label for="account">계정 이름</label>
  <input id="account" required>
  <fieldset>
    <legend>소식 받기</legend>
    <label><input type="radio" name="news" value="yes"> 받기</label>
    <label><input type="radio" name="news" value="no"> 받지 않기</label>
  </fieldset>
  <button type="submit">등록</button>
</form>

해야 할 일

이름과 이메일을 필수 입력으로 만들고 각각 label을 연결하세요. 알림 수신 여부는 제목이 있는 라디오 버튼 그룹으로 만들고, 마지막에는 실제 제출 버튼을 둡니다.

완성 조건

• signup이라는 id의 <form>을 한 개 만듭니다.
• 필수 입력칸을 두 개 만듭니다.
• 알림 선택 그룹에 <fieldset>과 <legend>를 한 개씩 둡니다.
• 라디오 버튼을 두 개 만듭니다.
• type="submit"인 버튼을 한 개 만듭니다.
• 모든 입력과 선택지에 연결된 label이 있습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 이름과 이메일 영역을 먼저 완성한 뒤, 알림 선택 fieldset, 제출 버튼 순서로 작성하세요.