[JSP] 입력 폼 설계

입력 폼

• 웹 브라우저와 웹 서버 간에 원하는 정보를 서로 주고받을 수 있도록 도와주는 사용자 인터페이스
• 사용자가 데이터 입력 또는 수정하기 위한 입력 양식
• 입력 폼은 자료 전달 용도만 있음
• HTML 태그나 웹 저작도구 등으로 작성할 수 있음

FORM 태그

<form method="전송방식" action="url" name="form_name">
. . . // 양식을 만드는 내부태그
</form>

 

1) FORM 태그의 속성

속성	설명
method	폼에 입력된 정보를 전송하는 방식 지정 (GET 또는 POST)
action	submit 버튼을 클릭했을 때 데이터를 전송할 프로그램명 기술
name	페이지 내에서 구분할 폼의 이름 지정
target	action에서 지정한 프로그램의 실행 결과를 표시할 대상

 

2) 전송방식을 지정하는 메소드 속성

① GET 메소드

- 입력 폼의 데이터를 웹 서버에 전송함

- 255Byte ~ 4096Byte까지 QUERY_STRING으로 보냄

- 전송 데이터가 URL 뒤에 붙음

 

② POST 메소드

- 입력 폼의 데이터를 웹 서버에 전송함

- 전송 데이터가 보이지 않음

- 입력 데이터의 길이에 제한을 받지 않음

구분	GET 메소드	POST 메소드
전송 상태	데이터가 URL에 붙어 전송	HTTP 헤더에 포함되어 전송
데이터 크기	255Byte ~ 4096Byte	제한 없음
보안	불가능	가능
표기법	<form method=get ...>	<form method=post ...>

 

---

입력 폼을 만드는 INPUT 태그

<input type="속성" name="이름" value="속성값">

INPUT 태그의 TYPE 속성

TYPE	설명	TYPE	설명	TYPE	설명
text	텍스트 필드	password	패스워드 필드	hidden	히든 필드
radio	라디오 필드	checkbox	체크박스	select	리스트 목록
submit	전송 버튼	reset	취소 버튼	button	버튼
textarea	텍스트 개체	fileUpload	파일 업로드

 

---

입력 폼에서 전송된 값 웹 서버에서 받기

JSP 페이지에서 request 내장객체로 데이터 받기

• getParameter() 메소드를 사용해서 단일 필드명에 대한 데이터를 받을 수 있음 (그냥 text 값)
• getParameterValues() 메소드를 사용해서 그룹명에 대한 데이터를 받을 수 있음 (라디오, 체크박스, 셀렉트 등)

request.getParameter("필드명")          // 단일 필드명
request.getParameterValues("그룹명")	// 그룹명

// 단일 값이 가지는 필드명이 "name1"인 경우
<%  String str1 = request.getParameter("name1"); %>
<%= request.getParameter("name1") %>

// 그룹 필드의 값이 "name2"로 전송되는 경우
<%  String str2[] = request.getParameterValues("name2"); %>

---

다양한 객체를 이용한 입력 폼 설계

1) 라디오 버튼

<input type="radio" name="그룹명" value="값" [checked]>

- 리스트 목록 중 하나만 선택하는 기능

- name은 하나의 그룹명, value는 그 그룹 내부에서의 값을 나타냄

- checked 속성은 선택 리스트의 디폴트 값을 선언할 때 사용함

 

2) 체크박스

<input type="checkbox" name="그룹명" value="값" [checked]>

- 여러 목록 리스트를 나열하여 복수 개를 선택하는 기능

- name은 하나의 그룹명, value는 그 그룹 내부에서의 값을 나타냄

- checked 속성은 선택 리스트의 디폴트 값을 선언할 때 사용함

 

3) SELECT 태그

<!-- multiple 속성은 사용자가 여러 목록을 선택할 수 있게 -->

<select name="이름" size="메뉴갯수" [multiple]
	<option value="값" [selected]>리스트문자열</option>
   	...
</select>

- 드롭다운 형식으로 리스트를 선택할 수 있음

- multiple 속성은 사용자가 여러 태그를 선택할 수 있게 해줌

- selected 속성은 선택 리스트의 디폴트값을 선언할 때 사용

---

그룹명 데이터 처리

1. 입력 폼에서 전송된 그룹 데이터 받기

String[] 배열명 = request.getParameterValues("그룹명");

 

2. 배열 요소 지정

배열명[첨자명]

 

3. 클라이언트로 연속된 배열 데이터 출력 (for문 사용)

<% for (int 첨자명 = 초기값; 첨자명 < 배열명.length; 첨자명 ++) { %>
	<%= 배열명[첨자명] %>
<% } %>

---

입력 폼에서 데이터 유효성 검사

자바스크립트로 입력 데이터 검증

1. HTML의 HEAD 부분에 자바스크립트 함수를 정의하는 방법

2. 스크립트 태그의 src 속성을 이용하여 include하는 방법

---

한글 데이터 처리

1) 클라이언트에 응답하는 HTML 문서의 한글 처리

- 문자 셋을 UTF-8로 변경해주면 됨

<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>

 

2) 웹 서버에 전송된 한글 데이터 처리

<% request.setCharacterEncoding("UTF-8"); %>