-
자바스크립트 - form에 접근하기프로그래밍/JavaScript 자바스크립트 2021. 10. 1.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send() { // 폼 접근 방법 // var f = document.myForm; // 폼이름으로 접근 var f = document.forms[0]; // 첫번째 폼 // console.log(f); // form을 이용해서 form 아래의 입력 객체를 이름으로 접근 // 폼.입력객체이름 var name = f.name.value; // 객체의 이름(name) 속성을 이용하여 접근 var birth = document.getElementsByName("birth")[0].value; // id 속성 접근 var age = document.getElementById("age").value; var s = name+","+birth+","+age; var obj; // 태그로 접근 // obj = document.getElementsByTagName("div")[0]; // class 속성의 속성값으로 접근 // obj = document.getElementsByClassName("layout")[0]; // 선택자로 접근(해당 선택자의 첫번째 요소) obj = document.querySelector(".layout"); obj.innerHTML = s; } </script> </head> <body> <h3>document 객체</h3> <form name="myForm"> <p> 이름 : <input type="text" name="name"> </p> <p> 생일 : <input type="text" name="birth"> </p> <p> 나이 : <input type="text" name="age" id="age"> </p> <p> <button type="button" onclick="send();">확인</button> </p> </form> <hr> <div class="layout"></div> </body> </html>자바스크립트에서 document 즉 HTML 쪽에서 작성한 form에 접근하는 여러 방법들이 있다.
1. form에 이름을 주고 자바스크립트에서 이름으로 접근
= HTML form name = "myForm"
= 자바스크립트에서 var f = document.myForm;
2. form의 인덱스 번호로 접근
= HTML 문서에서 첫번째 form에 접근
= var f = document.forms[0];
3. form의 값에 접근하는 법
= var name = document.myForm.name.value;
= 폼 태그 안에 있는 name 값을 가져옴
4. 객체의 이름 속성을 이용해서 접근
= var birth = document.getElementsByName("birth")[0].value;
= 엘리먼트중에서 이름이 birth인 놈의 0번째 인덱스 값을 가져옴
(주의할 점 엘리먼트뒤에 s 붙여야함 값이 여러개 일 수 있으니까)
5. id 속성을 통해서 접근
= var age = document.getElementById("age").value;
name과 비슷함
6. 선택자로 접근하기, 해당 선택자의 첫번째 요소
= obj = document.querySelector(".layout");
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function send(f) { var name = f.name.value; var kor = f.kor.value; var eng = f.eng.value; var mat = f.mat.value; alert(name + ":" + kor +":" + eng + ":" + mat); } </script> </head> <body> <h3>form 요소 안에서의 this.form : 현재 객체의 부모 form을 나타냄</h3> <form name="myForm"> <p> 이름 : <input type="text" name="name"> </p> <p> 국어 : <input type="text" name="kor"> </p> <p> 영어 : <input type="text" name="eng"> </p> <p> 수학 : <input type="text" name="mat"> </p> <p> <button type="button" onclick="send(this.form)">확인</button> </p> </form> </body> </html>form 태그 안에서 this.form의 의미는 this.form을 쓴 객체의 부모 form을 나타낸다.
myForm이라는 폼 안에 있는 버튼에서 위에 만들어논 send(f) 함수를 호출하면서
send 인자에 this.form을 했으니까 결국에는 send(myForm)이 되는것.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - navigator (0) 2021.10.01 자바스크립트 - 화면 좌표 찾기 (0) 2021.10.01 자바스크림트 - BOM (0) 2021.09.30 자바스크립트 - JSON 데이터 객체로 변환하기 (0) 2021.09.30 자바스크립트 - apply / call / bind (0) 2021.09.30
