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

http://cfile8.uf.tistory.com/image/186D8B0E4C774FD32BED8B

7. Event ¶

forminput, formchange

7.1. �� ¶

�� 하�� 표��하��

<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

html5/form

Contents

1. �� ¶

1.1. �� ¶

1.2. webForms2 library ¶

2. new feature ¶

2.1. new type ¶

2.2. new attribute ¶

3. element ¶

3.1. range ¶

3.2. number ¶

3.3. date ¶

3.4. input-type ¶

4. input support ¶

4.1. focus ¶

4.2. file upload ¶

4.3. form submit ¶

5. �� ¶

5.1. progress ¶

5.2. Output ¶

5.3. DataList ¶

5.4. Keygen ¶

5.5. Meter ¶

6. ��효�� ¶

6.1. �� ¶

7. Event ¶

7.1. �� ¶

7.2. �� ¶

html5/form

Contents

1. ������ ¶

1.1. ������������ ������ ������ ¶

1.2. webForms2 library ¶

2. new feature ¶

2.1. new type ¶

2.2. new attribute ¶

3. element ¶

3.1. range ¶

3.2. number ¶

3.3. date ¶

3.4. input-type ¶

4. input support ¶

4.1. focus ¶

4.2. file upload ¶

4.3. form submit ¶

5. ��������� �� ������ ¶

5.1. progress ¶

5.2. Output ¶

5.3. DataList ¶

5.4. Keygen ¶

5.5. Meter ¶

6. ���효��� ������ ¶

6.1. ��� ¶

7. Event ¶

7.1. ��� ¶

7.2. ������ ¶

1. �� ¶

1.1. �� ¶

5. �� ¶

6. ��효�� ¶

6.1. �� ¶

7.1. �� ¶

7.2. �� ¶