반응형
자바스크립트 Form 태그, 메소드, 이벤트핸들러 예제
Form 태그의 속성 : action, target
Form 객체의 메소드 : submit()
Form 객체의 이벤트 핸들러 : onSubmit, onReset
1. Form 태그의 action, target 속성
여기에서는 입력 양식을 정의하고, 자바 스크립트로 이 입력 양식에 대한 값에 어떠한 방법으로 접근하는지 알아보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Action 속성과 Target 속성을 이용한 예제</title> <script> function rabbit() { var carr carr = "form.action : " + document.myform.action carr += "form.target : " + document.myform.target alert(carr) } </script> </head> <body> <center> <h3>아래의 버튼을 클릭하면 어떻게 될까?</h3> <form name="myform" action="http://daum.net" method="get"> <input type="button" value="form 객체 정보" onclick="rabbit()"> </form> </center> </body> </html> | cs |
2. submit() 메소드
입력 양식에 의해서 입력한 데이터를 서버로 보내고자 할 떄 사용하는 메소드로 예전에는 메소드가 아닌 객체로 지원을 했다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>마음에 드는 색을 서버에 전송하는 예제</title> <script> function rabbit() { var carr if (document.duck.elements[0].value != "") { carr = "좋아하는 색은 " + document.duck.elements[0].value + "입니다.\n" //carr라는 변수에 텍스트 박스에서 받은 값을 나타내준다. carr += "데이터를 전송했습니다." //위에서 받은 값에다 위 문구를 추가해준다. document.duck.submit() //submit() 메소드를 이용해서 데이터를 전송한다. alert(carr) } else alert("좋아하는 색을 적으십시오!") //텍스트에 아무런 내용을 적지 않는 경우 } </script> </head> <body> <h1>좋아하는 색은 무엇입니까</h1> <form name="duck" action="nothingcgi" method="get"> 좋아하는 색 : <input type="text"> <input type="button" value="전송" onclick="rabbit()"> </form> </body> </html> | cs |
3. Form 객체의 이벤트 핸들러
이벤트 핸들러에는 onSubmit와 onReset 두 가지가 있다. 그 중 onSubmit 이벤트 핸들러는 데이터를 모아서 전송하고자 할 때 발생하는 이벤트 핸들러이다. onSubmit 이벤트 핸들러가 지정되면 데이터를 보내기 전에 먼저 수행을 한다.
이벤트 핸들러가 필요한 것은 데이터를 보내고자 할 때 사용자가 입력한 데이터를 확인해서 전송여부를 결정하기 위해서이다. 데이터를 잘못 입력했거나 데이터를 빼먹고 입력한 경우, 진위여부를 묻기 위한 하나의 절차이다.
onSubmit 이벤트 핸들러에는 리턴값이 있다. 만약 데이터를 전송하고자 한다면 true를 리턴해주고, 데이터를 전송하고자 한다면 false를 리턴해준다.
onReset 이벤트 핸들러는 입력 양식을 초기화할 것인지의 여부를 확인하고자 할 때 필요하다.
밑에 소스는 onSubmit 이벤트 핸들러의 예제이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>onSubmit 이벤트 핸들러의 예제</title> <script> function carr() { return confirm("전송 할까요?") //전송 버튼을 클릭했을 경우에 리턴값이 true일 경우에 나타나는 confirm 대화상자이다. } </script> </head> <body> <h2>당신의 주소를 입력하시오</h2> <form name="duck" action="nothingcgi" onSubmit="carr()"> 주소 입력 : <input type="text"> <input type="button" value="전송" onclick="carr()"> </form> </body> </html> | cs |
반응형
'이전 게시글 > 컴퓨터#웹 Jv.Script' 카테고리의 다른 글
| 자바스크립트 Checkbox(체크박스) 객체 뜻과 속성과 간단예제 (0) | 2016.06.05 |
|---|---|
| 자바스크립트 Button(버튼) 객체의 간단예제 (라디오버튼) (0) | 2016.06.05 |
| 자바스크립트 Form 객체의 태그와 속성, 메소드 (0) | 2016.05.15 |
| 자바스크립트 navigator 브라우저의 정보와 버전 알아보기 간단예제 (0) | 2016.05.01 |
| 자바스크립트 navigator 객체의 뜻과 간단예제, 사용정보 알아보기 (0) | 2016.05.01 |
