Javascript

Size: px

Start display at page:

Download "Javascript"

신애 뇌
4 years ago
Views:

1 1. 폼 (Form) 태그란? 일반적으로폼 (Form) 태그는입력양식을만들때사용됩니다. 입력양식이란어떤데이터를받아전송해주는양식을말합니다. 예를들면, 방명록이나게시판, 회원가입등의양식을말합니다. 이러한입력양식의처음과끝에는반드시폼태그가들어가게됩니다. 폼의입력양식에는 Text Box, Input Box, Check Box, Radio Button 등여러가지입력타입들이포함됩니다. 이것을 Input 태그를통해지정하게됩니다. 이렇게작성되어진폼은단독으로는아무기능도하지못합니다. 폼에입력된데이터를받아처리해주는서버측의프로그램이있어야비로소기능을하게됩니다. cgi, php, asp 등이그런서버측의프로그램입니다. 하지만서버로데이터를전송하기전에꼭입력해야하는데이터의입력이비어있다거나입력데이터의길이제한을어겼다거나하는등의기능은 Javascript 를통해얼마든지제어할수있습니다. 그래서양식폼을제어하기위해폼태그역시기본적으로알고있어야하는내용입니다. <02_00.jpg> 2. 폼 (Form) 태그의구조 태그 속성 속성값 설명 <form 속성 = 속성값 > 폼의시작과종료를의미합니다. name 폼이름 action 폼안의데이터가전송될대상 ( 서버에있는 cgi나, asp의 URL) method get, post 폼 안의 데이터가 서버의 프로그램에 전송될방식 - GET : get 방식은브라우저의주소 표시줄에폼에입력한매개변수값이 보입니다. - POST : 입력한값이보이지않고 서버에전송됩니다. 1 / 6

2 target 폼의송신결과를표시할프레임또는 윈도우 <form name="myform" action= method=post target="rightframe"> <input type = > type text password hidden checkbox radio file submit reset button image <textarea> </textarea> <select> </select> 긴텍스트입력목록상자 일반문자열암호입력, 입력값은 * 표시숨겨진필드, 보이지않지만데이터전송체크박스라이오버튼파일올리기전송버튼입력란지우기일반버튼이미지 3. 폼 (Form) 태그정리 1) input type : text, password, hidden <input type= text name= myname size= 10 maxlength= 8 value= 홍길동 > 문자열을입력받을 text box를작성합니다. 이름이 성명, text box의크기가 10 byte, 최대입력가능글자 8 byte 이며기본적으로 홍길동 이라는문자열이입력되어있게합니다. name= 입력상자의이름 size= 입력상자의크기 byte maxlength= 입력가능한최대글자수 byte value= 기본값 readonly 읽기전용 <input type= password name= pwd size= 15 maxlength= 10 > 암호를입력받을 text box 를작성합니다. input type 이 password 이기때문에입력한내용은 * 로보여지게됩니다. 기타속성은 input type = text 와동일합니다. <input type="hidden" name= h_data value= 1234 > 1235 라는값이입력된 h_data( 이름 ) 를작성합니다. input type 이 hidden 이기때문에서버에데이터가전송되기는하나화면에표시되지는않습니다. 2 / 6

3 < 예제 02_01.html> <HTML> <TITLE> 2 일차 - 폼태그 </TITLE> 폼태그 - Input type = text, password, hidden <br> <pre> <form ="myform"> <input type="text" name=" 이름 " size="10" maxlength="5" value=" 홍길동 "> <input type="password" name=" 암호 " size="15" maxlength="10"> <input type="hidden" name="h_data" value="1234"> </pre> <02_01.jpg> 3 / 6

4 2) input type : checkbox, radio <input type="checkbox" name="hobby value="sports" checked> 운동 <input type="checkbox" name="hobby" value="music"> 음악 <input type="checkbox" name="hobby" value="movie"> 영화각 name 속성에있는이름을가진체크박스를작성합니다. name 속성은모두같으나 value 는다릅니다. checked 속성이지정된 check box 에는기본적으로체크표시가되어있습니다. <input type="radio" name="birth" value=" 양력 "> 양력 <input type="radio" name="birth" value=" 음력 "> 음력각 name 속성에있는이름을가진라디오버튼을작성합니다. name 속성은모두같으나 value 는다릅니다. checked 속성이지정된 radio button 이기본적으로선택되어있습니다. < 예제 02_02.html> <HTML> <TITLE> 2 일차 - 폼태그 </TITLE> 폼태그 - Input type = checkbox, radio <br> <form> <pre> <input type="checkbox" name="sports value="chk" checked> 운동 <input type="checkbox" name="music" value="chk"> 음악 <input type="checkbox" name="movie" value="chk"> 영화 <input type="radio" name="birth" value=" 양력 "> 양력 <input type="radio" name="birth" value=" 음력 "> 음력 </pre> <02_02.jpg> 4 / 6

5 3) input type : file, submit, reset, image <input type="file"> 파일을첨부하여올릴수있게합니다. <input type="submit" value=" 회원가입 "> 폼안에입력된데이터를서버로전송해줍니다. <input type="reset"> 폼안의데이터들을기본값으로재설정해줍니다. 기본데이터가없으면다지워집니다. <input type="image src= > Src 에지정된파일을버튼형식으로사용합니다. < 예제 02_03.html> HTML> <TITLE> 2 일차 - 폼태그 </TITLE> 폼태그 - Input type = file, submit, reset <br> <form> <input type="file"> <input type="submit" value=" 회원가입 "> <BR> <input type="text"> <BR> <input type="text" value=" 홍길동 "> <BR> <input type="reset" value=" 재입력 "> <BR> <input type="image" src="button.gif"> <02_03.jpg> 4) textarea, select 5 / 6

6 <textarea name=" " rows=" " cols=" "> </textarea> <textarea name="intro" rows="4" cols="40" wrap=on></textarea> Intro 라는이름의 4줄 40칸크기의텍스트상자를만듭니다. 자동줄바꿈을설정합니다. name= 텍스트영역의이름 rows= 높이 ( 줄 ) 지정 column= 너비 ( 칸 ) 지정 wrap= on이면오른쪽끝을만나면자동으로줄바꿈, off이면한줄로입력 <select name=" " size=" " multiple> <select name="cellphone" size=1> <option value="sk">011 <option value="kt">016 <option value="lg">019 <option value="all" selected>010 </select> cellphone이라는이름의목록상자를작성합니다. 보여질목록의숫자는한개입니다. 목록에서선택된항목에쓰일값은 sk, kt, lg, all입니다. 기본적으로 010이선택되어있게설정합니다. name= 입력상자의이름 size= 목록의보여지는개수 multiple 복수개선택가능, Shift나 Ctrl 키를사용하여복수개선택 value= 항목값, 해당항목을선택했을때쓰일값 selected Selected로지정된값을선택하여보여줌 <exam02_04.html> <HTML> <TITLE>2 일차 폼태그 </TITLE> 폼태그 - textarea, select <br> <form> <pre> 가입인사 <textarea name="intro" rows="4" cols="20" wrap=on></textarea> 휴대폰 <select name="cellphone" size=1> <option value="sk">011 <option value="kt">016 <option value="lg">019 <option value="all" selected>010 </select> </pre> <02_04.jpg> 6 / 6

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것