[JavaScript] 07. form 객체

forms 요소

document.forms 객체

HTMLCollction 객체로 <form> 요소는 폼의 이름이나 인덱스를 이용하여 접근한다.

객체를 이용하여 <form> 요소에 객체

<form>이라고 하는 것은 유사 배열이라고 생각하면 편하다.

 

form 주요 속성 및 메소드

주요 속성	설명
elemennts	FORM 요소에 담긴 모든 form 컨트롤(control) 배열을 반환한다.
length	FORM 요소의 컨트롤 수를 반환한다.
name	현재 FORM 요소 이름을 문자열로 반환한다.
action	FORM 요소의 action을 설정하거나 반환 받는다.
enctype	FORM 요소의 contentType을 설정하거나 반환 받는다. encoding 속성과 동일하다.
method	FORM 요소의 HTTP method를 설정하거나 반환 받는다.

 

주요 메소드	설명
submit()	서버에 폼을 전송한다.
reset()	폼을 초기상태로 재설정한다.

 

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

document.forms[인덱스]
document.forms["폼이름"]

 

 

가장 많이 사용하는 방법 

action이 아닌 name 속성임을 유의 

id와 class는 디자인을 위해 사용하는 것이고, name은 서버에서 사용하기 위한 것이므로 name을 줄 것!

 

 

action 과 submit

<form name="myForm" action="request.jsp" method="post">
	<p>이름 : <input type="text" name="name"></p>
	<p>과목 : <input type="text"></p>
	<p>점수 : <input type="text" name="score"></p>
	
    <!-- name 속성이 없으면 서버에서 받을 수 없다(subject)-->
	<p>
		<button type="submit">서버로 전송</button>
		<button>서버로 전송</button>
		<button type="button" onclick = "send();">서버로 전송 안 됨</button>
	</p>
</form>

1) action

form 요소릐 내용을 서버로 전송할 때 전송한 데이터를 받을 서버 주소를 의미한다.

 

2) <input> 태그에 name 을 사용해야 한다. 

name을 사용하지 않으면 서버에 데이터를 전송할 수 없다.

id나 class를 사용하지 않도록 주의해야 한다. 

 

3) <button> 태그에 submit 버튼을 사용하면 데이터가 서버로 전송된다. 

일반 버튼은 서버로 전송되지 않는데 일반 버튼을 서버로 전송하고 싶다면 자바스크립트에 submit() 함수를 사용하면 된다.

image 버튼도 submit 버튼이므로 주의해야 한다. 

 

 

일반 버튼을 서버로 전송하고 싶다면? 🤔

<button type="button" onclick = "send();">서버로 전송 안 됨</button>

<script type="text/javascript">
	function send(){
	const f = document.myForm;
	f.submit(); // submit 버튼이 아닌 button 등으로 서버로 전송할 때 호출 
	// submit 버튼에서  submit() 함수를 호출하면 서버로 두 번 전송된다. (DB에 작업하면 두 번 저장됨)
}</script>

 

enctype

name

 

 

was (tomcat) 이 이런 형태로 변환을 해준다. 

htmlCollection 인터페이스 

 

action() 서버으 주소 

submit() 서버에 폼을 전송

 

중요