[[pagelist(html5)]]
[[tableofcontents]]
= 요약 =
 * 웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
 * 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그
 * 추가요소(webForm 2.0)
  * 입력 양식 : Range 양식, email등
  * 입력 보조 수단
  * 입력 값 검증 등
== 브라우저 지원 여부 ==
 * http://caniuse.com/
 * http://cfile9.uf.tistory.com/image/133539014C76281A1B4E24
 * http://cfile23.uf.tistory.com/image/1212FF364C5A80AF697A7F
== webForms2 library ==
 * Google's WebForms2 라이브러리
  * http://code.google.com/p/webforms2/

 * HTML5 의 Canvas를 지원하지 않는 IE8 이전 버전을 위해 ExplorerCanvas(http://code.google.com/p/explorercanvas/) 라이브러리가 제공되듯이 HTML5 확장 폼을 지원하지 않는 브라우저의 경우 WebForm2 라이브러리를 사용할만 하다
 * 라이브러리를 다운받고 아래와 같이 라이브러리를 참조한다
  * {{{<script type='text/javascript' src='webforms2.js'></script>}}}
 * WebForms2 라이브러리는 HTML 폼 확장에 대해 각 브라우저마다 다르게 동작하는 문제점을 극복하기 위해 제공되며 Cross Broswer HTML5 Form 구현을 가능하도록 해 준다. 이와 관련한 다음의 글을 참고해 보기 바란다
  * http://nz.pe.kr/wordpress/programming/html5/번역-지금-바로-cross-browser-html5-form-만드는-방법

= new feature =
== new type ==
 * search
 * tel
 * url
 * email
 * datetime, date, month, week, time, and datetime-local
 * number
 * range
 * color

== new attribute ==
 * list — 값의 제한을 포함하는 datalist element를 의미
 * max and min - 유요한 날짜, 시간 그리고 숫자 값
 * pattern - 제약적인 정규식을 허용
 * placeholder - field에 text hint를 보여 줌

= element =
== range ==
 * {{{<input type="range" min=0 max=10 step=2 value=2>}}}
 * http://cfile1.uf.tistory.com/image/1131C2044C762BBE1A410D
== number ==
 * {{{<input type="number" min=1 max=10 step=1 value=5>}}}
  * 
== date ==
 * {{{<input type="date" min="2001-01-01" max="2010-08-31" step=1 value="2010-08-26">}}}
  * http://cfile6.uf.tistory.com/image/175B81244C762F8741C325
 * 다른 양식의 날짜
  * {{{<input type="datetime"><input type="datetime-local"><input type="month">}}}
  * {{{<input type="week"><input type="time">}}}
== input-type ==
 *  search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가
 * 참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
  * http://www.w3schools.com/html5/html5_form_input_types.asp
= input support =
== focus ==
 {{{
<input type='search' autofocus>
<input type='email' placeholder="이메일 주소 입력">
<input type='tel' placeholder="전화번호 입력">
}}}
 * http://cfile9.uf.tistory.com/image/126F6D054C76381D512E65
== file upload ==
 * multi file upload
  * {{{<input type='file' multiple>}}}
 * file filtering
  * {{{<input type='file' accept="image/gif">}}}
 * files 속성
  {{{
<script type="text/javascript">
  var selectedFiles = document.getElementById("file").files;
  selectedFiles[0].name; //파일이름
  selectedFiles[1].size; //파일사이즈 
</script>
}}}
== form submit ==
 * 폼 전송 버턴인 submit, image 버튼에도 전송 방법, 위치를 정할 수 있다.
 {{{
<form>
    <input type="submit" formmethod="POST" formaction="/formOk.html">
</form>
}}}
= 추가된 폼 양식 =
== progress ==
 * {{{<progress max="1" value="0"></progress>}}}
== Output ==
 * form 으로 전송되고, 값을 사용자가 조정 불 가능하다.
 * hidden 과 비슷하지만 표시되는 컨트롤
 * {{{<output name="sum">100</output>}}}
== DataList ==
 * input 박스에 포커스가 오면 이 리스트를 보여준다
 * input 양식의 option 선택
 http://cfile30.uf.tistory.com/image/16593B0B4C774BE27544CA
 {{{
<input type="url" list="url_list" />
  <datalist id="url_list">
  <option label="모바일플랫폼" value="http://m.mkexdev.net" />
  <option label="MKEX의닷넷" value="http://www.mkexdev.net" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
}}}
== Keygen ==
 * 암호키 생성
 * 공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다.
 * 다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다
 * {{{<keygen name="key" keytype="rsa"></keygen>}}}
 http://cfile3.uf.tistory.com/image/127695134C77472C21DF54
== Meter ==
 * 용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI
 * min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다. 
 * {{{<meter min="0" max="10"></meter>}}}
= 유효성 검사 =
 * 폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다 
  * {{{<form novalidate action="demo_form.asp" method="get">}}}
== 예 ==
 * {{{<input type=email>}}}에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다.
 * 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
 * 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
  * {{{<input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">}}}
 http://cfile8.uf.tistory.com/image/186D8B0E4C774FD32BED8B
= Event =
 * forminput, formchange
== 예 ==
 * 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드
 {{{
<form onforminput="ta2.value = ta1.value;textLength.value=ta1.value.length;">
  <textarea id="ta1"></textarea> <br>
  글자 복사 ↓<br> 
</form> 

<textarea id="ta2"></textarea>
글자 수:<output id="textLength"></output>
}}}
 * opera
 http://cfile29.uf.tistory.com/image/20444E0B4C77793149EE87
== 참고 ==
 * http://m.mkexdev.net/66
 * http://maxzero.kr/xe/tx/1615
 * [http://diveintohtml5.org/forms.html form of madness]
 * [http://www.w3.org/TR/html5-diff/ w3c:HTML5 differences from HTML4]