Html5/form

[[pagelist(html5)]]

요약

• 웹 양식을 지원하는 태그를 폼 태그(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-만드는-방법

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
• form of madness
• w3c:HTML5 differences from HTML4