사용자가 여러가지 방식으로 데이터를 입력하여 인터랙티브(Interactive)하게 원하는 기능을 수행하게 하는데 사용된다.

	Script	[propVal=]..propName;
	HTML	propName="propVal">innerString

인수

propertyName : (속성명)

아래 속성들 중의 하나이다. 메서드들, 이벤트처리자들도 이에 준한다.

생성

form 개체는 HTML <FORM> 태그로 생성된다.

<FORM> ... </FORM>

구성

한 문서에는 여러개의 form 개체들을 가질수 있고 각 form 개체들의 집합으로 하나의 배열변수(Array) forms 개체를 구성한다. 한 문서(document)에 한개의 forms 개체를 갖을 수 있다.

document.forms,
document.forms[0], document.forms[1], ..., document.forms[n]

하나의 form 개체 속에는 여러개의 입력 필드들을 가질수 있고, form.elements 속성에 해당하는, 각 입력필드들은 같은 방식으로 elements 배열변수를 구성하며, 각 element 개체의 속성(property)들이 등록되고 관리되고, 각 element 개체에 따라 적용될 수 있는 메서드(method)와 이벤트처리자(event)를 가질 수 있다.

document.forms[n].elements
document.forms[n].elements[0], document.forms[n].elements[1], ..., document.forms[n].elements[n]

하나의 form 개체 속에 다른 form개체가 들어가는 네스팅되어서는 안된다.

인수

forms 개체나 elements 개체는 배열변수(Array)로서 같은 방식으로 인수(index)를 이용하여 저장되거나 호출된다.
첫번째 데이터의 인수는 0이고, 두번째는 1, 세번째는 2, ..., n번째는 n-1이 된다.
총 데이터의 갯수는 제일 큰 인수+1이 원칙이지만 중간에 빈 개체들을 가질 수 있다.

myVal=obj[index]; // 변수에 배열변수 값을 할당
obj[index]=myVal; // 배열변수에 값을 할당

엘레멘트(element)들

각 form개체에는 여러가지 엘레멘트를 여러개 가질수 있다.

<INPUT>	<INPUT type=button>	button
	<INPUT type=checkbox>	checkbox
	<INPUT type=radio>	radio
	<INPUT type=text>	text
	<INPUT type=password>	password
	<INPUT type=hidden>	hidden
	<INPUT type=file>	FileUpload
	<INPUT type=submit>	submit
	<INPUT type=reset>	reset
<TEXTAREA>		textArea
<SELECT>		select
	<OPTION>	Option

사용

입력폼으로 현재 문서에서 사용자가 입력한 내용으로 수집된 데이터는 가공처리를 위하여 서버에 보내질 수 있다.

특기

보안 경고 : 이 개체의 틀린 사용은 보안문제를 유발시킬 수 있다.
HTTP 프로토콜을 사용하여 forms으로 송신되는 데이터는 암호화되어 있지 않고 다른 사람이 읽을 수 있다.
HTTPS(Secure Hypertext Transfer Protocol)을 사용하여 송신하는 것이 더 좋은 보안을 제공한다.

FORM 엘레멘트는 사용차측에서 서버애 표준화된 양식으로 데이터를 송신할 수 있다. form은 INPUT or SELECT등 여러 제어를 통하여 필요한 데이터를 수집하여 송신하도록 설계되어 있다. 사용자는 form에 데이터를 입력하고 송신(submit) 단추를 클릭하면 서버에 데이터가 보내지고 서버에서는 스크립트를 통하여 이들 데이터를 처리한다.

form 전송으로 데이터가 서버에 보내지려면 각 제어 엘레멘트의 name 속성을 지정하여야 한다. form의 입력 엘레멘트들은 name이나 id 속성, 혹은 elements 컬렉션을 통하여 참조될 수 있다.

초점이 form에 주어지고 사용자가 ESC 키를 누르면 필드의 값은 이전 값으로 환원된다. 다시 ESC 키를 누르면 이 재설정(reset)되고, 초점이 form에 있으나 특정 입력필드에 없고 사용자가 ESC 키를 눌러도 form이 재설정된다.

form이 단 한개의 text 필드를 갖고 사용자가 ENTER 키를 누르면 onsubmit가 발생된다. form 개체가 검정색 테두리를 갖는 INPUT type=submit엘레멘트를 가지고 있으면 사용자가 ENTER 키를 눌러 form을 송신할 수 있다.

이 개체는 스크립트를 포함하여 IE3.0부터 적용된다.

이 엘레멘트는 블럭모드이다.

이 엘레멘트는 종료태그가 필요하다.

참조

이 개체는 (영문)HTML3.2에 정의되었고 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.

설명을 위한 예제

action 속성 IE3.02 NS2 (action="sVal"> 애트리뷰트)
⇒ form 개체가 처리를 위하여 송신되는 주소를 반환하거나 설정한다.
이메일 주소로도 'mailto:trio@trio.co.kr'식으로 송신될수 있다.

