폼(Form) 요소와 입력값 검증
페이지 정보
본문
사용자 데이터를 안전하게 받는 방법
웹사이트에서 사용자와 상호작용할 때 가장 많이 사용하는 HTML 요소가 바로 폼(Form) 입니다. 로그인, 회원가입, 게시글 작성 등 대부분의 웹 서비스는 폼을 통해 데이터를 입력받습니다.
폼의 기본 구조
폼은 <form> 태그 안에 다양한 입력 요소(input, select, textarea 등)를 넣어 구성합니다.
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<button type="submit">회원가입</button>
</form>
위 예시에서 required 속성은 입력을 필수로 만들고, type="email"은 이메일 형식을 자동으로 검증합니다.
입력값 검증
폼 검증은 사용자가 올바른 데이터를 입력했는지 확인하는 과정입니다. HTML5에서는 기본적인 검증을 제공하지만, JavaScript를 통해 더 세밀한 검증도 가능합니다.
<script>
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
const username = document.getElementById("username").value;
if (username.length < 3) {
alert("사용자 이름은 최소 3자 이상이어야 합니다.");
e.preventDefault(); // 제출 막기
}
});
</script>
실무 활용 사례
-
로그인 폼: 이메일과 비밀번호 형식 검증
-
회원가입 폼: 비밀번호 강도 체크, 중복 확인
-
게시판 입력: 글자 수 제한, 금지어 필터링
접근성 고려
폼 레이블 <label>을 반드시 사용하여 스크린리더 사용자도 입력 필드를 쉽게 이해할 수 있게 합니다. for 속성과 id를 연결하면 시각적 레이블뿐 아니라 접근성까지 확보할 수 있습니다.
폼과 입력값 검증은 웹 개발의 필수 요소입니다. HTML5 속성과 JavaScript를 적절히 활용하면, 사용자가 편리하게 입력하고 동시에 안전하게 데이터를 받을 수 있습니다.