[HTML]입력양식_<form> 태그
*데이터가 오가는 것을 제대로 확인하기 위해 환경 구축
아파치 톰캣(웹 서버), jdk(java developer kit)
웹 양식 : 웹 문서에 어떤 데이터를 입력하고 그 결과값을 가져오기 위해 사용.
ex) 구글 텍스트 입력 폼, 네이버 로그인 입력 폼 등등
1. <form> 태그
웹 양식을 만드는데 사용하는 태그. <input> 태그를 감쌈.
사용자가 입력할 수 있는 HTML 폼을 생성하는데 사용되는 태그
<input> 태그의 부모 태그, 틀 같은 거
<form name="입력 폼 이름" action="웹 프로그램 페이지" method="전달 방식">
<input type="유형" name="입력 폼 변수" value="전달 값">
</form>
-<form> 태그 속성
└action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(JSP, PHP, ASP 등)의 페이지 지정
└method : 웹 서버와 클라이언트(웹 브라우저) 간의 통신 방법 지정. get 방식, post 방식
└name : 폼
-<input> 태그 속성
사용자가 데이터를 입력할 수 있는 입력 필드 지정
└type : 유형(폼의 모양과 기능) 결정. text, password, radio, checkbox 등등.
└name : 서버로 전달되는 이름을 설정. 서버에게 중요. name을 기준으로 찾음. key값. 변수 역할.
└value : 입력 태그의 초기 값을 설정
radio, checkbox는 초기값 설정. text나 password 같은 건 초기값 설정 x
*input 태그 속성의 종류는 <input>글에서 ↓
https://exploreryun.tistory.com/21
(1) method - get
URL 뒤에 파라미터(매개변수)를 붙여서 데이터 전달 방식. 글자수 제한(2,048자)
URL을 보면 어떤 데이터를 전송하고자 하는지 알 수 있어서 보안에 취약.
<form name="INPUT01" action="01_getdata.jsp" method="get">
<p>이름<input type="text" name="user"></p> <!--이름 적는 곳-->
<p>전공<input type="text" name="dept"></p> <!--전공 적는 곳-->
<input type="submit" value="전송"> <!--제출 버튼-->
<input type="reset" value="초기화"> <!--초기화 버튼-->
</form>[ 전송 ] 클릭하면 다음 URL로 전달됨.
http://localhost/book/page.jsp?user=Hong&dept=computer
사용자가 입력한 이름, 전공 값이 보여짐.
(2) method - post
HTTP Request 헤더에 파라미터(매개변수)를 붙여 데이터 전송하는 방식. 글자수 제한 없음.
위의 소스코드에서 전달 방식만 post로 바꾸었을때
[ 전송 ] 클릭하면 다음 URL로 전달됨. 파일만 표시됨.
http://localhost/book/page.jsp
*웹에서 데이터가 넘어가는 것을 '쿼리스트링'이라고 한다.
(참고) <form> 태그에 참조된 jsp 파일 소스 코드
<%@page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<html>
<head>
<title>GET 방식 요청</title>
</head>
<body>
<!-- JSP 문법 작성 -->
<%
String strName=request.getParameter("name");
String strMajor=request.getParameter("major");
out.println("이름 :" + strName + "<br/>");
out.println("학과 :" + strMajor + "<hr/>");
%>
웹 브라우저 URL 주소 입력 부분을 살펴보세요.
</body>
</html>
ch05_입력양식 태그와 공간 분할 참조