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

💡 핵심 요약 (TL;DR)

'문서 객체 모델안의 form태그, 페이지이동방식(get과 post), focus() vs blur() vs select()'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 예시태그를 가지고 form태그 특징 세가지를 설명할 수있다의 차이를 고려하여 상황에 맞게 적용해야 한다.

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>

1. lable태그

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

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

3. 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")을 드래그해놓음

#TILITWILL(JAVA)