14장:입력양식1(Form)

HTML만을로는 모든정보를 처리 할 수가 없기 때문에 이것을 지원하기 위해 외부 프로그램과 웹서버간의
연결역활을 하기위한 규약이 CGI이다.
홈페이지를 방문해서 방명록이나 게시판에 글을 남기면 CGI 프로그램이 입력한 테이터들을 서버로 전달한다.
CGI를 사용하기 위해서 웹쪽 에서는 FORM태그를 사용 입력값을 서버에 전달해주고 서버에서는 입력값을 받아서
CGI프로그램으로 넘겨주게 된다.
우리가 알아야 할것은 서버쪽이 아닌 클라이언트 즉 CGI를 사용할수 있는 입력부분인 FORM태그만
홈페이지에 구현해주면 된다.

1. Form 객체

   form택을 자바스크립트에서 접근하기 위한 객체로 document객체 하위에 속한다.

   • Form 객체의 특성

     특성	의미
     target	데이터를 서버로 보낸후 받아보는 결과를 어느 윈도우에서 받아 볼지를 지정
     action	압력한 데이터를 처리할 CGI 프로그램의 URL지정
     method	데이터를 어떤 HTTP 프로토콜로 보낼 것인지 지정한다
     encoding	CGI 프로그램에 보내질 데이터 타입을 지정한다
     elements	form택안에 있는 모든 입력양식을 배열로 저장

   • Form 객체의 메소드

     메소드	의미
     submit()	입력된 데이터를 서버로 보내기 위한 메소드
     reset()	입력양식을 리셋 시키는 메소드

   • Form 객체의 이벤트 핸들러

     이벤트 핸들러	의미
     onSubmit	데이터를 서버에 보내라는 명령을 내렸을때 실행되는 이벤트 핸들러
     onReset()	리셋버튼을 눌렀을때 실행되는 이벤트 핸들러

     예제1

     실행화면

     <script language="javascript"> <!-- function forminfor() { var mirage = "Action : " + document.form1.action + "\n" mirage += "Target : " + document.form1.target + "\n" mirage += "Method : " + document.form1.method + "\n" mirage += "encoding : " + document.form1.encoding + "\n" alert(mirage) } //--> </script> <form name="form1" action="http://mirage728.com.ne.kr" target=" _blank" method=post> <input type="button" value="form 정보" onclick="forminfor()"> <input type="submit" value="submit"> </form>

     <FORM name="form1" action="http://mirage728.com.ne.kr" method="post" target=" _blank"><INPUT onclick="forminfor()" type="button" value="form 정보"> <INPUT type="submit" value="submit"> </FORM>

     예제2	실행화면
     <script> function chform() { mirage = document.form2.elements[0].value if(mirage != "") alert(mirage + "님 홈 방문을 환영 합니다.\n\n좋은 시간 되세요..^^") else alert("이름을 입력해 주세요") } </script> <form name=form2> 이름을 입력해 주세요 <input type="text"> <input type="button" value="확인" onclick="chform()"> <input type="reset" value="취소"> </form>	<FORM name="form2">이름을 입력해 주세요 <INPUT> <INPUT onclick="chform()" type="button" value="확인"> <INPUT type="reset" value="취소"> </FORM>

