티스토리 뷰
Form 전송 방식
1. HTML Form
- 데이터를 입력받을 목적으로 사용하는 태그.
<FORM name="frm" action="./sungjuk_proc.jsp" method = "GET/POST">
1) name : 폼 이름
2) action: 폼에서 입력받은 데이터를 보내(전송)는 서버의 주소로써,
인터넷 브러우저는 주소상에 도메인 생략시 도메인을 자동으로 연결하여 전송합니다.
예)
action="./sungjuk_proc.jsp"
▶ 현재 브러우저로 로딩된 파일과 같은 폴더에있는 jsp로 전송 (*)
action="../sungjuk_proc.jsp"
▶ 현재 폴더의 상위 폴더에 있는 파일로 전송
action="../object/sungjuk_proc.jsp"
▶ 현재 폴더의 상위폴더로 나간 후 object폴더안으로 이동하여 전송
action="http://172.16.4.1:8000/object/sungjuk_proc.jsp"
▶ 전체 IP를 직접 기록한 경우
action="http://www.test.co.kr/object/sungjuk_proc.jsp"
▶ 전체 도메인을 직접 기록한 경우
3) method: 전송 방식
GET: 데이터 조회용(SQL: SELECT)
POST: 데이터 수정용(SQL: INSERT, UPDATE, DELETE)
* 특정 기업은 요청을 전부 POST로 요구하는 기업도 있음, POST만 써도 개발 가능
2. GET 전송 방식
- 서버의 데이터를 변경할 목적이 아닌 조회의 목적으로 사용(SQL: SELECT)
- 전송할 데이터를 문자열 형태로 URL의 뒤에 인수로 붙여서 전송합니다.
따라서 보안성이 없어 누구나 전송 내용을 볼 수 있습니다.
Form 태그에서의 'GET'방식은 서버로 전송시 서버의 처리가 지연될 경우 중복해서 데이터 전송이 발생합니다.
- A 태그를 이용할 경우 일반적으로 GET방식 전송만 가능하나 Javascript를 이용하면 POST 방식으로 전송이 가능함.
- 4KB이상의 파라미터 문자열은 전송할 수 없음으로 대용량 전송이 어려움.
- 주소와 데이터의 구분
- ?: 전송되는 데이터(변수)의 시작 (여기까지가 주소
- &: 변수가 2개 이상일 경우 구분 (구분자
3. POST 전송 방식
- 서버의 데이터를 변경할 목적으로 가지고 있음(SQL: INSERT, UPDATE, DELETE)
- 파일의 형태로 전송됨으로 URL상에 나타나지않아 보안성이 있습니다.
- GET방식에 비해서 대용량의 데이터를 전송할 수 있습니다.
- 일반적으로 Form은 post 방식으로 전송됩니다.
- 한글 인코딩 처리로 한글깨짐을 방지합니다. <% request.setCharacterEncoding("utf-8"); %>
4. input 타입
- 일반적으로 HTML은 대소문자를 가리지 않으나 HTML태그의 name 속성과 value 속성은 대소문자를 구분합니다.
1) TEXT: 한줄을 입력받을때 사용
<input type='text' name='title' value='' size='30'> ->여기의 name 의 대소문자 구별을 말하는 것이다
- text: 한줄만 입력
- value: 초기값
- size: 입력받는 창의 크기
- maxlength: 최대 입력 글자 수
2) TEXTAREA: 여러라인을 입력받을 때 사용
<textarea name='content' rows='10' cols='30'></textarea>
- rows: 행의 갯수(문자수)
- cols: 열의 갯수(문자수)
3) PASSWORD: 패스워드 입력시 사용, 입력글 순간 비공개
<input type='password' name='passwd' size='30'>
4) Submit Button: 서버로 입력받은 데이터를 전송
<input type='submit' value='등록'>
6. SELECT ~ OPTION (html)
- SELECT: TEXT로 입력을 받으면 사용자가 다양한 값을 입력하여 처리 규칙을 만들기가 힘듬.
따라서 지정된 데이터만 입력받도록 제한을 가하는 기능이 있음.
7. RADIO, CHECKBOX
1) RADIO: 다양한 선택 항목을 출력하고 하나만 선택 가능
- checked="checked": 기본 선택
<input type='radio' name='area' value='서울' checked="checked"> 서울 지역
2) CHECKBOX: 여러개 선택 가능, 취미의 선정, 선택안하면 null이 출력됨
- checked="checked": 기본 선택
<input type='checkbox' name='hobby1' value='독서'>독서
3) 많은 CheckBox를 배열로 가져오는 코드
String[] hobby = request.getParameterValues("hobby");
<input type='checkbox' name='hobby' value='자전거'> 자전거
>>>>> /WebContent/form/form3.jsp
<body>
<form name='frm' method='post' action='./proc3.jsp'>
희망하는 근무 지역은?<br>
<input type='radio' name='area' value='서울' checked="checked">서울 지역
<input type='radio' name='area' value='인천'>인천 지역
<input type='radio' name='area' value='경기'>경기 지역
<input type='radio' name='area' value='충청북도'>충청 지역
<input type='radio' name='area' value='강원도'>강원 지역
<hr>
취미 선택 1<br>
<input type="checkbox" name='hobby1' value='독서'> 독서
<input type="checkbox" name='hobby2' value='등산'> 등산
<input type="checkbox" name='hobby3' value='영화'> 영화
<HR>
취미 선택 2<br>
<input type='checkbox' name='hobby' value='자전거'> 자전거
<input type="checkbox" name='hobby' value='캠핑'> 캠핑
<input type="checkbox" name='hobby' value='승마'> 승마
<input type="checkbox" name='hobby' value='스노우보드'> 스노우 보드
<input type="checkbox" name='hobby' value='바다낚시'> 바다낚시
<input type="checkbox" name='hobby' value='주말농장'> 주말농장
<br><br>
<input type='submit' value='등록'>
</form>
</body>
레이블[라벨] 설정하기(옆의 한글을 클릭해도 버튼클릭이 되게) //스펠링주의
1) <label for="r01"><input id="r01" type='radio' name='area' value='서울' checked="checked">서울 지역</label>
2) <label><input type='radio' name='area' value='인천'>인천 지역</label>
//둘 다 가능
>>>>> /WebContent/form/proc3.jsp
<body>
<div style='font-size: 24px;'>
<%
String area = request.getParameter("area");
out.println("지역 선택 1: " + area + "<BR>");
String hobby1 = request.getParameter("hobby1");
String hobby2 = request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
if (hobby1 != null) {
out.println("hobby1: " + hobby1 + "<br>");
}
if (hobby2 != null) {
out.println("hobby2: " + hobby2 + "<br>");
}
if (hobby3 != null) {
out.println("hobby3: " + hobby3 + "<br>");
}
String[] hobby = request.getParameterValues("hobby"); //받아온 hobby들을 배열에 담는다.
if (hobby != null) {
for (int i = 0; i < hobby.length; i++) { //그 길이만큼(.length) for문으로 출력
out.println(hobby[i] + "");
}
}
%>
</div>
</body>
'web > JSP' 카테고리의 다른 글
| Base64 이미지 사용하기 (0) | 2019.11.25 |
|---|---|
| 부트스트랩 (0) | 2018.02.12 |
| 접속한 ip주소 확인하기, 이클립스 ip버전 변경하기 (0) | 2018.01.19 |
| JSP Template 설정 (0) | 2018.01.17 |