1005_JavaScript : <form> 요소

호쏘2 2021. 10. 5. 22:39

2021. 10. 5. 22:39

document.forms 객체

- document.forms 속성은 현재 문서의 <form>요소 목록(HTMLCollection)을 반환한다.

- forms 객체는 html 문서의<form> 태그를 자바스크립트로 접근하기 위한 것으로 내장객체 계층 구조에서 document의 하위에 있다.

document.forms 객체를 이용한<form>요소 접근

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function send() {
	var f = document.forms[0];
	
	// elements : FORM 요소에 담긴 form 컨트롤 배열 반환
	// form controll : input, button, select, textarea ...
	for(var i=0; i<f.elements.length-1; i++){
		if(! f.elements[i].value){
			alert("필수 입력 사항 입니다.");
			f.elements[i].focus();
			return;
		}
	} 
	
	var s = f.elements[0].value + ", " + f.elements[1].value;
	alert(s);
	
}

</script>

</head>
<body>

<h3>form 접근 : document.forms로 접근</h3>

<form>
	<p> 이름 : <input type="text"></p>
	<p> 과목 : <input type="text"></p>
	<p>
		<button type="button" onclick="send()">등록하기 </button>
	</p>
</form>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function send() {
	var f = document.myForm;
	
	if(! f.name.value) {
		f.name.focus();
		return;
	}
	
	if(! f.subject.value) {
		f.subject.focus();
		return;
	}
	
	var s = f.name.value + ", " + f.subject.value;
	alert(s);
	
}

</script>

</head>
<body>

<h3>form 접근 : 'document.폼이름' 으로 접근</h3>

<form name="myForm">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 과목 : <input type="text" name="subject"></p>
	<p>
		<button type="button" onclick="send()">등록하기 </button>
	</p>
</form>

</body>
</html>

이벤트(events)

- form에서 발생하는 이벤트를 처리하기 위해서는 addEventListener()메소드를 이용하거나 form 태그의 oneventname속성에 이벤트 리스너를 등록하여 처리한다.

- form에서 발생하는 이벤트

1. reset 이벤트

- form 내용을 reset할 때 발생하는 이벤트로, 입력 양식이 초기화 되기 전에 실행할 내용을 처리한다.

- form 태그의 onreset 속성에 이벤트 리스너를 등록하여 처리할 수 있다.

2. submit 이벤트

- form의 내용을 submit할 때 form 요소 자체에서 발생하는 이벤트로, form의 내용이 서버로 전송되기 전에 유효성 검사 등을 처리한다.

- submit버튼을 클릭할 때 발생하며, form.submit() 메소드를 직접 호출할 때는 발생하지 않는다.

submit 버튼 : <button>, <input type="submit">, <input type="image"> 등

- form 태그의 onsubmit 속성에 이벤트 리스너를 등록하여 처리할 수 있으며, onsubmit 속성에서 false를 반환하면 이벤트가 취소된다.

- 이벤트 핸들러에서 event.preventDefault() 메소드를 호출하면 submit 이벤트는 취소된다.

submit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>submit 버튼 - 유효성 검사를 하지 않는 경우</h3>
<form action="request.jsp" name="myForm" method="post">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="submit">전송하기</button>
		<!-- 서버로 전송할 수 있는 기능을 가지고 있는 버튼 : submit 버튼, image 버튼 -->
		<!-- <button>에서 type="submit"을 생략하면 submit 버튼 -->
		<!-- submit 버튼, image 버튼 등은 form 태그 안에 있어야 한다. -->
	</p>
</form>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function check() {
	var f = document.myForm;
	
	if(! f.name.value){
		alert("이름을 입력하세요.");
		f.name.focus();
		return false; // 이벤트 취소
	}
	
	if(! /^(\d)+$/.test(f.age.value)) {
		alert("나이는 숫자만 가능합니다.");
		f.age.focus();
		event.preventDefault(); // 이벤트 취소
		return;
	}
	
	return true; // 서버로 전송
	// submit 버튼에서는 submit() 메소드를 호출하면 서버로 두 번 전송되므로 절대로 호출해서는 안된다.
	// submit 버튼은 자바스크립트에 오류가 있는 경우 스크립트를 실행하지 않고 바로 서버로 전송하므로 주의해야 한다.	
}
</script>

</head>
<body>

<h3>submit 버튼 - 유효성 검사</h3>
<form action="request.jsp" name="myForm" method="post" onsubmit="return check();">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="submit">전송하기</button>
		<!-- submit 버튼을 클릭하면 submit 이벤트가 발생한다. -->
		<!-- submit 이벤트는 false를 반환하거나 event.preventDefault()를 호출하면 이벤트가 취소 된다. -->
	</p>
</form>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function check() {
	var f = document.myForm;
	
	if(! f.name.value){
		alert("이름을 입력하세요.");
		f.name.focus();
		event.preventDefault(); // 이벤트 취소
		// 이 예제는 return false; 로는 이벤트 취소 발생되지 않음.
		return; 
	}
	
	if(! /^(\d)+$/.test(f.age.value)) {
		alert("나이는 숫자만 가능합니다.");
		f.age.focus();
		event.preventDefault();
		return;
	}
	
	return true; // 서버로 전송
}

