HTML Form 태그 : 효과적인 웹 폼 디자인과 상호작용을 위한 태그

FORM 태그란?

<form> 태그는 다양한 폼 요소를 생성하는 태그입니다. 폼은 우리가 흔히 보는 입력 창 등을 말합니다. 우리가 자주 쓰는 이메일도 여러가지 폼으로 구성되어 있죠. 제목, 수신/참조, 내용, 첨부파일 등

하지만, FORM 태그만 쓴다고 위의 모든 입력폼을 만들 수는 없습니다. 관련된 태그들이 같이 따라다녀요.

 

활용법

<form method="post" action="/submit">
  <label> .... </label>
  <input> ... </input>
</form>

• form 태그는 열고 닫아야 하는 태그입니다
• method : 데이터의 전송 방식을 설정하는데 보통 post 또는 get으로 설정합니다
  • post, get은 HTTP를 활용한 방식입니다.
  • get 방식 : URL에 요청값을 같이 보내는 방식이에요. 예를 들면 http://example.com/search?query=apple 이런 URL을 접해봤을텐데 apple이라는 검색어로 요청합니다.
  • post 방식 : URL이 아닌 본문에 포함해서 전송하는 방식이에요. 예를 들면 http://example.com/login 이런 URL입니다. 데이터가 노출되지 않죠
• action : 폼이 제출될 때 데이터를 전송할 URL을 정합니다. 만약 아무것도 입력하지 않으면 현재페이지로 전송합니다

 

예시

See the Pen FORM by 40's Programmer (@40sProgrammer) on CodePen.

 

위의 예시를 보면 <label>, <input>, <textarea>를 함께 써서 폼을 만든 것을 알 수 있습니다.

• label : input 태그와 텍스트를 연결하는 기능이 있어요 관련포스트
• input : 사용자로부터 1줄 입력을 받을수 있는 태그에요 관련포스트
• textarea : 사용자로부터 1줄 이상 입력을 받을 수 있는 태그에요

그 외에도 <button>, <select> 태그와도 같이 쓰입니다.