2020-06-17JavaScript7 minutes read (About 1022 words) 0 visits

[JS]문서 객체 모델안의 form태그, 페이지이동방식(get과 post), focus() vs blur() vs select()

form 태그

폼태그안에 있는 정보를 저장해서 원하는 페이지로 전달하는 방법을 설정할 수 있다.
원하는 페이지는 action=”” 여기에 적어준다
action페이지로 정보를 전달할때는 주소줄의 ?뒤에 전달할 정보를 담아서 이동한다.

이러한 정보전달방식을 get방식이라고 한다

form action=” 정보를가지고 이동할 url” method=”get”
- 이동할 url이 없다면 자신의 페이지를 호출
- method=”get”는 기본속성이므로 굳이 적지않고 생략가능하다 하지만 post는 기본이 아니므로 꼭 적어줘야한다.

예시태그로 form태그 특징 설명

예시태그를 가지고 form태그 특징 세가지를 설명할 수있다

<form action="ex.html" method="get">
	텍스트박스  : <input type="text" name="txt">
	<lable>텍스트박스  : </lable> <input type="text" name="txt"> 
	<input type="submit" value="전달하기" onclick="fun1()">
	<input type="reset" value="원래값으로 초기화">
</form>

lable태그

기본적으로 <lable>텍스트박스 :</lable> 는 lable 태그안에 input태그 내용을 적어줘야 css적용이 쉬워진다. 수업편의상 label태그를 생략하고 진행하지만 항상 label태그가 있다고 생각하면 된다

input type=”submit”속성
form태그안에서만 input type=”submit”이 가능하다.
form태그 없이는 input type=”submit”을 쓸 수 없으므로 input type=”button”으로 대체해줘야한다

onclick보단 onsunmit
데이터의 정확한 처리를 위해서 위의 태그 <input type="submit" value="전달하기" onclick="fun1();"> 보다는
아래 태그 <form action="a.jsp" method="get" name="myForm" onsubmit="fun2();">를 더 많이 사용한다

input태그에 onclick속성보단 form태그에 onsubmit속성을 입력해줘야 정확하게 실행된다고 할수있다.
실무에서도 form태그에 onsubmit속성을 더 많이 사용한다.

<form action="ex.html" method="get" onsubmit="fun1()">
	텍스트박스  : <input type="text" name="txt">
	<lable>텍스트박스  : </lable> <input type="text" name="txt"> 
	<input type="submit" value="전달하기">
	<input type="reset" value="원래값으로 초기화">
</form>

페이지 이동방식 두가지 : get방식과 post방식

get 방식

get() : 겟매서드로도 표현한다.
전송할 데이터(파라미터)를 이동할 주소정보(URL)에 붙여서 같이 전송하는 방식
장점 : 빠른 전송속도, body의 정보가 필요없음
단점 :
- 전달되는 정보가 모두 주소줄에 오픈됨 => 보안에 취약. 개인정보를 사용할수없다. 따라서 사용자가 봐도 모르는 정보들에 주로 사용한다.
- 파라미터길이가 제한됨 (256byte까지)
예시
- 태그예시 : form action=” 정보를 가지고 이동할 url” method=”get”
- 주소창 예시 : itwill.com?파라미터이름=값
- 파라미터 2개이상 가지고 갈때 예시(&로 이어줌):itwill.com?파라미터이름=값&파라미터이름=값
파라미터를 무제한으로 가져갈 수 있느냐?
NOPE
한계 : 256byte 길이 이상의 정보를 가져갈 수 없다. 즉, 가져갈 수 있는 파라미터의 개수가 지정되어있다. 제한된 길이 이상의 정보를 가져 갈 경우 데이터 손실이 잃어난다.

post 방식

post() : 포스트매서드로도 표현한다
전송할 데이터(파라미터)를 주소줄이 아니라 body에 담은 뒤 이동할 주소정보(URL)에 전송하는 방식
장점 :
- 외부에서 파라미터를 볼 수 없으므로 상대적으로 보안우수
- 파라미터길이 제한이 없으므로 많은 양의 파라미터를 전달 가능
단점 : 상대적으로 느린 전송속도
예시
- 태그예시 : form action=” 정보를 가지고 이동할 url” method=”post”
- 주소창 예시 : itwill.com

focus() vs blur() vs select()

focus() : 사용자가 입력 실패시 해당 요소를 선택해서 보여준다.
blur() : 포커스를 해제시키는 함수이다.
select() : focus와 비슷하지만 select는 focus 후 value값을 드래그해놓는다는 점이 다르다.

document.폼태그네임.pw.value = "123";
document.폼태그네임.pw.focus(); //form태그안의 pw이름을 가진 곳에 "123"을 넣고 focus를 줌
document.폼태그네임.pw.blur(); //focus해제
document.폼태그네임.pw.select(); //focus하고 그 값("123")을 드래그해놓음