문법: .action[=sVal]

코드: document.write(oObj.action); 결과:
코드: document.forms[0].action='mailto:trio@trio.co.kr';document.write(document.forms[0].action) 결과:

elements(컬렉션) 속성 IE3.02 NS2
⇒ form 개체가 포함하는 각 엘레멘트(element)들의 elements 배열변수(Array) 개체를 반환한다.
INPUT, CHECKBOXE, RADIO, SUBMIT등 문서의 소스에 있는 순서로 배열변수에 추가되어 호출할 수 있게 해 준다.

문법: [oVal=].elements

코드: document.write(oObj.elements) 결과:
코드: document.write(oObj.elements.length) 결과:
코드: for (i=0;i<oObj.length;i++) document.write('['+i+']'+oObj[i].type+' ') 결과:

encoding 속성 IE3.02 NS2 (enctype="sVal"> 애트리뷰트)
⇒ form 개체의 문자세트 MIME(Multipurpose Internet Mail Extensions) 엔코딩을 반환하거나 설정한다.
form 개체 엘레멘트에서 수집된 데이터를 post 메서드에서 송신하는 데이터 엔코딩을 지정한다. 디폴트로는 form의 enctype 속성이나 encoding 속성을 지정하여 덮어 씌울 수 있다.
디폴트값은 application/x-www-form-urlencoded이다.

문법: .encoding[=sVal]

코드: document.write(oObj.encoding); 결과:

method 속성 IE3.02 NS2 (method="sVal"> 애트리뷰트)
⇒ form 개체에서 수집된 데이터를 서버에 보내는 방식을 반환하거나 지정한다.
디폴트인 'get'이거나, 아니면 'post' 중의 하나이다.

문법: .method[=sVal]

코드: document.write(oObj.method); 결과:
코드: document.write(document.forms[0].method) 결과:

name 속성 IE3.02 NS2 (name="sVal"> 애트리뷰트)
⇒ form 개체의 이름을 반환하거나 설정한다. 최초값은 <FORM>에서 지정한 name 값이다.

문법: .name[=Val]

코드: document.write(oObj.name); 결과:
코드: document.write(document.forms[0].name) 결과:

target 속성 IE3.02 NS2 (target="sVal"> 애트리뷰트)
⇒ form 개체가 송신하여 표현할 목표(target) 윈도우(frame)나 프레임(window)을 지정한다.

문법: .target[=sVal]

코드: document.write(oObj.target) 결과:

