FrontEnd/HTML

[HTML] form 태그

코딩마루 2023. 1. 31. 04:26

1. form 태그란?

우리가 submit 버튼을 눌렀을 때 get 혹은 post 방식으로 서버에 요청을 전달하고 싶은 경우가 있다. 이 경우 <form> 태그를 사용하면 원하는 작업을 처리할 수 있다. 즉, form 태그는 속성을 통해 서버로 어떤 방식으로 넘기고, 어떻게 처리할 지를 지정하는 역할을 수행한다. form 태그는 아래와 같은 속성으로 구성된다.

name form의 이름을 지정한다.
method 서버로 전달할 방식을 지정한다. (get/post)
action 내용을 처리할 프로그램을 지정한다.
target 지정한 스크립트 파일이 현재 창으로 열릴지, 다른 창으로 열릴지 선택한다.
enctype 데이터가 서버로 제출될 때 인코딩되는 방법을 명시한다.

2. form 태그 예시 (Servlet 활용 코드)

아래는 form 태그의 예시 코드다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset:utf-8");
    response.setCharacterEncoding("UTF-8");
    PrintWriter out = response.getWriter();

    out.println("<form name=\"addGuestbook\" method=\"post\" action=\"Exam\" encType=\"UTF-8\">");
    out.println("이름: <input type=\"text\" name=\"name\" maxlength=\"255\" size=\"20\"> <br>");
    out.println("<input type=\"submit\" value=\"확인\">");
    out.println("</form>");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset:utf-8");
    response.setCharacterEncoding("UTF-8");
    request.setCharacterEncoding("UTF-8");

    PrintWriter out = response.getWriter();

    out.println("내 이름은 "+request.getParameter("name")+"입니다.");
}

해당 코드의 결과를 살펴보자. 위에서 get 방식으로 url에 접속하면 아래와 같이 값을 입력했다고 하자.

확인을 누르면 post 방식을 통해 해당 url(http://localhost:8080/Exam)을 서버에 요청하게 되고 아래와 같은 결과를 반환해준다.