// form에 submit 이벤트 등록 
/*
window.onload = function() {
	document.myForm.addEventListener("submit", check);
};
*/
window.onload = () => document.myForm.addEventListener("submit", check);

</script>

</head>
<body>

<h3>submit 버튼 - 유효성 검사</h3>
<form action="request.jsp" name="myForm" method="post">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="submit">전송하기</button>
	</p>
</form>


</body>
</html>

form의 action을 통해 jsp을 실행

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 클라이언트가 서버로 보낸 정보의 문자 인코딩
	request.setCharacterEncoding("UTF-8");

	// 클라이언트가 서버로 보낸 정보 받기
	String name = request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	
	String state = age>= 19 ? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>서버 - 결과</h3>

<p>이름 : <%=name%></p>
<p>나이 : <%=age%>, <span style="color: blue; font-weight: 700;"><%=state%></span> </p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function send() {
	var f = document.myForm;
	
	if(! f.name.value){
		alert("이름을 입력하세요.");
		f.name.focus();
		return; 
	}
	
	if(! /^(\d)+$/.test(f.age.value)) {
		alert("나이는 숫자만 가능합니다.");
		f.age.focus();
		return;
	}
	
	// submit 기능이 없는 컨트롤에서 서버로 전송할 경우 submit() 함수를 호출한다.
	f.sumbit(); // 서버로 전송
}

</script>

</head>
<body>

<h3>일반 버튼 - 서버로 전송</h3>
<form action="request.jsp" name="myForm" method="post">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="button" onclick="send();">전송하기</button>
	</p>
</form>


</body>
</html>

element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function send() {
	var f = document.myForm;
	var s = "";
	
	if(! f.name.value ){
		f.name.focus();
		return;
	}
	
	if(! f.age.value ){
		f.age.focus();
		return;
	}
	
	s = "<p>이름:"+f.name.value+"</p>";
	s += "<p>나이:"+f.age.value+"</p>";
	s += "<p>좋아하는 과목:";
	
	// 동일한 이름이 2개 이상이면 배열로 처리해야 한다.
	for(var i = 0; i<f.subject.length; i++) {
		if( f.subject[i].value ) {
			s += f.subject[i].value+" ";
		}
	}
	
	s += "</p>";
	
	document.getElementById("layout").innerHTML = s;
	
}

</script>

</head>
<body>

<form name="myForm">
	<p> 이름 : <input type="text" name="name"> </p>
	<p> 나이 : <input type="text" name="age" value="0"> </p>
	<p> 과목 :
		<input type="text" name="subject"><br>
		<input type="text" name="subject"><br>
		<input type="text" name="subject">
	</p>
	<p>
		<button type="button" onclick="send()">확인</button>
	</p>
</form>
<hr>

<div id="layout"></div>
	
</body>


</html>

select, option 요소

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
window.onload = function() {
	var f = document.myForm;
	// f.subject.value = "web"; // value 속성에 select 박스 중 선택할 option의 value를 주면 선택됨
	f.subject[2].selected = true; // subject[2] : subject에서 선택할 option의 위치	
};

function send() {
	var f = document.myForm;
	var s = "";
	
	if(! f.subject.value) { // 선택된 것이 없음
		alert("조하하는 과목 선택은 필수입니다.");
		return;
	}
	
	s = "<p>이름: "+f.name.value+"</p>";
	s += "<p>출신도: "+f.city.value+"</p>";
	s += "<p>가장 좋아하는 과목: "+f.subject.value+"</p>";
	
	for(var i=0; i<f.hobby.length; i++) {
		if(f.hobby[i].selected) {// 선택된 경우
			s += f.hobby[i].value+" ";
		}
	}
	
	s+="</p>";
	
	document.getElementById("layout").innerHTML = s;
}

</script>

</head>
<body>

<h3>select, option 요소</h3>

<form name="myForm">
<p> 이름 : <input type="text" name="name"> </p>
<p> 출신도 :
	<select name="city">
		<!-- 
			<option value=''>text</option>
			value : 서버로 전송되는 값(value 속성이 없으면 text가 서버로 전송)
			text : 눈에 보이는 값
		 -->
		<option>서울</option>
		<option selected="selected">경기</option>
		<option>인천</option>
		<option>기타</option>
	</select>
</p>

<p> 가장 좋아하는 과목 :
	<select name="subject">
		<option value="">::선택::</option>
		<option value="java">자바</option>
		<option value="oracle">오라클</option>
		<option value="web">웹</option>
	</select>
</p>

<p> 취미 :
	<select name="hobby" multiple="multiple" size="5">
		<option value="게임">게임하기</option>
		<option value="축구">축구하기</option>
		<option value="음악">음악듣기</option>
		<option value="영화">영화보기</option>
		<option value="수영">수영하기</option>
	</select>
</p>
<p>
	<button type="button" onclick="send()">확인</button>
</p>
</form>

<div id="layout"></div>

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1005_JavaScript : 쪽지보낼 사람 선택하기 (0)	2021.10.05
1005_JavaScript : 회원가입 유효성 검사 (0)	2021.10.05
1005_JavaScript : 게시판 전체선택 체크박스 (0)	2021.10.05
1001_JavaScript : 클래스 class (0)	2021.10.03
1001_JavaScript : 프로토타입 Prototype (0)	2021.10.03

개발새발, 써놓기