Frontend/HTML&CSS

HTML5의 입력 양식에 대해 알아보자

적끄적끄 2024. 1. 8. 23:37

웹 양식은 사용자가 웹 문서에 어떠한 데이터를 입력하고 그 결괏값을 가져오기 위해 사용합니다. 이럴 때 사용자로부터 입력을 받기 위한 도구로 <form> 태그를 활용합니다. 이 <form> 태그가 무엇인가에 대해 알아보도록 하겠습니다.

 

 

 

 

 

<form> 태그

<form>태그는 입력 양식 지정을 위한 기본 태그입니다. 입력 양식의 최상위 요소로서 입력 양식을 생성하기 위해 가장 먼저 작성해야 하는 태그입니다.

 

<form> 태그의 기본적인 작성 방법부터 알아보도록 하겠습니다. 작성 방법은 다음과 같습니다.

<form name="입력 폼 이름"action="웹 프로그램 페이지" method="전달 방식">
	<input type="폼 모양과 기능" name="입력 폼 변수" value="전달 값">
</form>

위 코드에 나와있는 속성을 하나하나 설명드려 보도록 하겠습니다.

  • name : 현재 폼 태그의 이름을 지정해 줍니다.
  • action : 사용자가 입력한 데이터를 처리하기 위한 웹 프로그램의 페이지를 지정합니다. ASP, PHP, JSP 등 여러 가지가 있습니다.
  • method : 웹 서버와 클라이언트 간의 통신 방법을 지정합니다. GET 방식과 POST 방식 둘 중 하나를 선택할 수 있습니다.

<input> 태그를 통해서 다양한 입력 양식을 생성할 수 있습니다.

  • type : 폼의 모양과 기능을 결정합니다. 사용 가능한 type 속성값은 다음과 같습니다.
    • text : 텍스트 입력이 가능한 작은 필드를 생성합니다.
    • password : 위 text와 모양과 기능은 동일하지만 화면상에 입력되는 글자가 안 보이게 출력됩니다.
    • checkbox : 체크 박스를 생성합니다. 복수 선택이 가능합니다.
    • radio : 동그란 모양의 체크 박스를 생성합니다. 복수 선택이 불가능합니다.
    • submit : 입력한 데이터를 서버로 보내기 위한 버튼을 생성합니다.
    • reset : 입력한 데이터를 초기화시킵니다.
    • button : 클릭이 가능한 버튼을 생성합니다.
  • name : 폼의 이름을 지정합니다. 여기서의 name의 속성값은 변수처럼 활용됩니다. 변수에 대해 모르신다면 넘어가셔도 됩니다.

 

 

 

 

 

GET 방식과 POST 방식

위 method에서 말씀드렸듯 서버와 클라이언트와 통신하는 방법에는 두 가지 있습니다. GET 방식과 POST 방식인데요. 두 입력 양식에 어떠한 차이가 있는지 설명해 보도록 하겠습니다.

GET 방식

GET방식은 서버와 클라이언트가 통신을 할 때, URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식입니다. 사용자가 입력한 데이터는 이름과 값이 결합된 문자열 형태로 전달 되게 되고, 각 이름과 값의 쌍이 '&'기호로 구분됩니다.

 

다음의 상황을 보고 한번 이해해 봅시다.

<form method="get">
	<input type="text" name="example" value="전송">
</form>

 

 

 http://local host/book/page.jsp? user=Hong&dept=Computer

 

위 텍스트를 입력하는 칸에 정보를 입력하고 전송을 누를 시, GET 방식에서는 아래에 보이는 URL텍스트는 서버로 보내는 데이터가 되게 됩니다. GET 방식은 이와 같이 간단하고, 속도가 빠르고, 뒤로 가기를 눌렀을 때도 이전 페이지로 전환이 가능하다는 장점이 있습니다.

 

하지만, 서버로 보낼 수 있는 글자 수가 2,048자로 제한되어 서버로 넘겨주는 데이터의 양에 한계가 있고, 이 웹 입력 방식을 아는 사람이라면 이 URL을 해석하는 게 가능해 보안에 매우 취약하게 됩니다. 따라서 개인 정보가 포함되어 있을 때에는 GET방식을 활용하지 않는 것이 좋습니다.

POST 방식

POST 방식은 URL에 파라미터를 붙여서 데이터를 전송하는 것이 아니라, HTTP Request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식입니다. POST 방식은 글자수의 제한이 없으며, 제출된 데이터가 URL상에서는 해석이 불가능합니다.

 

GET 방식과 비교했을 때 보안상 우위에 있습니다. POST 방식을 활용하면 다음과 같은 URL로 서버에 전송하게 됩니다.

<form method="post">
	<input type="text" name="example" value="전송">
</form>

 

 

  http://local host/book/page.jsp

 

 

 

 

 

결론

GET 방식과 POST 방식의 장단점은 서로 반대된다고 할 수 있습니다.

따라서, 두 방식 중 어떤 방식을 활용해야 하는가? 에 대한 질문에는 이런 질문으로 대답이 가능합니다.

  • 목적이 무엇인가?
  • 어떤 기능을 구현하고자 하는지?
  • 데이터 보안이 중요한가?

간단하게 속도가 중요시되고, 보안이 중요시되지 않는다면, GET 방식,

보안이 중요시되는 상황이라면 POST 방식을 활용하는 게 올바른 방법일 것입니다.