메서드	설명
addBehavior	엘레멘트에 behavior를 추가한다.
appendChild	개체의 자식개체로 한 엘레멘트를 추가한다.
applyElement	개체를 다른 엘레멘트의 자식이나 모체 개체로 만든다.
attachEvent	IE - 이벤트에 특정 기능을 묶어, 기능함수가 개체에서 이벤트가 발생되면 언제나 호출되게 한다. 이벤트의 제거는 detachEvent에서 한다. 반환값은 부울값이다. 문법: [bVal=].object.attachEvent(event,functObj) event는 필수요소이고, 표준 이벤트 문자열이다. functObj도 필수요소이고 이벤트가 발생되면 호출될 기능함수이다. 코드: function callFunc(){alert('ondblclick 이벤트 발생')}document.attachEvent('ondblclick',callFunc) 결과: // 문서 위 아무데서나 더블클릭 해 보라. 코드:<INPUT type=button value="attachEvent 재설정" onclick="document.detachEvent('ondblclick',callFunc);document.attachEvent('ondblclick',callFunc)"></SPAN> 결과:
blur	IE NS 개체가 초점을 잃고 onblur 이벤트가 발생된다. 문법: .blur()
clearAttributes	개체의 모든 애트리뷰트들과 값들을 삭제한다.
click	IE NS 개체를 클릭하는 것과 동일하게 onclick 이벤트가 발생된다. 문법: .click()
cloneNode	문서 계통도로부터 개체의 참조를 복사한다.
componentFromPoint	어떤 이벤트에서 지정된 좌표에 위치한 콤포넨트를 반환한다.
contains	개체 속에 주어진 엘레멘트가 있는가를 점검한다.
detachEvent	IE5 - attachEvent 이벤트로 첨부된 이벤트를 제거한다. 반환값은 없다. 문법: .detachEvent(event,funcion) 코드: <INPUT type=button value="detachEvent" onclick="document.detachEvent('ondblclick',callFunc)"></SPAN> 결과: // 클릭 후에는 attachEvent에서 설정된 이벤트가 제거된다. 제거 후 더블클릭해 보라.
dragDrop	ondragstart 이벤트를 시작한다.
fireEvent	개체에서 지정한 이벤트를 발생시킨다.
focus	개체에 초점을 주고 onfocus이벤트에 지정한 처리자 코드를 수행한다. 문법: .focus()
getAdjacentText	개체의 인접 문자열을 반환한다.
getAttribute	지정된 애트리뷰트의 값을 반환한다.
getAttributeNode	IE6 attribute.name속성을 참조하는 attribute 개체를 반환한다.
getBoundingClientRect	TextRectangle 개체들의 컬렉션에 연결됨을 지정하는 개체를 반환한다.
getClientRects	개체의 내용이나 클라이언트 범위(range)의 배치(layout)를 기술하는 사각형(rectangle)들의 컬렉션을 반환한다. 각 사각형은 한 줄이다.
getElementsByTagName	지정된 엘레멘트의 이름에 맞는 개체들의 컬렉션을 반환한다.
getExpression	주어진 속성의 표현(expression)을 반환한다.
handleEvent	- NS4 form 개체의 지정된 이벤트(event)의 이벤트 처리자를 호출한다. 문법: .handleEvent('event')
hasChildNodes	개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다.
insertAdjacentElement	지정한 위치에 엘레멘트를 삽입한다.
insertAdjacentHTML	엘레멘트의 지정된 위치에 주어진 HTML 문자열을 삽입한다.
insertAdjacentText	엘레멘트의 지정된 위치에 주어진 문자열을 삽입한다.
insertBefore	문서 계통도에서 모체 개체의 자식 노드로 엘레멘트를 삽입한다.
item	인덱스로 컬렉션의 한개의 개체를 반환한다. 문법: [oVal=].item('iVal') 코드: document.write(oObj.item(1).nodeName 결과:
mergeAttributes	지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다.
namedItem	IE6 이름(name)이나 인식자(id) 문자열에 해당하는 컬렉션에서 한개의 개체나 하부 컬렉션을 반환한다.
normalize	IE6 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다.
releaseCapture	현재 문서의 개체로 부터 마우스 캡쳐를 제거한다.
removeAttribute	개체로 부터 애트리뷰트를 제거한다.
removeAttributeNode	IE6 개체로 부터 애트리뷰트 개체 노드를 제거한다.
removeBehavior	개체로부터 behavior를 제거한다.
removeChild	개체로부터 자식 노드를 제거한다.
removeExpression	지정한 속성으로부터 표현(expression)을 제거한다.
removeNode	문서 계통도에서 개체를 제거한다.
replaceAdjacentText	개체에 인접 문자열을 교체한다.
replaceChild	현재의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다.
replaceNode	개체를 다른 엘레멘트로 교체한다.
reset	IE4 NS3 재설정 단추를 클릭한 것과 같은 효과를 주고 입력 폼의 데이터를 디폴트값으로 환원한다. 문법: .reset()
scrollIntoView	개체를 보기게 굴림(scroll)하고 윈도우의 맨위나 아래에 정렬한다.
setActive	개체에 초점을 주지 않은 상태에서 활성으로 설정한다.
setAttribute	지정된 애트리뷰트를 설정한다.
setAttributeNode	IE6 개체의 부분으로 애트리뷰트 개체 노드를 설정한다.
setCapture	현재 문서에 소속된 개체의 마우스 캡쳐를 설정한다
setExpression	지정된 개체의 표현(expression)을 설정한다.
submit	IE3.02 NS2 송신 단추를 클릭한 것과 같은 효과를 주고 입력 폼을 송신한다. 문법: .submit()
swapNode	문서 계통도에서 두 개체의 위치를 서로 바꾼다.
urns	behavior가 첨부된 모든 개체의 컬렉션을 반환한다. 문법: [sVal=].urns('sVal')

이벤트	설명
onactivate	엘레멘트 개체가 activeElement 속성으로 설정되면 발생한다.
onbeforeactivate	IE6 엘레멘트 개체가 activeElement 속성으로 설정되기 바로 전에 발생한다.
onbeforecopy	선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 원본 개체에 발생된다.
onbeforecut	문서로 부터 선택한 부분의 잘라내기 하기 바로 전에 원본 개체에 발생한다.
onbeforedeactivate	모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되기 바로 전에 발생한다.
onbeforeeditfocus	편집 가능한 개체가 활성화되거나 편집 가능한 용기에 제어 선택이 이루어 지기 바로 전에 발생한다.
onbeforepaste	시스템 클립보드(잘라낸거나 복사한 내용이 있는)로부터 문서의 목표개체에 붙여 넣기 바로 전에 발생한다.
onblur	IE4 NS3 개체가 초점을 생실했을 때 발생한다. 문법: .onblur='JsCode'
onclick	개체에서 마우스를 클릭(눌럿다 놓음)하면 발생되고 지정된 JsCode를 수행한다. 문법: .onclick='JsCode'
oncontextmenu	클라이언트 지역에서 오른쪽 마우스 단추를 클릭하였을 때나 콘텍스트(context) 메뉴를 열었을 때 발생
oncontrolselect	사용자가 개체의 제어 선택을 하려고 할 때 발생한다.
oncopy	선택된 내용이 시스템 클립보드(clipboard)로 복사하였을 때 원본 개체에 발생된다.
oncut	문서의 선택한 내용을 잘라 시스템 클립보드(잘라낸거나 복사한 내용이 있는)에 넣을 때 원본 개체에 발생
ondblclick	개체에서 마우스를 연속 두번 클릭하면 발생되고 지정된 JsCode를 수행한다. 문법: .ondblclick='JsCode'
ondeactivate	모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되면 발생한다.
ondrag	연속 끌기 동작이 진행되는 동안 원본 개체에 발생한다.
ondragend	연속 끌기 동작에서 마우스를 해제하여 진행이 완료되면 원본 개체에 발생한다.
ondragenter	연속 끌기 동작에서 성공적인 끌어 놓기가 완료면 목표 개체에 발생한다.
ondragleave	연속 끌기 동작에서 성공적인 끌어 놓기가 완료되어 목표 개체를 이탈하면 목표 개체에 발생한다.
ondragover	연속 끌기 동작에서 유효한 목표 개체 위에 있는 동안 연속적으로 목표 개체에 발생한다.
ondragstart	연속 끌기 동작에서 선택한 텍스트나 개체를 끌기 시작하면 원본 개체에 발생한다.
ondrop	연속 끌기 동작에서 마우스 단추를 해제하면 목표 개체에 발생한다.
onfocus	IE NS 개체가 초점을 받으면 발생되고 JsCode를 수행한다. 문법: .onfocus='JsCode'
onfocusin	IE6 엘레맨트에 초점을 조기 바로 전에 엘레멘트에 발생한다.
onfocusout	IE6 다른 엘레맨트로 초점을 이동하면 바로 현재 엘레멘트에 발생한다.
onhelp	활성 윈도우에서 도움말을 위하여 F1 키를 누르면 발생된다.
onkeydown	개체에서 자판(key)을 누르면 발생되고 지정된 JsCode를 수행한다. 문법: .onkeydown='JsCode'
onkeypress	개체에서 자판(key)을 누르고 있으면 발생되고 지정된 JsCode를 수행한다. 문법: .onkeypress='JsCode'
onkeyup	개체에서 자판(key) 누름을 해제하면 발생되고 지정된 JsCode를 수행한다. 문법: .onkeyup='JsCode'
onlosecapture	개체가 마우스 캡쳐(capture)를 해제하면 발생한다.
onmousedown	개체에서 마우스 단추를 눌렀을 때 발생되고 지정된 JsCode를 수행한다. 문법: .onmousedown='JsCode'
onmouseenter	마우스 포인터가 개체 위로 이동하면 발생한다.
onmouseleave	마우스 포인터가 개체 밖으로 이동하면 발생한다.
onmousemove	마우스 포인터가 개체 위에서 이동하면 발생한다.
onmouseout	마우스 포인터가 개체 밖으로 이동하면 발생한다.
onmouseover	마우스 포인터가 개체 위로 이동하면 발생한다.
onmouseup	개체에서 단추 누름을 해제하면 발생되고 지정된 JsCode를 수행한다. 문법: .onmouseup='JsCode'
onmousewheel	IE6 마우스 휠(wheel)을 굴리면 발생한다.
onmove	개체가 이동하면 발생한다.
onmoveend	개체의 이동이 중지되면 발생한다.
onmovestart	개체가 이동하기 시작하면 발생한다.
onpaste	시스템 클립보드(잘라낸거나 복사한 내용이 있는)로부터 문서의 목표개체에 붙여 넣으면 발생한다.
onpropertychange	개체의 속성을 변경발생한다.
onreadystatechange	개체의 준비상태(readyState) 속성을 변경시키면 발생한다.
onreset	reset 단추를 클릭했을 때 발생하고 입력폼(form)에서 입력을 취소하고 초기값으로 재설정한다. 문법: .onreset='JsCode'
onresize	윈도우나 프레임이등 개체의 크기가 조정되었 때 발생한다
onresizeend	제어 섹션에서 개체의 크기 변경이 완료되면 발생한다.
onresizestart	제어 섹션에서 개체의 크기 변경이 시작되면 발생한다.
onselectstart	개체가 선택되기 시작하면 발생한다.
onsubmit	submit 단추를 클릭하여 form 개체가 송신(인위적으로 클릭하거나 스크립트 formName.submit() 메서드에 의해 송신)될 때 지정된 Jcode를 수행한다. 문법: .onsubmit='JsCode'
ontimeerror	일반적으로 유효하지 않은 값의 결과에 의하여, 시간을 지정하는 오류가 일어나면 발생된다.