신청 폼은 운영자가 필요한 정보를 묻고 방문자가 답하는 문서다. 질문의 순서와 이름도 편집의 대상이며, 입력란을 만들었다는 사실만으로 신청이 접수되는 것은 아니다.
- 이름 붙이기: 입력란의
id와label의for를 맞춘다. 입력을 시작하면 사라지는 예시 문구만으로 질문을 대신하지 않는다. - 묶기: 관련 질문은
fieldset으로 묶고legend로 이름을 준다. 필수와 선택 여부는 글로도 밝힌다. - 확인하기:
required와type="email"로 웹 브라우저의 기본 검사를 사용할 수 있다. 이메일 형식 검사는 실제 주소의 존재나 소유자를 확인하는 절차가 아니다. - 접수하기: 아래 예제는 입력만 검사하며 전송·저장하지 않는다. 실제 접수에는 처리할 서버, 서버 쪽 검사, 완료·실패 안내가 별도로 필요하다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-05.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>신청 폼은 질문의 순서다: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
form { display: grid; gap: 1rem; }
fieldset { min-inline-size: 0; padding: 1rem; }
label { display: block; margin-block-start: .75rem; }
input, select, button { font: inherit; max-inline-size: 100%; }
input, select { inline-size: 100%; padding: .35rem; }
button { justify-self: start; padding: .5rem 1rem; white-space: normal; }
</style>
<main>
<h1>작은 책 만들기</h1>
<p>가상의 워크숍 입력 연습입니다. 실제 개인정보 대신 가상 값을 쓰세요.</p>
<form id="signup">
<fieldset>
<legend>참가 정보</legend>
<label for="visitor-name">이름 (필수)</label>
<input id="visitor-name" name="name" autocomplete="name" required>
<label for="visitor-email">이메일 (필수)</label>
<input id="visitor-email" name="email" type="email" autocomplete="email" required>
<label for="session">관심 있는 시간 (선택)</label>
<select id="session" name="session">
<option value="">아직 정하지 않음</option>
<option value="morning">오전</option>
<option value="afternoon">오후</option>
</select>
</fieldset>
<button type="button" id="check">입력 확인 (전송 안 함)</button>
<p id="result" role="status"></p>
<noscript>이 예제의 입력 확인에는 JavaScript가 필요합니다. 접수 기능은 없습니다.</noscript>
</form>
</main>
<script>
const form = document.querySelector("#signup");
const result = document.querySelector("#result");
form.addEventListener("submit", event => event.preventDefault());
form.addEventListener("input", () => { result.textContent = ""; });
document.querySelector("#check").addEventListener("click", () => {
result.textContent = "";
if (form.reportValidity()) {
result.textContent = "입력을 확인했습니다. 전송하거나 저장하지 않았습니다.";
}
});
</script>
</html>이름을 비우거나 이메일에 abc를 넣고 입력 확인을 눌러본다. 형식이 맞으면 전송하지 않았다는 안내가 나타난다. 실제 신청서의 묻지 않아도 되는 질문을 줄이는 판단은 작동하는 폼을 만든 뒤에도 남는다.