- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/๋ฌธ์ ์
- html5practice/roundRect
- html5practice/์ฆ๊ฒจ์ฐพ๊ธฐ๋ชฉ๋ก๋ง๋ค๊ธฐ
Contents
1. ์์ฝ ¶
- ์น ์์์ ์ง์ํ๋ ํ๊ทธ๋ฅผ ํผ ํ๊ทธ(Form Tag)๋ผ ํ๋ค
- ํผ ํ๊ทธ๋ HTML ๋ฌธ์์์ ์ฌ์ฉ์ ์
๋ ฅ์ ์ํด ์ ๊ณต๋๋ ์์ ํ๊ทธ
- ์ถ๊ฐ์์(webForm 2.0)
- ์
๋ ฅ ์์ : Range ์์, email๋ฑ
- ์
๋ ฅ ๋ณด์กฐ ์๋จ
- ์
๋ ฅ ๊ฐ ๊ฒ์ฆ ๋ฑ
- ์
๋ ฅ ์์ : Range ์์, email๋ฑ
1.2. webForms2 library ¶
- Google's 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 ๊ตฌํ์ ๊ฐ๋ฅํ๋๋ก ํด ์ค๋ค. ์ด์ ๊ด๋ จํ ๋ค์์ ๊ธ์ ์ฐธ๊ณ ํด ๋ณด๊ธฐ ๋ฐ๋๋ค
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.1. range ¶
<input type="range" min=0 max=10 step=2 value=2>
- http://cfile1.uf.tistory.com/image/1131C2044C762BBE1A410D
3.3. date ¶
<input type="date" min="2001-01-01" max="2010-08-31" step=1 value="2010-08-26">
- ๋ค๋ฅธ ์์์ ๋ ์ง
<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) ์์์ ๋ํ ๋ค์ ๊ธ์ ์ฐธ๊ณ ํ๊ธฐ ๋ฐ๋๋ค
4.1. focus ¶
<input type='search' autofocus> <input type='email' placeholder="์ด๋ฉ์ผ ์ฃผ์ ์ ๋ ฅ"> <input type='tel' placeholder="์ ํ๋ฒํธ ์ ๋ ฅ">
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.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.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