JavaScript 회원정보 입력양식만들기 HTML & JavaScript
Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2
Form 객체 Form 객체 입력양식의틀이되는 <FORM> 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 <FORM> 태그의속성들의정보에관련된것 <FORM> 태그안의여러입력양식을요소라고함 3
Form 객체의속성 4
Form 객체의메소드, 이벤트핸들러 5
Form 객체 Chapter05 형식 : <FORM NAME = " 이름 " TARGET = " 창이름 " ACTION = "URL" ENCTYPE = " 형식 " METHOD = GET POST onsubmit = " 이벤트 " onreset = " 이벤트 ">... </FORM> document. 폼이름.[ 속성 메소드 ] 속성 : action, method, elements, encoding, length, name, target, form, forms 메소드 : blur(), submit(), reset() 이벤트핸들러 : onsubmit, OnReset HTML 홈페이지만들기 6
Form 객체 Chapter05 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- function Output() { var strinfo = "name : " + document.formobj.name + "\n"; strinfo += "length : " + document.formobj.length + "\n"; strinfo += "action : " + document.formobj.action + "\n"; document.formobj.submit(); alert(strinfo) } //--> </SCRIPT> <FORM NAME="FormObj"> <INPUT TYPE="button" VALUE="Form 정보확인 " onclick="output()"> </FORM> HTML 홈페이지만들기 7
프로그램 13-1 [ 그림 13-1] Form1 의실행결과 [ 그림 13-2] Form1 의실행결과 8
프로그램 13-2 [ 그림 13-3] Form2 의실행결과 [ 그림 13-4] Form2 의실행결과 9
Text 객체 Text 객체 <INPUT> 태그의 TYPE 속성의값으로 text 를입력하여만들어진텍스트박스에접근 Form 객체에서파생 형식 : <INPIUT TYPE = "text" NAME = " 이름 " VALUE =" 값 " SIZE = " 크기 " MAXLENGTH = " 크기 " onblur = " 이벤트 " onchange = " 이벤트 " onfocus = " 이벤트 " onselect = " 이벤트 "> 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 이벤트핸들러 : onblur, onchange, onfocus, onselect 10
Text 객체 Chapter05 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- function Output(strData) { if (strdata.id.value == " 이름입력 ") { alert(" 이름을입력하세요 "); form.id.focus(); } else { var strinfo = "name : " + strdata.id.name + "\n"; strinfo += "value : " + strdata.id.value + "\n"; strinfo += "defaultvalue : " + strdata.id.defaultvalue + "\n\n"; alert(strinfo) } } HTML 홈페이지만들기 11
Text 객체의속성, 메소드, 이벤트핸들러 12
프로그램 13-3 [ 그림 13-5] Text 의실행결과 [ 그림 13-6] Text 의실행결과 13
Password 객체 Password 객체 <INPUT> 태그의 TYPE 값을 password 로지정한텍스트박스에접근할경우사용 속성, 메소드들은기본적으로 Text 객체의것들과같음 Password 텍스트박스에어떠한정보를입력하였을경우 value 속성을사용하여해당값을가져올수없음 형식 : <INPUT TYPE = "password" NAME = " 이름 " VALUE = " 값 " SIZE = " 크기 "> 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 14
Password 객체 Chapter05 예제 : function Output(strData) { if (strdata.id.value == "") { alert(" 비밀번호를입력하세요 "); form.pwd.focus(); } else { var strinfo = "name : " + strdata.pwd.name + "\n"; strinfo += "value : " + strdata.pwd.value + "\n"; strinfo += "defaultvalue : " + strdata.pwd.defaultvalue + "\n\n"; alert(strinfo) } } HTML 홈페이지만들기 15
Password 객체의속성, 메소드, 이벤트핸들러 16
TextArea 객체 TextArea 객체 TYPE 속성의값으로 textarea 를입력하면여러줄을입력할수있는텍스트박스에접근할때사용 형식 : <TEXTAREA NAME = " 이름 " ROWS = " 크기 " COLS = " 크기 " onblur = " 이벤트 " onchange = " 이벤트 " onfocus = " 이벤트 " onselect = " 이벤트 " 속성 : defaultvalue, name, value 메소드 : blur(), focus(), select() 이벤트핸들러 : onblur, onchange, onfocus, onselect 17
TextArea 객체 Chapter05 예제 : function Output(form) { var strinfo = "name : " + form.introduce.n strinfo += "value : \n" + form.introduce.v alert(strinfo); } function Output_Status(strInfo) { window.status = strinfo; } HTML 홈페이지만들기 18
TextArea 객체의속성, 메소드, 이벤트핸들러 19
프로그램 13-4 [ 그림 13-7] TextArea 의실행결과 20
프로그램 13-4 [ 그림 13-8] TextArea 의실행결과 21
Hidden 객체 Hidden 객체 <INPUT> 태그의 TYPE 속성의값으로 hidden 으로지정하여만든입력양식에접근할때사용 형식 : <INPUT TYPE = "hidden" NAME = " 이름 " VALUE = " 값 "> 속성 : defaultvalue, name, value 예제 : function Output(strData) { var strinfo = "name : " + strdata.hiddeninfo.name + "\n"; strinfo += "value : " + strdata.hiddeninfo.value + "\n"; strinfo += "defaultvalue : " + strdata.hiddeninfo.defaultvalue + "\n\n"; alert(strinfo) } 22
Hidden 객체의속성 23
Button 객체 Button 객체 <INPUT> 태그의 TYPE 속성의값으로 button 을입력하여만든버튼에접근할때사용 속성으로는버튼의이름을나타내는 name 속성, 버튼의값을나타내는 value 속성이있음 버튼을클릭한것과같은효과를내는 click() 메소드가있으며버튼을클릭하였을경우발생하는이벤트를처리하기위한 onclick 이벤트핸들러가있음 24
Button 객체 Chapter05 형식 : <INPUT TYPE = "button" NAME = " 이름 " VALUE = " 값 " onclick = " 이벤트 "> 속성 : name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(strData) { var strinfo = " 이름 : " + strdata.name + "\n"; strinfo += " 값 : " + strdata.value; alert(strinfo); } HTML 홈페이지만들기 25
Button 객체의속성, 메소드, 이벤트핸들러 26
프로그램 13-5 [ 그림 13-9] Button 의실행결과 [ 그림 13-10] Button 의실행결과 27
Checkbox 객체 Checkbox 객체 <INPUT> 태그의 TYPE 속성의값으로 checkbox 를입력하여만든체크박스에접근하고자할때사용하는객체 28
Checkbox 객체 Chapter05 형식 : <INPUT TYPE = "checkbox" NAME = " 이름 " VALUE = " 값 " CHECKED onclick = " 이벤트 "> 속성 : checked, defaultchecked, name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(form) { var strinfo = " 당신의취미는 \n"; if(form.check1.checked) strinfo += " 게임 \n"; if(form.check2.checked) strinfo += " 독서 \n"; strinfo += " 입니다. \n"; } HTML 홈페이지만들기 29
Checkbox 객체의속성, 메소드, 이벤트핸들러 30
프로그램 13-6 [ 그림 13-11] Checkbox 의실행결과 [ 그림 13-12] Checkbox 의실행결과 31
Radio 객체 Radio 객체 <INPUT> 태그의 TYPE 속성의값으로 Radio 를입력하여만든체크박스에접근하고자할때사용하는객체 속성, 메소드, 이벤트핸들러들은모두 Checkbox 객체의속성, 메소드, 이벤트핸들러들과같음 여기에한가지속성이더추가되어있는데바로 length 속성이있음 32
Radio 객체 형식 : <INPUT TYPE = "radio" NAME = " 이름 " VALUE = " 값 " CHECKED onclick = " 이벤트 "> 속성 : checked, defaultchecked, length, name, value 메소드 : click() 이벤트핸들러 : onclick 예제 : function Output(form) { for(var i = 0; i < form.hobby.length; i++) { if(form.hobby[i].checked == true) { alert(" 당신의취미는 " + form.hobby[i].value + " 입니다."); } } } 33
Radio 객체의속성, 메소드, 이벤트핸들러 34
프로그램 13-7 [ 그림 13-13] Radio 의실행결과 [ 그림 13-14] Radio 의실행결과 35
Select 객체 Select 객체 <SELECT> 태그와 <OPTION> 태그를사용하여만든콤보박스에접근할때사용 selectindex 속성으로콤보박스에서현재선택되어있는항목의인덱스를알수있음 콤보박스에 MULTIPLE 속성이있을경우동시에여러개의항목을선택할수있는데이때 selectedindex 속성을사용하면선택된항목중제일첫번째항목의인덱스만을가져오게됨 콤보박스의각항목의정보를가져오기위해서는 options 속성을사용 36
Select 객체 형식 : <SELECT NAME = " 이름 " SIZE = " 크기 " MULTIPLE onfocus = " 이벤트 " onblur = " 이벤트 " OnChange = " 이벤트 "> <OPTION SELECTED VALUE = " 값 " > 항목 <OPTION SELECTED VALUE = " 값 " > 항목... </SELECT> 속성 : name, length, selectedindex, options, options[i].index, options[i].text, options[i].value, options[i].selected, options[i].defaultselected 메소드 : onchange 37
Select 객체 예제 : function Output(strData) { var strinfo = ""; strinfo += "name : "+ strdata.name+"\n"; strinfo += "length : "+ strdata.length + "\n"; for(var i=0; i < strdata.options.length; i++) { if(strdata.options[i].selected) strinfo += strdata.options[i].text + "\n"; } alert(strinfo); } 38
Select 객체의속성, 이벤트핸들러 39
프로그램 13-8 [ 그림 13-15] Select 의실행결과 [ 그림 13-16] Select 의실행결과 40
FileUpload 객체 FileUpload 객체 <INPUT> 태그의 TYPE 속성의값으로 file 을입력하여만든파일업로드버튼에접근할때사용 형식 : <INPUT TYPE = "file" NAME = "" 이름 > 속성 : name, value 예제 : function Output(form) strinfo += form.fileup.value + "\n"; alert(strinfo); } 41
FileUpload 객체의속성 42
프로그램 13-9 [ 그림 13-17] FileUpload 의실행결과 [ 그림 13-18] FileUpload 의실행결과 43
프로그램 13-10 [ 그림 13-19] INFO3 의실행결과 44