입력양식 객체
Contents Form 객체 텍스트 객체 패스워드 객체 버튼 객체 선택 객체 Window 객체
Form 객체 document 객체의 속성 Form 객체의 속성 객체들은 document.forms[] 배열을 통해 접근할 수 있다 입력양식과 관련된 이벤트의 회신 제공 Form 객체의 속성 속성들은 입력양식의 특성에 따른 접근, GUI의 컨트롤, 입력양식의 필드에 대하여 작업하는 방법 등을 지원
대부분의 경우, form 객체의 element 배열 속성을 사용하여 입력양식의 원소에 접근할 수 있다 Multiple Document Example 개별적인 입력양식과 form element가 다중 폼 document에서 어떻게 받아들여지는가를 나타냄 3개의 document가 생성되며, 첫 번째 form의 전송버튼을눌렀을 때 onSubmit() 핸들러는 displayFormData()함수를 호출한다.
Multiple Document Example (1/4) <HTML> <HEAD><TITLE> FORM 객체의 Access에 대한 예제 </TITLE></HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="JavaScript"> <!— function displayFormData() { win2=open(" ", "window2") win2.document.open("text/plain") win2.document.writeln("This document has "+ document.forms.length + "forms.") for(i=0; i<document.forms.length;++i) { win2.document.writeln("Form "+i+" has " + document.forms[i].elements.") for(j=0; j<document.forms[i].elements.length;++j) { win2.document.writeln((j+1)+"A"+document.forms[i].elements[j].type+" element.") } } win2.document.close() return false // --> </SCRIPT>
Multiple Document Example (2/4) </HEAD> <BODY> <H1> Multiform Document Example </H1> <FORM ACTION="nothing" onSubmit="return displayFormData()"> <H2> Form 1</H2> <P> Text field: <INPUT TYPE="TEXT" NAME="f1-1" VALUE="Sample text"></P> <P> Password field: <INPUT TYPE="PASSWORD" NAME="f1-2"></P> <P> Text area field: <TEXTAREA ROWS="4" COLS="30" NAME="f1-3">Write your novel here.</TEXTAREA></P> <P><INPUT TYPE="SUBMIT" NAME="f1-4" VALUE="Submit"> <INPUT TYPE="RESET" NAME="f1-5"></P> </FORM> <HR> <FORM> <H2>Forms 2</H2> <P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="1" CHECKED> Check me! </P> <P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="2" > No. Check me!</P> <P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="3" > Check all of us!</P> <P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="1" > AM </P> <P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="2" CHECKED> PM</P> <P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="3" > FM</P>
Multiple Document Example (3/4) <INPUT TYPE="FILE" NAME="f2-3"> </FORM> <HR> <FORM> <H2>Form 3</H2> <INPUT TYPE="HIDDEN" NAME="f3-1"> <SELECT NAME="f3-2" SIZE="4"> <OPTION VALUE=" " >Item 1</OPTION> <OPTION VALUE=" " >Item 2</OPTION> <OPTION VALUE=" " SELECTED>Item 3</OPTION> <OPTION VALUE=" " >Item 4</OPTION> <OPTION VALUE=" " >Item 5</OPTION> </SELECT> </BODY> </HTML>
Multiple Document Example (4/4) 실행 결과
텍스트 객체 Text 객체와 TextArea 객체 Text 객체 TextArea 객체 HTML 화일의 텍스트 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 text 객체의 속성, 메소드, 이벤트의 기능 TextArea 객체 Text 객체가 한 줄의 문자열만 입력할 수 있는 데 반해 TextArea는 여러 줄의 문자열을 입력할 수 있다. <INPUT> 태그를 사용하지 않음 <TEXTAREA NAME=". . ."> 태그 사용 NAME에 이름을 지정한 후 이 이름을 직접 개체변수로 이용 NAME 옵션이 지정되지 않은 경우, 이 객체를 사용할 수 없음 textarea 객체의 속성, 메소드, 이벤트의 기능
Text 객체의 Property에 대한 예제(1/2) <HTML> <HEAD><TITLE> TEXT객체의 Property에 대한 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function text_pro() my_form.name1.value="김정숙" function text_perty() { var mystr="[1] 이름: " + my_form.name2.name + "“ mystr += "[2] 현재문자열: " + my_form.name2.value + "“ mystr += "[3] 초기문자열: " + my_form.name2.defaultValue + "“ mystr += "[4] 형식 : " + my_form.name2.type alert(mystr) } // --> </SCRIPT> </HEAD> <BODY onLoad="text_pro()"> <FORM NAME="my_form"> 이름1: <INPUT TYPE = "text" NAME="name2" VALUE="이야리"><P> 이름2: <INPUT TYPE = "text" NAME="name1" ><P> <INPUT TYPE = "button" VALUE="확인" onClick="text_property()"> </FORM> <HR> </BODY> </HTML>
Text 객체의 Property에 대한 예제(2/2) 실행결과
TextArea 객체의 defaultValue 속성과 select()메소드를 활용한 예제(1/2) <HTML> <HEAD><TITLE> TEXTAREA객체의 Property와 Method에 대한 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function text_area(textStr) textStr.value=textStr.defaultValue function SelectAll(textStr) textStr.select() // --> </SCRIPT> </HEAD> <BODY> <H2> 텍스트 입력상자의 기능을 테스트하고자 합니다.</H2><HR> <FORM NAME="form-1"> <TEXTAREA NAME="area1" ROW=10 COLS=30> 텍스트입력상자를 이해합시다! </TEXTAREA><BR> <INPUT TYPE="button" VALUE="초기화 문장" onClick="text_area (this.form.area1)"> <INPUT TYPE="button" VALUE=" 전체 선택" onClick="SelectAll(this.form.area1)"> </FORM> </BODY> </HTML>
TextArea 객체의 defaultValue 속성과 select()메소드를 활용한 예제(2/2) textarea에 초기값으로 "textarea를 이해합시다!"라는 문자열을 반환하며 select() 메소드는 텍스트입력상자에 입력된 모든 문자열을 선택할 수 있게 함 실행결과
패스워드 객체 password 객체와 hidden 객체 Password 객체 Hidden 객체 HTML 화일의 암호입력 상자를 처리할 수 있도록 속성, 메소드, 이벤트를 제공 입력상자와 태그 형식 비슷 차이점 텍스트 입력상자는 입력한 텍스트가 그대로 문자로 출력되지만 암호 입력상자는 입력한 텍스트의 문자 대신에 '*' 가 출력 Hidden 객체 숨겨진 양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 사용자에게는 보이지 않지만 임시로 보관해야 할 텍스트 필드를 위해 제공되는 객체 메소드와 이벤트가 없음 임시로 상태 문자열을 저장하기 위해 사용하므로 사용자가 처리할 부분이 없기 때문이다.
password 객체의 속성과 메소드를 활용한 예제(1/2) <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!— function ok_len(pass) { var mylen=pass.value.length if((mylen >= 4) && (mylen <=8)) { alert(" 전송 OK !") } else { alert("암호를 4자 이상으로 다시 입력 요망!") pass.value=" “ pass.focus() } } // --> </SCRIPT> </HEAD> <BODY> <H2> <HR> 암호는 4자에서 8자 이내로 입력 요망 !!! <FORM NAME="frm1"> 이름: <INPUT TYPE="text" NAME="name1" SIZE=8 MAXLENGTH=8><BR> 암호: <INPUT TYPE="password" NAME="pass1" SIZE=8 MAXLENGTH=8><P> <INPUT TYPE="button" VALUE="확인" onClick="pass_len(frm1.pass1)"> </FORM> </H2> </BODY> </HTML>
password 객체의 속성과 메소드를 활용한 예제(2/2) 실행결과
버튼 객체 HTML 화일의 버튼 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 button, submit, reset, fileUpload 객체
Button 객체 Submit 객체 버튼의 역할 HTML의 전송 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 사용자에게 수행이나 지시를 처리할 수 있게 해줌으로써 가장 많이 사용하는 객체 중의 하나 태그 <INPUT TYPE="button"> button 객체의 속성, 메소드, 이벤트의 기능 Submit 객체 HTML의 전송 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 <FORM> 태그 안에 있는 모든 양식들의 값을 서버에 전송하기 위해 사용하는 객체 <INPUT TYPE="submit">
Reset 객체 FileUpload 객체 HTML 입력 양식을 취소 처리할 수 있도록 속성, 메소드, 이벤트 를 제공 submit 객체와는 반대로 <FORM> 태그 안에 있는 모든 양식들의 VALUE 속성에 설정된 값을 초기화시켜주는 역할 태그 <INPUT TYPE="reset" NAME="..."> reset 객체의 속성, 메소드, 이벤트의 기능 FileUpload 객체 자신의 시스템에 있는 파일을 선택하여 전송하고 싶을 때 사용 텍스트 상자와 [찾아보기] 버튼으로 구성 객체 선언의 방법 <INPUT> 태그의 TYPE 속성을 "file"로 설정
button 객체의 속성과 메소드를 활용한 예제(1/2) <HTML> <HEAD><TITLE> 버튼 객체의 속성과 메소드에 대한 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function show() { str="Button Type:" + document.myform.button1.type+"" + "Button Name: " + document.myform.button1.name+""+ "Button Value: " + document.myform.button1.value alert(str); } // --> </SCRIPT> </HEAD> <BODY> <H2> 버튼 객체의 속성과 메소드 익히기</H2> 버튼을 누르면 버튼 정보가 나타납니다.<P> <FORM NAME="myform"> <INPUT TYPE="button" NAME="button1" VALUE="내가 만든 버튼" onClick="show()"> </FORM> </BODY> </HTML>
button 객체의 속성과 메소드를 활용한 예제(2/2) 버튼을 하나 만든 후 그 버튼에 대한 정보를 알아보는 간단한 예제 실행결과
submit 객체의 속성과 메소드를 활용한 예제(1/2) <HTML> <HEAD> <TITLE> Submit 객체의 속성과 메소드 활용 예제 </TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!— function change(form) { form.submit(); } --> </SCRIPT> <BODY> <HR> 입력양식 객체의 자료 입력<BR> <FORM METHOD=POST> 이름<BR> <INPUT TYPE=text NAME="NAME" VALUE=" "><BR> 메일주소<BR> <INPUT TYPE=text NAME="EMAIL" VALUE=" "><BR> 하고싶은말 <BR> <TEXTAREA NAME="COMMENT" VALUE=" " cols=20 lows=20></textarea><br> <INPUT TYPE=button NAME="SEND" VALUE="등록하기" onClick="change(this.form)"> <INPUT TYPE=submit VALUE="전송하기"> </FORM> </BODY> </HTML>
submit 객체의 속성과 메소드를 활용한 예제(2/2) 실행결과
reset 객체의 속성과 메소드를 활용한 예제 <HTML> <HEAD> <TITLE> Reset 객체의 속성과 메소드 활용 예제 </TITLE></HEAD> <BODY> <H2> <FORM NAME="form"> 이름: <INPUT TYPE="text" NAME="name" VALUE="김정숙"> <BR> 주소: <INPUT TYPE="text" NAME="addr"> <BR> <INPUT TYPE="Reset" VALUE="취소" onClick="alert('취소버튼 클릭.')"> </FORM> </H2> </BODY> </HTML>
FileUpload 객체의 속성과 메소드를 활용한 예제(1/2) <HTML> <HEAD><TITLE> FileUpload 객체의 속성과 메소드 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function fileup(file) { var mystr=" "; mystr +="[1] name: " + file.name + "“ mystr +="[2] type: " + file.type + "“ mystr +="[3] value:" + file.value alert(mystr) } // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="form" > <INPUT TYPE="file" NAME="file-1"> <HR> <INPUT TYPE="button" VALUE="Upload 파일" onClick="files(form.file-1)"> </FORM> </BODY> </HTML>
FileUpload 객체의 속성과 메소드를 활용한 예제(2/2) 실행결과
선택 객체 Select, Radio, Checkbox 객체 Select 객체 리스트 박스와 콤보박스를 만들 수 있는 태그 미리 목록이 표시되고 그 중에서 원하는 항목을 선택할 수 있는 기능을 가진 입력양식 SIZE 속성값을 설정하지 않거나 1로 설정하면 콤보박스 SIZE 속성값을 1이상으로 설정하면 리스트박스 Select 객체의 속성, 메소드, 이벤트의 기능
Radio 객체 라디오 버튼을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 여러 개의 그룹 안에서 한 개의 라디오 버튼만을 선택할 수 있음 객체의 선언 <INPUT> 태그의 TYPE 속성을 radio로 설정, CHECKED 속성을 이용하여 미리 선택할 지의 선택유무 지정
Checkbox 객체 HTML의 체크박스를 처리할 수 있도록 속성, 메소드, 이벤트를 제공 한 번 선택하면 체크되고 다시 한 번 선택하면 체크가 없어짐 2개 이상의 항목도 선택할 수 있음 태그 <INPUT TYPE="checkbox" NAME="..."> checkbox 객체의 속성, 메소드, 이벤트의 기능
select 객체의 속성과 메소드를 활용하여 화면에 목록 상자를 만드는 예제(1/2) <HTML> <HEAD><TITLE> Select 객체의 속성과 메소드 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function show() { str ="목록상자의 상태:" + document.myForm.list.type + ""; str += "목록상자의 이름:" + document.myForm.list.name + ""; str += "목록상자의 항목수:" + document.myForm.list.length + ""; str += "선택된 항목의 인덱스번호:" + document.myForm.list.selectedIndex; alert(str); // --> </SCRIPT> </HEAD> <BODY> <H1> Select 객체의 속성과 메소드 이해 !</H1> 원하는 목록상자를 누르면 정보를 얻을 수 있다.<P> <FORM NAME="myForm"> <SELECT NAME="list" SIZE="5"> <OPTION> 야후 <OPTION> 알타비스타 <OPTION> 라이코스 <OPTION> 심마니 </SELECT><p> <INPUT TYPE="button" VALUE="보기" onClick="show()"> </FORM> </BODY> </HTML>
select 객체의 속성과 메소드를 활용하여 화면에 목록 상자를 만드는 예제(2/2) 실행결과
Radio 객체의 속성과 메소드를 활용하여 화면에 5개의 라디오 단추를 만드는 예제(1/2) <HTML> <HEAD><TITLE> Select 객체의 속성과 메소드 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function show() { str ="라디오단추의 형태:" + document.myForm.radio_button[1].type + ""; str += "라디오단추의 이름:" + document.myForm.radio_button[1].name + ""; str += "라디오단추의 갯수:" + document.myForm.radio_button.length; alert(str); } // --> </SCRIPT> </HEAD> <BODY> <H1> Radio 객체의 속성과 메소드 이해 !</H1> 원하는 라디오단추를 누르면 정보를 얻을 수 있다.<P> <FORM NAME="myForm"> <INPUT TYPE="radio" NAME="radio_button">빨간색<p> <INPUT TYPE="radio" NAME="radio_button">초록색<p> <INPUT TYPE="radio" NAME="radio_button">빠란색<p> <INPUT TYPE="radio" NAME="radio_button">하얀색<p> <INPUT TYPE="radio" NAME="radio_button">검정색<p> <INPUT TYPE="button" VALUE="보기" onClick="show()"> </FORM> </BODY> </HTML>
Radio 객체의 속성과 메소드를 활용하여 화면에 5개의 라디오 단추를 만드는 예제(2/2) 실행결과
화면에 체크박스를 만든 후 속성값 들을 확인하는 간단한 예제(1/2) <HTML> <HEAD><TITLE> Checkbox 객체의 속성과 메소드 예제 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!— function show() { str ="체크박스의 형태:" + document.myForm.check.type + ""; str += "체 크박스의 이름:" + document.myForm.check.name + ""; str += "체크박스의 값:" + document.myForm.check.value; alert(str); } // --> </SCRIPT> </HEAD> <BODY> <H1> Checkbox 객체의 속성과 메소드 이해 !</H1> 원하는 체크박스를 누르면 정보를 얻을 수 있다.<P> <FORM NAME="myForm"> <INPUT TYPE="checkbox" NAME="check" VALUE="Yahoo">야후<p> <INPUT TYPE="button" VALUE="보기" onClick="show()"> </FORM> </BODY> </HTML>
화면에 체크박스를 만든 후 속성값 들을 확인하는 간단한 예제(1/2) 실행결과