<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// form 태그 내의 각 요소에 접근 : document.폼name속성값.요소name속성값.속성명
// => 속성 : name, type, value 등
// => 함수 : focus() - 대상에 커서 요청, blur(), select() - 대상에 커서 요청(값 블럭 지정) 등
function print() {
// 폼 태그(name="fr") 내의 아이디를 입력받는 텍스트박스(name="id") 에 접근
// var id = document.fr.id.name + "\n" + document.fr.id.type + "\n" + document.fr.id.value;
// alert(id);
// 아이디, 패스워드, 자기소개 입력값 출력
alert(document.fr.id.value + "\n" + document.fr.passwd.value + "\n" + document.fr.ta.value);
}
function check() {
// 아이디, 패스워드 중에서 입력되지 않은 항목이 존재할 경우
// 경고창을 통해 오류 메세지를 출력한 후 해당 항목에 커서를 요청한 후 작업 중단(함수 종료)
// => 입력값이 비어있지 않은지 확인하는 방법
// 1) 해당 태그의 value 속성값이 널스트링("") 과 같은지 판별
// 2) "" value 속성값이 길이가 0 인지 판별
// -------------------------------------------------------------
// 1. value 속성값에 대한 판별
if(document.fr.id.value == "") { // 아이디가 아무것도 입력되지 않은 경우
alert("아이디 입력 필수!"); // 경고메세지 출력
document.fr.id.focus(); // 아이디 입력창에 커서 요청
return; // 현재 함수를 종료
} else if(document.fr.passwd.value == "") { // 아이디가 아무것도 입력되지 않은 경우
alert("패스워드 입력 필수!"); // 경고메세지 출력
document.fr.passwd.focus(); // 패스워드 입력창에 커서 요청
return; // 현재 함수를 종료
}
// 아이디, 패스워드가 모두 입력되었을 경우
// 입력받은 폼파라미터를 action 속성에 지정된 페이지로 이동하면서 전달하기 위해
// form 태그 객체의 submit() 함수를 호출
document.fr.submit();
}
function check2() {
// 형식으로 함수를 호출했으므로
// 페이지 이동을 취소하려면 false 값을 리턴하고, 페이지를 이동하려면 true 값을 리턴
if(document.fr.id.value == "") { // 아이디가 아무것도 입력되지 않은 경우
alert("아이디 입력 필수!"); // 경고메세지 출력
document.fr.id.focus(); // 아이디 입력창에 커서 요청
return false; // 현재 함수를 종료(페이지 이동을 취소 = submit 동작 수행 되지 않음)
} else if(document.fr.passwd.value == "") { // 아이디가 아무것도 입력되지 않은 경우
alert("패스워드 입력 필수!"); // 경고메세지 출력
document.fr.passwd.focus(); // 패스워드 입력창에 커서 요청
return false; // 현재 함수를 종료(페이지 이동을 취소 = submit 동작 수행 되지 않음)
}
return true; // submit 동작이 수행되어 페이지 이동
}
</script>
</head>
<body>
<h1>test15.html - form 태그</h1>
<!--
form 태그
- 어떤 입력 데이터들(텍스트박스, 라디오버튼, 체크박스 등)을 하나의 묶음으로 관리하여
특정 페이지로 이동(포워딩) 시 파라미터 형태로 전달하는 역할의 태그
- 주로 input type="XXX" 형식의 입력데이터 폼을 하나로 묶어주는 역할을 수행
- input type="submit" 버튼을 생성하면, 해당 버튼 클릭 시
form 태그의 action 속성에 지정된 페이지로 이동하면서 입력받은 데이터 모두를 파라미터로 전달함
=> 또는, 자바스크립트 상에서 form 태그 객체의 submit() 함수를 호출해도 동일한 기능 수행
- onsubmit 속성에 함수를 지정하면 submit 동작이 수행되기 전 해당 함수를 호출하게 됨
=> true 또는 false 값을 리턴하여 페이지 이동 수행 여부 결정할 수 있음
실제 속성 지정 시 함수 앞에 return 문을 함께 명시함
ex)
[ 기본 문법 ]
<form action="이동할 페이지 URL" method="이동할 방식" name="폼이름">
// 폼파라미터로 사용될 입력폼 위치
<input type="submit" value="XXX">
</form>
-->
<form action="test15-2.html" method="get" name="fr" onsubmit="return check2()">
아이디 <input type="text" name="id">
<!-- 각 버튼 클릭 시 대상 요소에 대한 해당 함수를 직접 호출 -->
<input type="button" value="focus()" onclick="document.fr.id.focus()">
<input type="button" value="blur()" onclick="document.fr.id.blur()">
<input type="button" value="select()" onclick="document.fr.id.select()">
<br>
패스워드 <input type="text" name="passwd"><br>
<!-- textarea 태그는 input type="text" 와 달리 여러 줄 입력 가능한 태그 -->
<!-- required="required" 속성 지정 시 입력값이 없으면 submit 동작 시 입력 확인해줌 -->
자기소개 <textarea rows="5" cols="20" name="ta" required="required"></textarea><br>
<input type="button" value="아이디, 패스워드, 자기소개 출력" onclick="print()"><br>
<input type="button" value="입력값 체크" onclick="check()"><br>
<input type="submit" value="가입">
</form>
</body>
</html>
