웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

HTML form태그를 사용하여 입력폼 만들기 및 예제

Last Modified : 2019-08-22 / Created : 2019-02-01
7,286
View Count

HTML에서 입력폼을 만들때 사용하는 form 태그에 대하여 자세히 알아봅니다. 언제 그리고 어떻게 사용할까요?




# form 태그 알아보기

form 태그는 매우 자주 사용되는 중요한 태그인 만큼 하나하나 자세히 알아보도록 하겠습니다.

! form 태그를 사용하는 경우는?

먼저 form 태그의 기능은 웹페이지의 방문자에게 특정한 정보를 얻고 이를 서버에 전송할 수 있는 기능을 가지고 있습니다. 그래서 입력을 얻을 수 있는 input이나 textarea 등의 태그 요소를 내부의 자식요소로 가지게 되죠. 일반적으로 아래와 같은 모습입니다.
<form>
  <input type="text" value="" name="title" />
  <textarea name="description"></textarea>
</form>

그렇다면 form에 적용할 수 있는 속성(attribute)들은 어떤게 있을까요? 다음과 같은 속성들이 사용됩니다.

  • action  //  form이 submit되는 경우 이동할 페이지 url
  • method  //  get, post 등의 HTTP method 방법을 선택 (Default. GET)
  • target  //  submit되어 이동할 때 브라우저 창의 동작 방식
  • enctype  //  POST method 사용시 인코딩 방식을 선택
  • name  //  form의 name 값을 설정
  • autocomplete  // HTML5에 추가된 속성으로 자동완성 기능의 여부

위 속성들 중에서 가장 많이 사용되는 필수 속성은 아무래도 action, method 두 가지 입니다. 나머지는 필요에 따라 선택되어 사용할 수 있겠죠. 그렇다면 아래에서 간단한 예제를 사용해보겠습니다.



# form 태그 예제보기

만약 contact us 페이지를 만들어 방문자에게 어떤 정보를 받아 서버로 전송하는 페이지를 만드는 경우를 생각해본다면 아래와 같이 페이지를 작성할 수 있습니다.
<form action="/submit/" method="get">
  <input name="username" type="text" placeholder="이름" />
  <textarea name="content" placeholder="내용을 입력하세요."></textarea>
  <button>제출하기</button>
</form>

이제 제출하기 버튼을 입력하면 입력된 내용은 /submit/ 페이지로 전달되게됩니다. 참고로 button 태그는 form 태그 내부에 선언될 경우 자동으로 기본값이 submit으로 설정되니 참고하세요.


! 마치면서

form 태그의 submit 방식은 비동기식이 아니므로 페이지 전환되거나 새로운 창을 띄우게 됩니다. ajax를 사용하는 경우 form 태그를 사용하지 않아도 데이터를 전송할 수 있으니 참고하세요. 하지만 비동기식인 경우에도 데이터를 입력받는 경우에는 시맨틱 요소로 많이 사용되니 참고하시기 바랍니다.

Previous

HTML title 속성으로 툴팁(tooltip) 보여주기

Previous

HTML/CSS lang 프로퍼티 및 어트리뷰트 방법 및 예제