728x90
반응형
HTML 입력 폼의 유효성 검사는 사용자 경험을 향상시키기 위한 중요한 요소입니다. 본 포스트에서는 HTML5의 내장 유효성 검사 기능을 사용한 간단한 Input Validation 폼 예제를 소개하겠습니다.
1. HTML5의 유효성 검사
HTML5에서는 input 요소에서 type 속성을 사용하여 다양한 형식의 데이터를 검증할 수 있습니다. 예를 들어, 이메일, URL, 숫자, 날짜 등 다양한 형식을 쉽게 지정할 수 있습니다. 사용자가 잘못된 형식의 데이터를 입력할 경우 브라우저가 기본적으로 경고 메시지를 표시합니다.
2. 유효성 검사를 활용한 간단한 예제
다음은 간단한 회원 가입 폼의 예제입니다. 이 폼에는 이름, 이메일, 비밀번호, 비밀번호 확인 필드가 포함되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 폼</title>
</head>
<body>
<h1>회원가입 폼</h1>
<form id="signupForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required placeholder="이름을 입력하세요" />
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required placeholder="이메일을 입력하세요" />
<br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required minlength="8" placeholder="최소 8자리 이상" />
<br>
<label for="passwordConfirm">비밀번호 확인:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm" required minlength="8" placeholder="비밀번호를 다시 입력하세요" />
<br>
<button type="submit">가입하기</button>
</form>
<script>
document.getElementById('signupForm').addEventListener('submit', function(event) {
const password = document.getElementById('password').value;
const passwordConfirm = document.getElementById('passwordConfirm').value;
if (password !== passwordConfirm) {
alert('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
event.preventDefault(); // 제출을 막음
}
});
</script>
</body>
</html>3. 폼 구성 요소 설명
폼 필드 설명
- 이름: 'required' 속성을 사용하여 빈 입력을 허용하지 않습니다.
- 이메일: 'type=email'로 지정하여 유효한 이메일 형식을 자동으로 검증합니다.
- 비밀번호: 'minlength' 속성을 통해 최소 8자리 이상 입력을 요구합니다.
- 비밀번호 확인: 비밀번호와 동일한지 확인하는 간단한 자바스크립트 검증을 추가했습니다.
4. 결론
HTML5의 유효성 검사 기능을 활용하면 사용자가 입력한 데이터를 간단하게 확인할 수 있으므로 매우 유용합니다. 추가적으로 자바스크립트를 사용해 더 상세한 조건을 검증할 수 있습니다. 앞으로 더욱 발전된 사용자 경험을 위해 이러한 유효성 검사를 적절히 활용해보시기 바랍니다.
728x90
반응형
'IT > JS' 카테고리의 다른 글
| 최신 자바스크립트 기술: 배열에서 람다식 활용하기 (1) | 2025.03.23 |
|---|---|
| 자바스크립트 ES6 Class (0) | 2021.05.21 |
| 자바스크립트 ES6 For/Of Loop (0) | 2021.05.17 |
| 자바스크립트 ES6 let, const keyword (0) | 2021.05.17 |
| MosaicFlow 모자익플로우 알아보기 (0) | 2019.02.11 |
