• 폼 attribute 정리
• 폼 Object 정리
• 폼에서 this, this.form
• 두개의 창에서 폼값을 주고 자신의 창을 닫기
• 이전 페이지로 돌아가기
• 끌어내림 상자(drop down menu)로 링크하기
• 폼의 text field의 글자수정 방지하기
• 폼과 Database
• 기 타

Property : accept, accept-charset, action, elements[i], encoding, enctype, length, method, name, target
Method : handleEvent(evt), reset(), submit()
Event Handler : onclick, ondblclick, onkeydown, onkeypress, onkeyup (intrinsic events), onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onReset, onSubmit

폼 attribute 정리

accept

accept = content-type-list 서버가 처리하는 content types의 comma-separated list를 열거합니다. 서버로 파일을 보낼때, 사용자는 확인되지 않은 파일정보를 제어할 수 있습니다.

accept-charset = charset list서버가 폼을 처리시 accept될 수 있는 input data의 character encodings을 지정합니다. 지정되지 않은 문자를 입력하는 것을 막고, 사용자가 사용하는 agent가 사용자에게 지정되지 않은 문자셋 이라고 알려 줍니다. 공백, and 나 컴마로 charset value의 list를 열거할 수 있습니다.서버는 각 entity당 어떠한 single character encoding 도 처리를 할 수 있어야 합니다. 기본으로 UNKNOWN이 지정됩니다.

action = URL로 사용됩니다. URL는 mailto:URL일 수 있고, 폼을 처리하는 HTTP URL이 올 수 있습니다. 이 URL의 길이는 256자로 제한 됩니다.

enctype = content-type이 attribute는 method=post이고, 폼이 서버에 submit 될 때의 content type를 지정 합니다. 기본은 "application/x-www-form-URLencoded" 가 지정됩니다. "multipart/form-data"는 INPUT element의 type="file"와 함께 사용되어야 합니다.

enctype="text/plain"는 폼 메일보낼 때 사용하면 encode를 하지않아 메일을 잘 볼수 있습니다.

주로, cgi에서 폼의 입력값을 처리할 때 쓰입니다. method = get, method = post로 사용합니다. 지정이 안되어 있으면 기본으로 method=get가 지정됩니다.

 method="get"는 action에 지정된 URL에 폼의 내용을 더해서 처리 하고자 하는 agent에 보냅니다. 서버의 agent를 변형시키지 않는 미리 지정되어 있는 방명록같은 것의 변수 이름으로 사용됩니다. 단순히, 폼의 입력값 즉, 환경 변수 QUERY_STRING인 ?name=value를 서버에 보냅니다. 예: Database 검색.

 method="post"는 form body에 폼의 내용을 포함해서 처리 agent에 보냅니다. 폼의 입력값은 표준 입력 값(stdin)으로 서버에서 취급 됩니다. 그리고 서버는 클라이언트에게 화일의 끝을 알리는 EOF를 보내지 않습니다. 반면에 클라이언트는 환경 변수 (CONTENT_LENGTH)로 얼마 만큼의 입력값이 stdin에서 입력 되었는지 알 수 있습니다. Post는 Database를 수정하고 어떤 서버 agent에 서명 등을 할 때 사용합니다.

  참고로 폼메일에서는 둘 다 사용이 가능합니다.

두곳의 페이지에서 링크를 해놓은 페이지는 돌아기기 위해서 링크를 두개 만들어야 합니다. 이 때, 하나의 링크로 두곳 중 한 페이지로 돌아가는 방법입니다.

<a href="javascript:history.go(-1)">BACK</a>

<a href="javascript:history.back()">BACK</a>

<form><input type="button" value="BACK" onClick="history.go(-1)"></form>

this는 Object 자신을 가리킵니다. 그래서 form에서의 this는 form 자신을 말합니다.
form element에서 this는 그 element 자신을 말합니다. 그리고, form element에서 form 전체를 지정 할려면, this.form 으로 써야 합니다.


두개의 창에서 폼값을 주고 자신의 창을 닫기

사용자의 입력으로 무엇을 하기 위해서 그 기능만하고 닫는 조그만 창을 주로 사용합니다. 폼에 사용자의 입력을 받고난 다음 입력창을 닫는 방법입니다.

처음 창에서..

newWin = window.open("w2.htm", "A", "width=300,height=300");
if ( !document.images ) newWin.opener = self //nn2에 opener 지정