2. Text 객체

   한줄짜리 문자열을 입력 받기 위한 형식으로 form 객체의 하위에 속한다.

   • Text 객체의 특성

     특성	의미
     name	텍스트 입력양식의 이름
     value	텍스트 입력양식에 입력한 값
     defaultValue	처음 input 택의 value에 입력했던 값
     type	input 택에서 type에 입력된 값

   • Text 객체의 메소드

     메소드	의미
     select()	텍스트 입력필드에 있는 모든 값 선택하기
     focus()	텍스트 입력필드안에 커서 넣기
     blur()	텍스트 입력필드안의 커서 제거하기

   • Text 객체의 이벤트 핸들러

     이벤트 핸들러	의미
     onSelect	마우스로 입력필드의 문자열을 선택했을 때
     onFocus	마우스나 탭으로 커서가 입력필드 안에 들어갔을 때
     onBlur()	마우스나 탭으로 커서가 입력필드 에서 나갔을때
     onChange	텍스트 입력양식의 값을 바꾸었을 때

     예제3

     실행화면

     <script> function mirage5(mir) { test = mir.tex1.value if(test == "") { alert("답을 입력해 주세요") mir.tex1.focus() } else if(test == "3" || test == "3번" || test == "삼" || test == "신기루") { alert("정답입니다.\n\n상품은 아직 마련하지 못했습니다..^^;" ) } else { alert("틀렸습니다.\n다시선택해 주세요.") mir.tex1.focus() mir.tex1.select() } } </script> 문제1) mirage는 무슨 뜻일까요..? 1 바보 2 미꾸라지 3 신기루 4 신발 <form name=form4> 정답: <input type="text" name="tex1"> <input type="button" value="확인" onclick="mirage5(this.form)"> </form>

     문제1) mirage는 무슨 뜻일까요..? 1 바보 2 미꾸라지 3 신기루 4 신발 <FORM name="form4">정답: <INPUT name="tex1"> <INPUT onclick="mirage5(this.form)" type="button" value="확인"></FORM> ※ 간단해석 input 버튼을 클릭하면 mirage5함수를 호출하는데 매개변수로 this.form을 함께 넘겨주고 있다. this란 객체 자기 자신을 가리키는 말로 this.form은 form객체 자신을 가리킨다. 위에있는 스크립트를 보면 mirage5함수의 매개변수에 this.form 이 아닌 mir로 되어있다. 위에있는 mir은 this.form을 담은 하나의 변수이다

     객체에 접근 할때는 매개변수에 들어있는(mir) 이름으로 접근하면 된다.
     mir(mirage5함수에 들어있는 매개변수로 this.form을 담고있는 form객체 자신이다).text1.value
     객체에 접근 할때는 상위 객체부터 하위객체로 . 을 구분으로 해서 써주면 된다.
     보통 최상위객체는 생략해도 상관없다.[(window.document.)mir.text1.value]

3. Textarea 객체

   여러줄을 입력할 수 있는 양식이다.
   텍스트 영역을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Textarea 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Textarea 속성

     속성	설명
     name	텍스트 영역의 이름지정
     rows	텍스트 영역의 높이
     cols	텍스트 영역의 너비
     wrap	글자가 우측 끝까지 갔을때 자동 줄바꿈할 것인지의 여부

   • Textarea 객체의 특성

     특성	설명
     name	텍스트 영역의 이름
     value	텍스트 영역에 입력한 값
     defaultValue	<textarea> </textarea> 사이에 들어간 글자
     type	input 택에서 type에 입력된값(textarea)

   • Textarea 객체의 메소드

     메소드	설명
     select()	텍스트 영역 안에 있는 모든값 선택하기
     focus()	텍스트 영역안에 커서 넣기
     blur()	텍스트 영역안에서 커서 제거하기

   • Textarea 객체의 이벤트 핸들러

     이벤트 핸들러	설명
     onSelect	마우스로 텍스트 영역에서 글을 선택했을 때
     onFocus	마우스나 탭으로 커서가 텍스트안에 들어갔을 때
     onBlur	마우스나 탭으로 커서가 텍스트 영역을 나갔을 때
     onChange	텍스트 영역의 값을 바꿨을 때
     onKeyDown	입력필드에서 키를 눌렀을때
     onKeyPress	입력필드에서 키를 눌렀을때
     onKeyUp	입력필드에서 키를 놓았을때

4. Password 객체

   글내용을 * 표시로 나타내서 주위의 다른 사람이 글내용을 볼수없게 하는 기능이다.
   암호 입력 양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Password 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Password 속성

     속성	설명
     name	암호 입력 양식의 이름지정
     value	암호 입력 양식에 미리입력할 문자열 지정
     type	password
     size	암호 입력양식의 가로 길이지정

   • Password 객체의 특성

     특성	설명
     name	암호 입력 양식의 이름지정
     value	암호 입력 양식에 입력한 값
     defaultValue	처음 value속성에 설정된 값
     type	type에 입력된값(password)

   • Password 객체의 메소드

     메소드	설명
     select()	암호 입력양식에 있는 모든값 선택하기
     focus()	암호 입력 양식안에 커서넣기
     blur()	암호 입력 양식안에서 커서 제거하기

5. Hidden 객체

   숨겨진 입력양식으로 사용자가 브라우저를 통해 볼수가 없다.
   숨겨진 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
   그렇기 때문에 Hidden 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다

   • Hidden 속성

     속성	설명
     type	hidden
     value	숨겨진 입력양식에 저장할 문자열 지정
     name	숨겨진 입력양식의 이름지정

   • Hidden 객체의 특성

     특성	설명
     name	숨겨진 입력양식 이름
     value	숨겨진 입력양식에 입력한 값
     defaultValue	처음 value속성에 설정된 문자열
     type	type에 입력된값(hidden)

[출처] [14]입력양식1|작성자 붉은매