Form

form요소의 경우 다른 요소들과는 성격이 조금 다릅니다. 그동안은 우리가 일방적으로 사용자에게 정보를 전달하는 형태를 띄었으며 무슨 정보가 들어갈지 알고 있었다면, form요소는 사용자에게 어떠한 정보를 입력할 장치를 제공하는 것이고 사용자에게 정보를 다시 돌려받게 됩니다. 이렇게 사용자가 입력한 데이터를 서버로 보낼 때도 form요소를 사용합니다.

<form action="처리할페이지주소" method="get|post"></form>

하지만 form요소가 담당할 수 있는 부분은 어느정도 한계가 있습니다. 사용자가 입력한 정보에 대해 유효성을 체크하는 등의 영역은 자바스크립트의 영역이라고 보는 것이 좋습니다.

물론, 컨트롤해줄 수 있는 부분도 어느정도 있습니다. 회원가입이라던가 주문서 같은 폼의 정보 입력 후 필수 요소를 입력하지 않는 경우 다른 사이트로 정보를 보내지 않고 경고 안내를 해주는 등의 컨트롤은 form마크업 만으로도 할 수 있습니다.

앞으로 form 자체를 움직이는 메커니즘에 대해서 서버쪽은 이해하기 어렵기 때문에 html을 통해 할 수 있는 정도를 간략히 설명하고 어떠한 아이템이 있고 어떻게 사용하는지, 주요속성에 대해 중점에 두고 공부를 해보도록 하겠습니다.

1. action 속성

html에 form태그를 입력하면 자동으로 action=""이 들어가게 됩니다.

양식 데이터를 처리할 프로그램의 URI. form데이터를 모아서 다른 페이지나 서버로 전송을 할 수 있습니다. 이러한 다른 서버의 최종 목적지를 action에 넣어 명시를 합니다. 양식 데이터를 처리할 프로그램의 URI. <button>, <input type="submit"> (en-US), <input type="image"> (en-US) 요소의 formaction 특성으로 재정의할 수 있습니다.

2. method 속성

양식을 제출할 때 사용할 HTTP 메서드입니다. <button>, <input type="submit"> (en-US), <input type="image"> (en-US) 요소의 formmethod 특성으로 재정의할 수 있습니다.

2-1 get 메서드

양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다. 사용자가 입력한 정보를 주소창에 그대로 보여주기 때문에 보안이 필요한 메세지에는 사용해서는 안됩니다. 보통 검색등에 사용되고 회원가입 등에는 사용하지 않습니다

2-2 post메서드

POST 메서드. 양식 데이터를 요청 본문으로 전송합니다. post메서드의 경우 주소창에 내용이 노출되지가 않기 때문에 대부분은 post를 이용하여 form을 만듭니다.