HTML 의 FORM 요소로 지정할 수 있는 속성과 속성값

 FORM 요소는 일반적으로 사용자가 데이터를 입력할 수 있는 입력폼 요소들의 범위를 설정하거나, 서버로 전송할 데이터들을 설정할 때 사용한다. 이때 서버란 데이터를 처리할 수 있는 프로그램을 뜻하며 PHP 나 CGI 를 예로 들 수 있다. 이러한 서버는 FORM으로 넘겨진 값들을 가져오기 위해선 꼭 필요하다. 이렇듯 FORM 요소는 데이터를 전송하기 위해 꼭 필요한 요소기이도 하나 요즘은 AJAX를 사용하여, 요소에 구애 받지 않고, 전체페이지의 로드없이 서버로 데이터를 보내고 받고 하는게 추세이다. 물론 AJAX를 사용한다해서 FORM 요소를 사용하지 않는건 아니다. 그 이유는 FORM 은 입력폼이라는 또하나의 자식과 같은 요소들을 컨트롤 할 수 있기때문에 FORM 요소 범위 안에 작성된 값들을 쉽게 컨트롤 하기 위해선 꼭 필요하다.   

  FORM 의 기본적인 구조는 아래 와 같이 <form></form> 을 사용하여, 작성한다. FORM 요소 범위안에는 기본적으로 입력폼으로 사용가능한 요소들이 사용된다. 이곳에서는 FORM 요소 범위안에 들어가는 요소들이 아닌 FORM 요소 속성과 속성값으로 올 수 있는 키워드에 대해 알아보도록 하자.

 FORM 요소의 기본구조 예제

---

<form action="http://ex.com/form.php" method="get" >
<input type="text" name="ipt" value="" />
.
.
.
</form>

  위의 예제에서는 가장 기본적인 action 속성과 method 속성만 지정한것이고, 아래와 같이 더욱 많은 속성과 값들을 지정할 수 있다. 아래는 FORM 요소로 지정가능한 속성과 속성값으로 올 수 있는 키워드의 설명이다.

 FORM 요소로 지정가능한 속성과 속성값

---

action 속성

 입력된 데이터를 송신하여 처리할 서버프로그램이 있는 URL 경로를 지정한다. 

---

method 속성

 보낼 데이터를 어떤 형태로 송신할 것인지 지정한다. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

get

 - 이 값은 URL 끝에 '?' 다음에 FORM 의 데이터값들을 추가할때 지정한다. (기본값) 

post

 - 이 값은 FORM 의 데이터값들을 본문으로 보낼 시 지정한다. 이 방식은 일반적으로 보낼 데이터가 보안이 필요하거나, 데이터의 길이가 길 경우 사용한다.

---

accept-charset 속성

 FORM 요소의 데이터를 송신할때 사용할 문자 인코딩을 지정한다. 만약 문자인코딩이 여러개 인경우 스페이스바로 분류하여 지정하면 된다.

---

autocomplete  속성

 이 속성은 HTML5 의 새속성으로 입력필드에 입력된 데이터에 대해 자동채움을 유효화할지 무효화 할지 지정할 수 있다. 이말은 FORM 을 이용하여 서버로 데이터를 전송한뒤, 사용자가 뒤로 가기를 눌렀을 시 이전에 입력된 데이터를 자동으로 채워넣을지 아니면 비워놓을지를 선택하는것이다. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

on   

 - 이값은 이전 데이터를 유효화 한다. 즉 이전 데이터를 자동으로 채워넣는다. (기본값)

off 

 - 이값은 이전 데이터를 무효화 한다. 즉 초기화 시킨다.

---

enctype 속성

 데이터를 송신할 시 데이터의 인코딩을 지정하는 속성이다. 쉽게 말해, FORM 요소를 이용하여 데이터를 전송할 시 어떠한 형태의 데이터를 전송할지 이 속성값이 미리 지정하는것이다. 이속성의 기본 키워드값은 application/x-www-form-urlencoded 이며, 이속성의 값으로 올 수 있는 키워드는 아래와 같다.

application/x-www-form-urlencoded

 - 이 값은  일반적인 데이터를 보낼 시 지정한다. (기본값)

multipart/form-data

 - 이 값은 보내야할 데이터에 첨부파일이 있을 경우 지정한다.

text/plain

 - 이 값은 플레인 텍스트만으로 이루어진 데이터를 보낼 경우 지정한다.

---

name 속성

 FROM 요소의 이름을 지정한다. 이때 name 속성의 값은 다른 FORM 요소와 중복되어선 안된다.

---

target 속성

 이 속성값은 FORM 요소에서 데이터를 송신 후 결과를 표시할 브라우징 컨텍스트를 지정한다. 일반적인 A 요소의 target 속성과 같으며. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

브라우징 컨텍스트명

 - 이 값으로는 iframe 이나 frame 으로 이루어진 요소들의 name 속성의 값을 지정할 수 있다.

_blank

 - 새 브라우징 컨텍스트에 표시

_self

 - 현재의 브라우징 컨텍스트에 표시 (기본값) 

_parent

 - 현재 브라우진 컨텍스트에 부모창이 존재할시 그 부모창에 표시

_top

 - 최상위 브라우징 컨텍스트에 표시

---

novalidate 속성

 이 속성은 HTML5의 새속성으로 FORM 에서 데이터를 송신 할때 입력된 데이터의 유효성을 무효화 할 때 사용한다. 이 속성값을 사용하는 이유는 INPUT 요소의 type 속성값으로 url 또는 email 과 같은 특정한 데이터 형식만을 취급하는 input 요소가 존재할 시 데이터를 검증하게 되는데, HTML5의 novalidate 속성을 지원하는 브라우저같은 경우 올바르지 않는 데이터가 있을 시 오류를 발생시키게 된다. 결론적으로 이런 오류검증 기능을 무효화 시키기 위해 이속성을 지정한다. 이 속성의 값은 따로 지정해줄 필요는 없지만 만약 지정해 준다면 novalidate="novalidate" 나 novalidate="" 로 지정해 주면 된다. 

---

onSubmit 속성

 이 속성은 INPUT 요소의 type 속성중 submit 를 사용할 시 지정할 수 있다. 이 속성을 지정하는 이유는 데이터를 보내기전에 처리할 일들이 있을 경우 사용하게 된다. 일반적으로 함수를 이용하여 많이 사용하며, 하나의 예를 들면 onSubmit="return func()" 처럼 사용할 수 있다. func() 는 사용자정의 함수이고, return 을 해주는 이유는 함수내에서 결과값을 검증하여, 잘못됫을 경우 함수내에서 return false 를 사용하여 FORM 의 SUBMIT 기능을 중지시키기 위해서이다.

 FORM 요소의 속성과 값은 위에서 설명한것과 같다. 물론 위에서 설명한 속성말고도 지정해 줄 수 있는 속성들은 몇가지더 존재하지만, 여기서는 FORM 요소에서 쓰이는 기본적인 속성에 대해서만 설명하도록 하겠다.