신청 폼은 운영자가 필요한 정보를 묻고 방문자가 답하는 문서다. 질문의 순서와 이름도 [[편집]]의 대상이며, 입력란을 만들었다는 사실만으로 신청이 접수되는 것은 아니다.
- **이름 붙이기:** 입력란의 `id`와 `label`의 `for`를 맞춘다. 입력을 시작하면 사라지는 예시 문구만으로 질문을 대신하지 않는다.
- **묶기:** 관련 질문은 `fieldset`으로 묶고 `legend`로 이름을 준다. 필수와 선택 여부는 글로도 밝힌다.
- **확인하기:** `required`와 `type="email"`로 웹 브라우저의 기본 검사를 사용할 수 있다. 이메일 형식 검사는 실제 주소의 존재나 소유자를 확인하는 절차가 아니다.
- **접수하기:** 아래 예제는 입력만 검사하며 전송·저장하지 않는다. 실제 접수에는 처리할 서버, 서버 쪽 검사, 완료·실패 안내가 별도로 필요하다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-05.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
신청 폼은 질문의 순서다: 제작 예제
작은 책 만들기
가상의 워크숍 입력 연습입니다. 실제 개인정보 대신 가상 값을 쓰세요.
```
이름을 비우거나 이메일에 `abc`를 넣고 입력 확인을 눌러본다. 형식이 맞으면 전송하지 않았다는 안내가 나타난다. 실제 신청서의 [[묻지 않아도 되는 질문]]을 줄이는 판단은 작동하는 폼을 만든 뒤에도 남는다.
## 참고
- [셰이 하우: 폼 만들기](https://learn.shayhowe.com/html-css/building-forms/)
- [W3C: 입력 요소에 이름 붙이기](https://www.w3.org/WAI/tutorials/forms/labels/)
- [W3C: 입력값 검사](https://www.w3.org/WAI/tutorials/forms/validation/)
#HTML #편집 #접근성