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 태그를 사용하지 않아도 데이터를 전송할 수 있으니 참고하세요. 하지만 비동기식인 경우에도 데이터를 입력받는 경우에는 시맨틱 요소로 많이 사용되니 참고하시기 바랍니다.