Difference between r1.1 and the current

@@ -1,5 +1,141 @@

[[pagelist(html5)]]

[[~~tableofcontetns~~]]

[[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 ==

{{{

}}}

* 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 속성

{{{

var selectedFiles = document.getElementById("file").files;

selectedFiles[0].name; //파일이름

selectedFiles[1].size; //파일사이즈

</script>

}}}

== form submit ==

* 폼 전송 버턴인 submit, image 버튼에도 전송 방법, 위치를 정할 수 있다.

{{{

<form>

</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

{{{

</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

== 예 ==

* 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드

{{{

글자 복사 ↓<br>

</form>

글자 수:<output id="textLength"></output>

}}}

* opera

http://cfile29.uf.tistory.com/image/20444E0B4C77793149EE87

== 참고 ==
* http://m.mkexdev.net/66
* http://maxzero.kr/xe/tx/1615

1. 요약 ¶

웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그
추가요소(webForm 2.0)
- 입력 양식 : Range 양식, email등
- 입력 보조 수단
- 입력 값 검증 등

1.1. 브라우저 지원 여부 ¶

1.2. 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-만드는-방법

2. new feature ¶

2.1. new type ¶

search
tel
url
email
datetime, date, month, week, time, and datetime-local
number
range
color

2.2. new attribute ¶

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

3. element ¶

3.1. range ¶

<input type="range" min=0 max=10 step=2 value=2>
http://cfile1.uf.tistory.com/image/1131C2044C762BBE1A410D

3.2. number ¶

<input type="number" min=1 max=10 step=1 value=5>

3.3. 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">

3.4. input-type ¶

search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가
참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
- http://www.w3schools.com/html5/html5_form_input_types.asp

4. input support ¶

4.1. focus ¶

<input type='search' autofocus>
<input type='email' placeholder="이메일 주소 입력">
<input type='tel' placeholder="전화번호 입력">

http://cfile9.uf.tistory.com/image/126F6D054C76381D512E65

4.2. 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>

4.3. form submit ¶

폼 전송 버턴인 submit, image 버튼에도 전송 방법, 위치를 정할 수 있다.
```
<form>
    <input type="submit" formmethod="POST" formaction="/formOk.html">
</form>
```

5. 추가된 폼 양식 ¶

5.1. progress ¶

<progress max="1" value="0"></progress>

5.2. Output ¶

form 으로 전송되고, 값을 사용자가 조정 불 가능하다.
hidden 과 비슷하지만 표시되는 컨트롤
<output name="sum">100</output>

5.3. 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>

5.4. Keygen ¶

암호키 생성
공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다.
다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다
<keygen name="key" keytype="rsa"></keygen>
http://cfile3.uf.tistory.com/image/127695134C77472C21DF54

5.5. Meter ¶

용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI
min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다.
<meter min="0" max="10"></meter>

6. 유효성 검사 ¶

폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다
- <form novalidate action="demo_form.asp" method="get">

6.1. 예 ¶

<input type=email>에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다.
입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
- <input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">