form 태그 관련 이벤트
form 태그는 사용자로부터 값을 입력받아 제출 이벤트(Submit Event)가 발생되면 웹프로그램을 요청하여 입력값을 전달하는 태그이다.
form 태그의 하위태그로 사용자로부터 값을 입력받기 위한 입력태그와 제출 이벤트(Submit Event)를 발생시킬 수 있는 태그가 반드시 작성되어 있어야 정상적인 동작이 가능하다.
form 태그는 사용자 입력값을 검증한 후 정상적인 경우에만 동작되도록 프로그램을 설정하고 비정상적인 입력값이 있는 경우 form 태그가 동작되지 않도록 설정해주는 것이 중요하다. ★
따라서 form 태그는 자바스크립트를 이용해서 사용자 입력값을 검증해 주는 것을 권장한다.
form 태그 사용자 입력값 검증 예시 1)
아무런 이벤트도 발생하지 않는 button 태그일 경우
입력페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>form 태그 관련 이벤트 - 입력페이지</h1>
<hr>
<form action="47_form_action.html" method="post" name="loginForm">
<table>
<tr>
<td>아이디</td>
<!-- 사용자로부터 값을 입력받기 위한 태그 -->
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<!-- 아무런 이벤트도 발생되지 않는 button 태그 -->
<td colspan="2"><button type="button" id="loginBtn">로그인</button></td>
</tr>
</table>
</form>
<script>
//form 태그와 입력태그의 name 속성값을 이용하여 Node(Element 객체)로 표현 가능
//alert(loginForm);//[object HTMLFormElement]
//alert(loginForm.id);//[object HTMLInputElement]
//InputElement.focus() : 입력태그에 입력촛점을 제공하는 메소드
loginForm.id.focus();
document.getElementById("loginBtn").onclick=function() {
//사용자 입력값 검증
//InputElement.value : 입력태그의 사용자 입력값이 저장된 프로퍼티
if(loginForm.id.value=="") {//아이디 입력값이 없는 경우
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
return;//이벤트 처리 함수 종료 - form 태그 미실행
}
//자바스트립트에서는 정규표현식을 / / 안에 작성하면 RegExp 객체로 표현하여 사용 가능
var idReg=/^[a-zA-Z]\w{5,19}$/g;
//RegExp.test(input) : RegExp 객체에 저장된 정규표현식으로 매개변수로 전달받은 입력값의 패턴을
//검사하여 형식에 맞지 않을 경우 [false]를 반환하고 형식에 맞는 경우 [true]를 반환하는 메소드
if(!idReg.test(loginForm.id.value)) {
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
return;
}
if(loginForm.passwd.value=="") {//비밀번호 입력값이 없는 경우
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
return;
}
//FormElement.sumbit() : form 태그를 실행하기 위한 제출 이벤트를 발생하는 메소드
loginForm.submit();
}
</script>
</body>
</html>
처리페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>form 태그 관련 이벤트 - 처리페이지</h1>
<hr>
</body>
</html>
form 태그의 속성과 속성값을 자바스크립트로 설정할 수 있다.
loginForm.action="47_form_action.html";
loginForm.method="post";
form 태그 사용자 입력값 검증 예시 2)
제출 이벤트(Submit Event)를 발생시키는 button 태그일 경우
입력페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>form 태그 관련 이벤트 - 입력페이지</h1>
<hr>
<form action="48_submit_action.html" method="post" name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td colspan="2"><button type="submit">로그인</button></td>
</tr>
</table>
</form>
<hr>
<script>
loginForm.id.focus();
//form 태그에서 제출 이벤트가 발생될 경우 호출될 이벤트 처리 함수 등록
// => 비정상적인 입력값이 있는 경우 제출 이벤트 취소 - form 태그 미실행
loginForm.onsubmit=function() {
if(loginForm.id.value=="") {
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
//태그에서 발생되는 이벤트에 대한 기본 명령을 삭제
// => form 태그를 이용하여 웹프로그램을 요청하는 명령 취소 - form 태그 미실행
//event.preventDefault();
//return;
//이벤트 처리 함수에서 return 명령으로 [false]를 반환하면 이벤트 처리 함수를
//종료하면서 태그의 기본 명령 제거 및 이벤트 전달 중지
return false;//form 태그 미실행
}
var idReg=/^[a-zA-Z]\w{5,19}$/g;
if(!idReg.test(loginForm.id.value)) {
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
return false;
}
if(loginForm.passwd.value=="") {
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
return false;
}
}
</script>
</body>
</html>
처리페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>form 태그 관련 이벤트 - 처리페이지</h1>
<hr>
</body>
</html>
'학원 > 복기' 카테고리의 다른 글
| [jQuery] jQuery란? / jQuery 라이브러리 이용법 (0) | 2023.06.12 |
|---|---|
| [JavaScript] 쿠키(Cookie) (0) | 2023.06.11 |
| [JavaScript] DHTML(Dynamic HTML) (0) | 2023.06.11 |
| [JavaScript] addEventListener 메소드 (0) | 2023.06.11 |
| [JavaScript] 이벤트 전파(Event Propagation) (0) | 2023.06.11 |