<a href="JavaScript:openNewWindow()">Open Window</a>
<form name="hiddenForm">
<input name="h1" type=hidden value="">
<input name="h2" type=hidden value="">
</form>

function server() {
	var temp = opener.document.hiddenForm;
	temp.h1.value = document.fo.txt1.value;
	temp.h2.value = document.fo.txt2.value;
	self.close();
}

<form name="fo">
<input name="txt1" type=text value="">
<input name="txt2" type=text value="">
<input type=button onClick="server()" value="폼 보내기">
</form>

페이지에 링크로 여러 링크를 적으면 공간을 많이 차지합니다. 선택상자를 사용하면 공간을 줄일 수 있습니다. 한개 선택하고 GO 버튼을 누르면 지정한 곳으로 갑니다.

<form name="fo">
  <select name="selectName">
    <option value="home.htm">Home
    <option value="faq.htm">Faq
    <option value="source.htm">Spurce
  </select>
  <input type=button value="GO" onClick="self.location.href = this.form.selectName.options[this.form.selectName.selectedIndex].value;"> 
</form>

어떤 안내말이나 문자들을 사용자에게 보여줄 때 폼의 text field를 사용할 수 있습니다. 이때, 사용자가 text의 문자들을 수정할 수 없게할 필요가 있습니다. 폼의 text field의 focus, blur 이벤트를 사용합니다. 사용자가 폼의 text field에 마우스로 focus를 주면 강제로 blur 시키는 방법입니다.

<form  name=fo>
<input type=text name=txt value="NO" onFocus="setTimeout('document.fo.txt.blur()',1)">
</form>

function check(X) {
	if( X.ch.checked ) 
		setTimeout("document.fo2.txt.blur()", 1)
}
--
<form name=fo2>
	<input type=text name="txt" value="NO" onFocus="check(this.form)">
	<input type=checkbox name="ch"> 수정못함.
</form>

<form name=changeCurse>
	<input type=text name="txt1"> 
	<input type=text name="txt2" value="커서 위로 보냄" onFocus = "curseTo()">
</form>

<script>
function curseTo() {
  setTimeout("document.changeCurse.txt1.focus(); document.changeCurse.txt2.blur()", 1)
}
</script>

DataBase를 만들 때, 폼으로 직접 하니 IE4에서 한글 검색에 실패 했습니다. 배열에 문자열을 저장해 놓고 submit를 하고 unescape하여 indexOf로 하니 안되었습니다. NN4는 성공 했습니다. 그래서, submit로 하지말고 프레임을 만들고 직접 button으로 보내어 폼 submit의 encode, unescape 과정을 피해야 겠습니다. 이것은 NN4, IE4 둘 다 성공했습니다.

그리고, DB의 용량이 너무 많아 검색 결과가 너무 많이 나오면 페이지에 출력하는데 시간이 많이 걸립니다. 사용자의 PC나 브라우저의 CACHE설정이 다 틀리기 때문에 기본적인 상황에서 일반 CGI에 비해 시간이 차이가 나지 않아야 겠습니다. 즉, 문자열 검색을 하는데, 아주 흔한 글자를 사용자가 입력시 이런 결과가 일어날 수 있습니다.

그러므로, 폼의 입력값을 먼저 확실히 chack하거나 폼 선택창(select)을 사용하면 많은 결과가 나오는 것을 피할 수 있습니다. 출력시간을 줄이기 위해서 숨은 프레임에 데이타를 저장할 수 있습니다.


기 타

• 보안을 위해서, ACTION에 mailto:URL이 지정되면 form.submit()로는 보낼 수 없습니다. 그리고, IE3.x, IE4.x에는 폼메일이 안됨. 단순히 메일창을 띄웁니다. mailto와 같습니다.
• hidden field의 값은 페이지가 재출력 되면 원래의 값으로 지정됩니다. 그리고 value가 지정이 안되어 있으면 이상한 두 칸의 공백으로 설정합니다.. 그러므로, hidden field에는 value를 항상 지정해 주는것이 좋습니다.. value=""로요..
• form text 필드의 value의 값은 문자열 입니다. form에 숫자 23을 입력하면 문자 "23"이 됩니다. 여기에 빼기 -0 을 하면 숫자 23이 됩니다. form에 아무런 입력값이 없으면 null문자 입니다.