본문으로 바로가기

HTML form태그 : 서버쪽으로 정보를 전달할 때 사용하는 태그



client -------> Server


input


태그의 종류를 지정 합니다.

속성(type, name, value)

  - type : 태그 종류 지정(ex. text, password, submit, checkbox, radio, reset)

  - name : input태그 이름

  - value : name에 해당하는 값(ex. name = value)


type = text

일반적인 문자열 입력할때 ex)id, 이름, 텍스트


<input type="text" name="name" size="10">



type = password


로그인, 회원가입 페이지 등에서 비밀번호 입력하기 위해 사용합니다.

<input type="password" name="name" size="10">



type = submit


form내의 데이터를 전송할 때 사용합니다.

<input type="submit" value="전송">

버튼이 생성됨


type = radio  하나만 단독으로 체크할 수 있다. 


checkbox와 달리 여러 개의 데이터 값 중 한 개의 값만을 전송할 때 사용합니다.

<input type="radio" name="major" value="kor">국어

<input type="radio" name="major" value="eng" checked="checked">영어

<input type="radio" name="major" value="mat" >수학

<input type="radio" name="major" value="des" >디자인



type = reset


Form내의 데이터를 초기화 할 때 사용합니다.

<input type="reset" value="초기화">

버튼이 생성됨



type = checkbox


데이터값을 여러 개 전송해야 할 때 사용합니다. 다중선택이 가능 특징은 네임이 다 동일하다. 

<input type="checkbox" name="hobby" value="read">독서

<input type="checkbox" name="hobby" value="cook">요리

<input type="checkbox" name="hobby" value="run">조깅

<input type="checkbox" name="hobby" value="swim">수영

<input type="checkbox" name="hobby" value="sleep">취침



select



리스트형태의 데이터를 사용합니다.

<select name="protocol">

select태그 안에는 option이라는 태그를 사용하며 값은 value로 지정한다.

<option value="http">http</option>  option으로 리스트의 항목을 지정해 줄 수 있다. 

<option value="ftp" selected="selected">ftp</option> 기본값.

      <option value="smtp">smtp</option>

      <option value="pop">pop</option>

</select>



실행결과





form 태그



<form action="FormEx" method="post">

지금까지 알아봤던내용들 checkbox, radio, 등등을 form태그로 묶는다.

form태그는 action속성과 method속성이 있다. 

submit이라는 버튼을 눌렀을때 어느 서브릿, jsp, html로 보낼지 선택하는것
여기서는 FormEx 메소드라는 매핑한 곳으로 찾아가게 된다. 


요청하는 컴포넌트 이름                                                             요청처리하는 방식
    ex) join.jsp, info.html, Hworld                                                        ex) get, post


Get : http://IP주소:port번호/컨텍스트/path/MemberJoin?id=“abcdefg”&name="홍길동"홍길동

Post : http://IP주소:port번호/컨텍스트/path/MemberJoin






servlet Parameter


Form태그의 submit버튼을 클릭하여 데이터를 서버로 전송하면, 해당파일(servlet)에서는 HttpServletRequest객체를 이용하여 parameter값을 얻을 수 있다.


반환값은 String이어야 한다. 






















<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>


<form action="FormEx" method="post"> form시작하는 태그


                  <input>태그안에  type, name, size,value를 정의해야 한다. 

이름 : <input type="text" name="name" size="10"><br/> br태그는 줄개행

아이디 : <input type="text" name="id" size="10"><br/>

비밀번호 : <input type="password" name="pw" size="10"><br/>



취미 : <input type="checkbox" name="hobby" value="read">독서


<input type="checkbox" name="hobby" value="cook">요리

<input type="checkbox" name="hobby" value="run">조깅

<input type="checkbox" name="hobby" value="swim">수영

<input type="checkbox" name="hobby" value="sleep">취침<br/>


<input type="radio" name="major" value="kor">국어

<input type="radio" name="major" value="eng" checked="checked">영어  기본값

<input type="radio" name="major" value="mat" >수학

<input type="radio" name="major" value="des" >디자인<br/>



<select name="protocol">

<option value="http">http</option>

<option value="ftp" selected="selected">ftp</option>

<option value="smtp">smtp</option>

<option value="pop">pop</option>

</select><br/>

<input type="submit" value="전송"><input type="reset" value="초기화">

</form> form 끝나는 태그

</body>

</html>





protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

System.out.println("doPost");

String id = request.getParameter("id");

String pw = request.getParameter("pw");

String[] hobbys = request.getParameterValues("hobby"); 배열로 선언한 hobby는getparametervalues 메소드 사용

String major = request.getParameter("major");

String protocol = request.getParameter("protocol");

response.setContentType("text/html; charset=EUC-KR");

PrintWriter writer = response.getWriter();

// 응답하여 클라이언트 사용자에게 출력해준다. 

writer.println("<html><head>안녕</head><body>");

writer.println("아이디 : " + id + "<br />");

writer.println("비밀번호 : " + pw + "<br />" );

writer.println("취미 : " + Arrays.toString(hobbys) + "<br />");

//취미는 다중선택하므로 배열을 사용하여 출력

writer.println("전공 : " + major + "<br />");

writer.println("프로토콜 : " + protocol);

writer.println("</body></html>");




한글처리


Tomcat 서버의 기본 문자 처리 방식은 IOS-8859-1 방식 입니다따라서 개발자가 별도의 한글 인코딩을 하지 않으면 한들이 깨져 보이는 현상이 있습니다.

Get방식과 Post방식에 따라서 한글처리 방식에 차이가 있습니다.