[서블릿/JSP] HTML <form> 태그를 통해 서버로 데이터를 보내는 방법

 

 

HTML <form> 태그를 통해 서버로 데이터를 보내는 방법

보통 웹개발을 할 때 클라이언트와 서버는 데이터를 주고 받습니다.

예를 들어 회원가입 화면이 있다고 했을때 사용자가 입력한 정보(이름, 나이, 성별, 메일 등) 를 서버로 보내게 될 것입니다.

이 때 input 태그에 입력한 데이터들을 <form> 태그로 묶어 submit을 통해 서버로 보냅니다.

그리고 이 데이터들을 받은 서버에서는 데이터를 가지고 회원가입을 처리해줄 것입니다.

최근에 와서는 submit 대신 ajax를 이용한 비동기 통신을 이용하고 전송 데이터 타입은 JSON 방식으로 변환하여 전송하는 방식을 많이 이용합니다.

이번 글에서는 비동기 통신을 이용하지 않고 HTML form태그를 이용하여 서버에 데이터를 보내고 이 때 input 태그의 type에 따라서 서버에서는 어떤식으로 데이터를 받는지 알아보도록 하겠습니다.

form 태그 자체는 html의 영역이나 JSP를 공부하기 위해서는 기본적으로 필요하므로 JSP 기준으로 포스팅 하겠습니다.

회원가입 창 HTML 만들기

HTML에는 데이터를 입력하고 입력한 데이터들을 하나로 묶어서 보낼 수 있는 태그들을 미리 만들어 두었습니다.

해당 태그들은 다음과 같습니다.

input 태그의 type 속성값은 이 밖에도 email, date, hidden 등 용도에 따른 타입이 많습니다.

더 궁금한 사항은 w3c 홈페이지나 검색을 통해 알아보시기 바랍니다.

FORM 태그

FORM태그(이하 폼태그)는 보통 사용자가 입력한 데이터들을 모아서 서버로 보내주는 역할을 합니다.

하나의 폼태그는 하나의 URL 주소에 맵핑되며 한 페이지 안에 여러 폼태그가 존재할 수 있습니다.

폼태그는 <FORM> 으로 시작하여 </FORM>으로 끝나고 이 사이에 여러가지 종류의 입력 태그들을 넣어 하나로 묶어줍니다.

 

<form action="requestTest.jsp" method="get"> 
..여러 입력 태그 및 폼 태그 하위 요소들...
</form>

 

 

FORM 태그 속성

폼태그 속성으로는 action과 method 속성이 있습니다.

action의 경우 데이터를 모아 요청을 보낼 대상 주소를 넣습니다.

method의 경우 간단히 설명하자면 HTTP Method(호출 방식) 을 넣는데 get과 post 방식이 가장 많이 사용됩니다.

이 둘의 큰 차이점으로는 get의 경우 입력 데이터들이 url 주소에 ? 뒤에 붙어 서버로 날아가게 되고

post의 경우 HTTP request message(요청메세지)의 body 부분에 데이터를 싣어 날려보냅니다.

get 방식의 경우에는 url 길이가 4096바이트 까지로 제한이 있고 패스워드 같은 중요한 데이터가 url주소창에 나타날 수 있기 때문에 간단한 일반 요청의 경우에 많이 사용되고 이미지나 패스워드 등의 데이터들은 post 방식을 주로 사용합니다.

입력 태그

 

폼태그의 하위에는 여러가지 입력 태그들이 들어가게 됩니다. 

크게는 input, select, textarea 등이 있고 input 태그는 type 속성에 따라 또 여러가지 기능을 갖게됩니다.

다음 표에서는 폼태그에서 사용할 수 있는 태그들을 중요한것만 나열한 것입니다.

file 태그에 대해서는 파일 업로드에 대한 글로 포스팅 하도록 하겠습니다.

 

 

INPUT TEXT

가장 많이 쓰이는 입력태그는 text 타입 input 태그입니다.

우리가 흔히 보던 입력창이며 입력한 값이 서버로 전송됩니다.

 

<input type="text" name="id">

 

 

 

INPUT RADIO

radio 타입 input 태그입니다.

단일 선택 항목으로 쓰이며 여러개의 radio 타입 input 태그를 넣고

name 속성값을 하나로 맞춰주면 해당 항목 중 하나만 택할 수 있도록 제한됩니다.

value 속성값을 지정해주면 선택한 항목의 value값이 서버로 전송됩니다.

 

남자<input type="radio" name="gender" value="male"> //name 속성을 같게
여자<input type="radio" name="gender" value="female"> //선택한 항목의 value값을 전송

 

 

 

INPUT PASSWORD

password 타입 input 태그입니다.

text 타입과 다른 점은 입력시 입력한 내용이 감추어져 안보인다는 점입니다.

서버로는 실제 입력한 값이 전송됩니다.

 

<input type="password" name="passwd">

 

 

 

INPUT CHECKBOX

 

checkbox 타입 input 태그입니다.

다중 선택 항목이며 radio 버튼과 다른점은 여러개를 동시에 선택할 수 있습니다.

radio버튼의 경우로 name 속성을 다르게 주는 경우 여러개를 동시에 선택할 수 있지만

checkbox처럼 체크 후 체크해제를 할 수 없다는 점이 다릅니다.

value 속성을 넣어준 경우 체크한 value 값이 전송되며

value 속성을 생략한 경우에는 'on' 또는 null이 전송됩니다.

 

