Download presentation
Presentation is loading. Please wait.
1
입력양식 객체
2
Contents Form 객체 텍스트 객체 패스워드 객체 버튼 객체 선택 객체 Window 객체
3
Form 객체 document 객체의 속성 Form 객체의 속성
객체들은 document.forms[] 배열을 통해 접근할 수 있다 입력양식과 관련된 이벤트의 회신 제공 Form 객체의 속성 속성들은 입력양식의 특성에 따른 접근, GUI의 컨트롤, 입력양식의 필드에 대하여 작업하는 방법 등을 지원
4
대부분의 경우, form 객체의 element 배열 속성을 사용하여 입력양식의 원소에 접근할 수 있다
Multiple Document Example 개별적인 입력양식과 form element가 다중 폼 document에서 어떻게 받아들여지는가를 나타냄 3개의 document가 생성되며, 첫 번째 form의 전송버튼을눌렀을 때 onSubmit() 핸들러는 displayFormData()함수를 호출한다.
5
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>
6
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>
7
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>
8
Multiple Document Example (4/4)
실행 결과
9
텍스트 객체 Text 객체와 TextArea 객체 Text 객체 TextArea 객체
HTML 화일의 텍스트 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 text 객체의 속성, 메소드, 이벤트의 기능 TextArea 객체 Text 객체가 한 줄의 문자열만 입력할 수 있는 데 반해 TextArea는 여러 줄의 문자열을 입력할 수 있다. <INPUT> 태그를 사용하지 않음 <TEXTAREA NAME=". . ."> 태그 사용 NAME에 이름을 지정한 후 이 이름을 직접 개체변수로 이용 NAME 옵션이 지정되지 않은 경우, 이 객체를 사용할 수 없음 textarea 객체의 속성, 메소드, 이벤트의 기능
10
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>
11
Text 객체의 Property에 대한 예제(2/2)
실행결과
12
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>
13
TextArea 객체의 defaultValue 속성과 select()메소드를 활용한 예제(2/2)
textarea에 초기값으로 "textarea를 이해합시다!"라는 문자열을 반환하며 select() 메소드는 텍스트입력상자에 입력된 모든 문자열을 선택할 수 있게 함 실행결과
14
패스워드 객체 password 객체와 hidden 객체 Password 객체 Hidden 객체
HTML 화일의 암호입력 상자를 처리할 수 있도록 속성, 메소드, 이벤트를 제공 입력상자와 태그 형식 비슷 차이점 텍스트 입력상자는 입력한 텍스트가 그대로 문자로 출력되지만 암호 입력상자는 입력한 텍스트의 문자 대신에 '*' 가 출력 Hidden 객체 숨겨진 양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 사용자에게는 보이지 않지만 임시로 보관해야 할 텍스트 필드를 위해 제공되는 객체 메소드와 이벤트가 없음 임시로 상태 문자열을 저장하기 위해 사용하므로 사용자가 처리할 부분이 없기 때문이다.
15
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>
16
password 객체의 속성과 메소드를 활용한 예제(2/2)
실행결과
17
버튼 객체 HTML 화일의 버튼 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공
button, submit, reset, fileUpload 객체
18
Button 객체 Submit 객체 버튼의 역할 HTML의 전송 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공
사용자에게 수행이나 지시를 처리할 수 있게 해줌으로써 가장 많이 사용하는 객체 중의 하나 태그 <INPUT TYPE="button"> button 객체의 속성, 메소드, 이벤트의 기능 Submit 객체 HTML의 전송 입력양식을 처리할 수 있도록 속성, 메소드, 이벤트를 제공 <FORM> 태그 안에 있는 모든 양식들의 값을 서버에 전송하기 위해 사용하는 객체 <INPUT TYPE="submit">
19
Reset 객체 FileUpload 객체 HTML 입력 양식을 취소 처리할 수 있도록 속성, 메소드, 이벤트 를 제공
submit 객체와는 반대로 <FORM> 태그 안에 있는 모든 양식들의 VALUE 속성에 설정된 값을 초기화시켜주는 역할 태그 <INPUT TYPE="reset" NAME="..."> reset 객체의 속성, 메소드, 이벤트의 기능 FileUpload 객체 자신의 시스템에 있는 파일을 선택하여 전송하고 싶을 때 사용 텍스트 상자와 [찾아보기] 버튼으로 구성 객체 선언의 방법 <INPUT> 태그의 TYPE 속성을 "file"로 설정
20
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>
21
button 객체의 속성과 메소드를 활용한 예제(2/2)
버튼을 하나 만든 후 그 버튼에 대한 정보를 알아보는 간단한 예제 실행결과
22
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=" " 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>
23
submit 객체의 속성과 메소드를 활용한 예제(2/2)
실행결과
24
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>
25
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>
26
FileUpload 객체의 속성과 메소드를 활용한 예제(2/2)
실행결과
27
선택 객체 Select, Radio, Checkbox 객체 Select 객체 리스트 박스와 콤보박스를 만들 수 있는 태그
미리 목록이 표시되고 그 중에서 원하는 항목을 선택할 수 있는 기능을 가진 입력양식 SIZE 속성값을 설정하지 않거나 1로 설정하면 콤보박스 SIZE 속성값을 1이상으로 설정하면 리스트박스 Select 객체의 속성, 메소드, 이벤트의 기능
28
Radio 객체 라디오 버튼을 처리할 수 있도록 속성, 메소드, 이벤트를 제공
여러 개의 그룹 안에서 한 개의 라디오 버튼만을 선택할 수 있음 객체의 선언 <INPUT> 태그의 TYPE 속성을 radio로 설정, CHECKED 속성을 이용하여 미리 선택할 지의 선택유무 지정
29
Checkbox 객체 HTML의 체크박스를 처리할 수 있도록 속성, 메소드, 이벤트를 제공
한 번 선택하면 체크되고 다시 한 번 선택하면 체크가 없어짐 2개 이상의 항목도 선택할 수 있음 태그 <INPUT TYPE="checkbox" NAME="..."> checkbox 객체의 속성, 메소드, 이벤트의 기능
30
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>
31
select 객체의 속성과 메소드를 활용하여 화면에 목록 상자를 만드는 예제(2/2)
실행결과
32
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>
33
Radio 객체의 속성과 메소드를 활용하여 화면에 5개의 라디오 단추를 만드는 예제(2/2)
실행결과
34
화면에 체크박스를 만든 후 속성값 들을 확인하는 간단한 예제(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>
35
화면에 체크박스를 만든 후 속성값 들을 확인하는 간단한 예제(1/2)
실행결과
Similar presentations
