폼 처리의 개요
폼(form)은 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식이다. 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여준다.
[폼 데이터 처리 과정]
- 폼이 있는 웹 페이지를 요청하고 폼 내용을 입력한다.
- 폼 안에 있는 모든 데이터를 웹 서버로 보낸다.
- 웹 서버는 전송받은 폼 데이터를 처리하기 위해 JSP 컨테이너로 넘긴다.
- JSP 컨테이너는 폼 데이터를 처리한다.
- 처리 결과에 따라 새로운 웹 페이지를 웹 서버로 보낸다.
- 웹 서버는 전송받은 웹 페이지를 웹 브라우저로 보낸다.
- 웹 브라우저는 전송받은 결과 웹 페이지를 보여준다.
[폼을 구성하는 태그의 종류]
| 태그 | 설명 | 태그 | 설명 |
|---|---|---|---|
| form | 폼을 정의하는 태그로 최상위 태그이다. | select | 항목을 선택할 수 있는 태그이다. |
| input | 사용자가 입력할 수 있는 태그이다. | textarea | 여러 줄을 입력할 수 있는 태그이다. |
form 태그의 기능과 사용법
form 태그는 사용자가 다양한 정보를 입력하고 서로 전달할 때 사용하는 태그이다. 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그이다.
<form 속성1="값1" [속성2="값2" ...]> //다양한 입력 양식 태그(<input>,<select>,<textarea>) </form>
[form 태그의 속성]
| 속성 | 설명 |
|---|---|
| action | 폼 데이터를 받아 처리하는 웹 페이지의 URL을 설정한다. |
| method | 폼 데이터가 전송되는 HTTP 방식을 설정한다. |
| name | 폼을 식별하기 위한 이름을 설정한다. |
| target | 폼 처리 결과의 응답을 실행할 프레임을 설정한다. |
| enctype | 폼을 전송하는 콘텐츠 MIME 유형을 설정한다. |
| accept-charset | 폼 전송에 사용할 문자 인코딩을 설정한다. |
GET 방식과 POST 방식의 차이
구분 GET 방식 POST 방식 전송형태 이름과 값의 형태로 URL에 포함되어 전송 HTTP 헤더 속에 감춰서 전송 전송량 제한적(4,096B) 제한 없음 속도 빠름 느림 보안 없음 있음 URL 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약하다. 따라서 개인 정보 등을 보호해야 할 때는 POST 방식을 사용해야 한다. 또한 GET 방식은 지정된 리소스에서 데이터를 요청할 때, 즉 읽을때 사용한다. 반면 POST 방식은 지정된 리소스에서 데이터를 처리할 때, 즉 쓰고, 수정하고, 삭제할 때 사용한다. 그러므로 보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽는 경우 GET 방식을 사용하고, 그렇지 않은 경우 POST 방식을 사용하면 된다.
input 태그의 기능과 사용법
input 태그는 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그이다.
<input 속성1="값1" [속성2="값2" ...]>
[input 태그의 기본 속성]
| 속성 | 속성 값 | 설명 |
|---|---|---|
| type | text | 기본 값으로 한 줄의 텍스트를 입력할 때 사용한다. |
| " | radio | 라디오 버튼으로 열거된 것 중 하나만 선택할 때 사용한다. |
| " | checkbox | 체크 박스로 열거된 것 중 다중 선택을 할 때 사용한다. |
| " | password | 암호를 입력할 때 사용한다. |
| " | hidden | 보이지 않게 숨겨서 값을 전송할 때 사용한다. |
| " | file | 파일 업로드를 위한 파일을 선택할 때 사용한다. |
| " | button | 버튼 모양을 출력할 때 사용한다. |
| " | reset | 폼에 입력된 값을 모두 초기화할 때 사용한다. |
| " | submit | 폼에 입력된 값을 모두 서버에 전송할 때 사용한다. |
| name | 텍스트 | 입력 양식을 식별하는 이름을 설정한다. |
| value | 텍스트 | 입력 양식의 초깃값을 설정한다. |
[input 태그 사용 예]
<body>
<form action="#" method="post">
<p> 아이디 : <input type="text" name="id"></p>
<p> 비밀번호 : <input type="password" name="passwd"></p>
<p> <input type="submit" value="전송"></p>
</form>
</body>input 태그의 기본 속성 외에 사용되는 속성
속성 속성 값 설명 readonly 입력 양식을 읽기 전용으로 설정한다. maxlength 숫자 입력 양식의 최대 입력 글자 수를 설정한다. type="text"인 경우에만 사용한다. size 숫자 입력 양식의 너비를 설정한다. type="text"인 경우에만 사용한다. disabled 해당 입력 양식을 비활성화로 설정한다. 모든 폼 구성 태그에 사용한다. checked 기본 값을 선택할 때 설정한다. type="checkbox" 또는 type="radio"인 경우에만 사용한다.
- HTML5의 추가된 속성
속성 속성 값 설명 required 입력 양식을 필수 태그로 설정한다. 필수 태그를 입력하지 않고 <submit>버튼을 누르면 오류 메시지가 웹 브라우저에 출력된다.autofocus 웹 페이지가 로딩되자마자 해당 입력 양식의 포커스를 설정한다. placeholder 텍스트 입력 양식의 힌트를 설정한다. pattern regexp 정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용한다.
select 태그의 기능과 사용법
select 태그는 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그이다. select 태그에는 시작 태그와 종료 태그가 있으며, 리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option 태그를 포함해야 한다.
<select 속성1="값1" [속성2="값2" ...]>
<option 속성1="값" [속성1]> 항목1</option>
<option 속성2="값" [속성2]> 항목2</option>
</select>select 태그의 속성
| 속성 | 속성 값 | 설명 |
|---|---|---|
| name | 텍스트 | 목록 상자의 이름을 설정한다. |
| size | 숫자 | 한 번에 표시할 항목의 개수를 설정한다. |
| multiple | 다중 선택이 가능하도록 한다. ctrl 키를 눌러 목록 상자의 항목을 다중 선택한다. |
option 태그의 속성
| 속성 | 속성 값 | 설명 |
|---|---|---|
| value | 텍스트 | 항목의 값을 설정한다. |
| selected | 해당 항목을 초깃값으로 선택한다. | |
| disabled | 항목을 비활성화한다. |
[select 태그 사용 예]
<form action="#" method="post">
<p>
<select name="city" size="3">
<option value="서울시">서울특별시</option>
<option value="경기도">경기도</option>
<option value="인천시">인천광역시</option>
<option value="충청도">충청도</option>
<option value="전라도">전라도</option>
<option value="경상도">경상도</option>
</select>
</p>
<p>
<input type="submit" value="전송">
</p>
</form>optgroup 태그로 항목을 그룹으로 만들 수 있다. label 속성을 사용하여 그룹으로 만들 이름을 설정하며, optgroup 태그 하위에 option 태그를 포함해야 한다.
textarea 태그의 기능과 사용법
textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 태그이다. 기본적으로 textarea 태그의 너비와 높이를 지정하기 위해 cols와 rows 속성을 설정한다. 기본 값은 <textarea>와 </textarea> 태그 사이에 설정하면 된다. textarea 태그의 가장 큰 특징은 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력된다는 것이다.
<textarea cols="너비 값" rows="높이 값">
......
</textarea>[textarea 태그의 속성]
| 속성 | 속성 값 | 설명 |
|---|---|---|
| name | 텍스트 | 이름을 설정한다. |
| cols | 숫자 | 입력할 텍스트 영역의 너비(열 크기)를 설정한다. |
| rows | 숫자 | 입력할 텍스트 영역의 높이(행 크기)를 설정한다. |
| wrap | off | 줄 바꿈을 설정한다. wrap="off": 줄 바꿈을 하지 않고 문장을 입력할 때 수평 스크롤바가 생기고 계속 문장이 입력 된다. |
| " | soft | wrap="soft": enter를 누루지 않아도 텍스트라인 끝에서 자동으로 행이 바뀐다. |
| " | hard | wrap="hard": soft 상태와 비슷하여 실제 내용을 서버에 전송할 때 캐리지 리턴 문자를 전달한다. |
[textarea 태그 사용 예]
<form action="#" method="post">
<textarea name="comment" cols="30" rows="3"></textarea>
<p>
<input type="submit" value="전송"/>
<input type="reset" value="취소"/>
</p>
</form>폼 데이터 처리하기
JSP에서 가장 많이 사용하는 기능 중 하나는 사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 서버가 이를 처리하는 것이다. 이렇게 폼 데이터를 처리함으로써 표현문이나 스크립틀릿 태그에 request 내장 객체를 이용하여 폼 페이지에서 전달된 값을 얻을 수 있다.
요청 파라미터의 값 받기
request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter()메소드를 이용하여 요청 파라미터의 값을 얻을 수 있다.
String 변수 = request.getParameter(요청 파라미터 이름);
[체크 박스의 데이터를 전달받는 예]
//index.jsp
<form action="process.jsp" method="POST">
<p>
독서<input type="checkbox" name="reading">
운동<input type="checkbox" name="exercise">
영화<input type="checkbox" name="movie">
</p>
<p>
<input type="submit" value="전송">
</p>
</form>//process.jsp
<body>
<p> 독서 : <%=request.getParameter("reading")%></p>
<p> 독서 : <%=request.getParameter("reading")%></p>
<p> 독서 : <%=request.getParameter("reading")%></p>
</body>요청 파라미터의 전체 값 받기
getParameter() 메소드를 이용하면 폼 페이지가 서버로 보낸 요청 파라미터 값을 얻을 수 있다. 그런데 입력 데이터가 다수이거나 입력 양식이 다양하면 이를 전송받기 위해 최악의 경우 입력 양식에 맞춰 전달받는 데이터의 수만큼 request 내장 객체의 getParameter() 메소드를 설정해야한다. 이때 일괄 처리 메소드를 이용하면 웹 브라우저에서 서버로 전송되는 요청 파라미터를 설정하지 않아도 모든 값을 전달받을 수 있다. 또한 텍스트 박스, 라디오버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한 번에 폼 데이터를 전달받을 수 있다.
[폼 데이터의 일괄 처리 메소드]
| 메소드 | 형식 | 설명 |
|---|---|---|
| getParameterNames() | java.util.Enumeration | 모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration(열거형) 형태로 전달받는다. |
| hasMoreElements() | Enumeration(열거형) 요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환한다. | |
| nextElement() | Enumeration(열거형) 요소를 반환한다. |
