HTML-L4-001 / 복합 폼 설계
동적 반복 필드 이름
고급문제
두 주소 입력 묶음을 만드세요. 각 label과 input의 id를 street-1/street-2로 고유하게 하고, name은 addresses[0][street]/addresses[1][street]로 지정하세요.
예시 텍스트·ID·참조 관계를 유지하면서 의미에 맞는 HTML을 작성하세요.
확인할 조건
- 주소 그룹
- 첫 전송 키
- 둘째 전송 키
- 서로 다른 라벨
힌트
반복 필드에서도 DOM ID는 고유해야 합니다.
해설·정답 보기
전송 키의 배열 인덱스와 접근성 연결에 쓰는 고유 ID를 구분합니다. 이름 해석은 서버와의 계약이며 브라우저는 문자열 키로 전송합니다.
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <main><fieldset><legend>주소 1</legend><label for="street-1">도로명</label><input id="street-1" name="addresses[0][street]"></fieldset><fieldset><legend>주소 2</legend><label for="street-2">도로명</label><input id="street-2" name="addresses[1][street]"></fieldset></main> </body> </html>
index.html화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.