태그 - 폼 엘레멘트

 

웹 브라우저를 사용자로부터 데이터를 입력받을 때는 <form>태그를 사용한다. <form>태그는 혼자 사용되는 것이 아니라 HTML의 다양한 입력폼과 함께 사용되어 진다.

 

<form>
... 입력폼들 ...
</form>

<form>태그를 사용하면 사용자로부터 데이터를 입력받아 서버에 전송할 수 있다. 입력필드로 부터 데이터를 입력받아 전송하는 태그가 <form>태그이다.

 

입력필드에 데이터를 입력한 후 submit이 발생하면 폼 태그안에 있는 데이터를 모아 <form>태그에 지정한 url 주소로 데이터를 전송한다. 이 때 전송되는 방식은 POST방식과 GET방식이 있으며 해당 전송방식에 따라 데이터가 인코딩되어 전송된다.

 

 

<form>태그에 지정할 수 있는 속성은 다음과 같다.

• action: 폼데이터를 전송할 서버의 url주소
• name: 폼의 이름
• method: 전송 방식을 지정( ex) post, get)
• enctype: 폼데이터의 종류를 지정( 이 속성을 지정안했을 경우 기본값은 application/x-www-form-urlencoded이다. 하지만 파일을 보내는 폼에서는 enctype을 반드시 지정해주어야 하며 종류는 multipart/form-data 형태로 지정해야 한다.)

 

 

폼 엘레멘트를 구성하는 태그들의 종류

 

[사진출처] : http://www.w3schools.com/html/html_forms.asp

 

 

 

폼 엘레멘트를 사용할 때 주의할 점

 

폼 엘레멘트는 다른 폼 엘레멘트를 포함할 수 없다. <form>안에 다른 <form>이 존재한다면 서밋이 발생하지 않는다. 하지만 <form>요소 안에 여러 개의 서밋 버튼이 있다면 각각의 서밋 버튼 모드 서밋을 발생시킨다.

 

서밋의 발생되지 않는 <form>

<form method="post" action="index.html">
 이름: <input name="name" type="text" />
 나이: <input name="age" type="text" />
 <form method="post" action="index.html">
  성별: <input name="sex" type="text" />
 </form>
 <input type="submit" value="전송" />
</form>