강아지<input type="checkbox" name="checkDog" value="d">
고양이<input type="checkbox" name="checkCat" value="c">
기타  <input type="checkbox" name="checkEtc" value="e">

 

 

 

INPUT SUBMIT, RESET

submit 타입과 reset 타입 input은 입력태그는 아니지만

해당 태그가 속해있는 폼을 제어하는데 사용됩니다.

submit의 경우 버튼을 생성하는데 클릭할 경우 폼태그의 데이터를 전송하게 됩니다.

value 값은 버튼에 표시할 텍스트를 지정합니다.

reset 타입은 속해있는 해당 폼태그의 데이터들을 모두 지워주는 역할을 합니다.

value 값은 버튼에 표시할 텍스트를 지정합니다.

 

<input type="submit" value="전송!"> <input type="reset" value="취소">

 

 

 

SELECT

 

select 태그의 경우 콤보박스 형태로 리스트를 나타내어 선택할 수 있습니다.

select 태그 하위에 option 태그를 통해서 리스트에 항목을 추가할 수 있습니다.

name 속성은 select 태그에 지정해 줍니다.

기본적으로 선택한 항목의 텍스트(친구추천,인터넷검색,페이스북,광고) 가 전송되며

option 태그에 value를 지정해준 경우 선택한 항목의 value값이 전송됩니다.

 

<select name="source">
     <option value="recommand">친구추천</option>
     <option value="search">인터넷검색</option>
     <option value="facebook">페이스북</option>
     <option value="advertise">광고</option>
</select>

 

 

select 태그에는 multiple 속성과 size 속성이 있습니다.

multiple 속성을 지정하는 경우 CTRL(컨트롤) 키를 누른 상태에서 여러 항목을 동시에 선택할 수 있고

size 속성의 경우 목록을 기본적으로 몇 개 보여줄 것인지 지정할 수 있습니다.

 

 

<select name="source" multiple="multiple" size="4">
     <option value="recommand">친구추천</option>
     <option value="search">인터넷검색</option>
     <option value="facebook">페이스북</option>
     <option value="advertise">광고</option>
</select>

 

이 경우에는 servlet 또는 jsp 페이지에서는 다음과 같이 String[](String 배열) 형태로 받아야 하는데

이 때 사용하는 메서드는 request.getParameterValues() 입니다.

 

String[] source = request.getParameterValues("source");

 

 

 

 

TEXTAREA

textarea 태그의 경우 자기소개나 긴 댓글 입력란처럼 설명이나 여러줄로 텍스트를 입력하는 경우에 사용됩니다.

input text처럼 입력한 문자열값이 서버로 전송됩니다.

rows와 cols 속성이 있는데 rows의 이 둘은 textarea의 크기를 지정합니다.

rows는 입력란을 몇 줄(세로)로 표현할 것인지 cols는 문자 몇글자까지 표현할 것인지(가로) 를 정합니다.

 

<textarea name="etc" rows="3" cols="30"></textarea>

 

 

 

종합 테스트

 

 

/inputTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 테스트</title>
</head>
<body>
     <form action="/RequestTest" method="get">
           아이디 :   <input type="text" name="id"><br>
           비밀번호 :      <input type="password" name="passwd"><br>
           주소 :          <input type="text" name="address"><br>
           성별 :     남자<input type="radio" name="gender" value="male">
                     여자<input type="radio" name="gender" value="female"><br>
           반려동물 :  강아지<input type="checkbox" name="checkDog" value="d">
 
                           고양이<input type="checkbox" name="checkCat" value="c">
 
                           기타  <input type="checkbox" name="checkEtc" value="e"><br>
         가입경로 :  <select name="source">
                          <option value="recommand">친구추천</option>
                          <option value="search">인터넷검색</option>
                          <option value="facebook">페이스북</option>
                          <option value="advertise">광고</option>
                     </select><br>
          기타사항 : <textarea name="etc" rows="3" cols="30"></textarea><br><br>
           <input type="submit" value="전송!"> <input type="reset" value="취소">
     </form>
</body>
</html>
 

 

 

/RequestTest

@WebServlet("/RequestTest")
public class RequestTest extends HttpServlet implements Servlet {
 
     protected void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");
           String id = request.getParameter("id");
           String passwd = request.getParameter("passwd");
           String address = request.getParameter("address");
           String gender = request.getParameter("gender");
           String checkDog = request.getParameter("checkDog");
           String checkCat = request.getParameter("checkCat");
           String checkEtc = request.getParameter("checkEtc");
           String source = request.getParameter("source");
           String etc = request.getParameter("etc");
 
 
 
           System.out.println("아이디 : " + id);
           System.out.println("비밀번호 : " + passwd);
           System.out.println("주소 : " + address);
           System.out.println("성별 : " + gender);
           System.out.println("반려 강아지 : " + checkDog);
           System.out.println("반려 고양이 : " + checkCat);
           System.out.println("반려 기타 : " + checkEtc);
           System.out.println("가입경로 : " + source);
           System.out.println("기타사항 : " + etc);
 
     }
 
     protected void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
           doGet(request, response);
     }
 
}
 

 

 

 

결과

콘솔로 출력

아이디 : test
비밀번호 : 1234
주소 : 서울특별시
성별 : male
반려 강아지 : d
반려 고양이 : c
반려 기타 : null
가입경로 : search
기타사항 : 열심히 활동할게요~