U E D R , A S I H C RSS

html5/form

1. ์š”์•ฝ

  • ์›น ์–‘์‹์„ ์ง€์›ํ•˜๋Š” ํƒœ๊ทธ๋ฅผ ํผ ํƒœ๊ทธ(Form Tag)๋ผ ํ•œ๋‹ค
  • ํผ ํƒœ๊ทธ๋Š” HTML ๋ฌธ์„œ์—์„œ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์œ„ํ•ด ์ œ๊ณต๋˜๋Š” ์–‘์‹ ํƒœ๊ทธ
  • ์ถ”๊ฐ€์š”์†Œ(webForm 2.0)
    • ์ž…๋ ฅ ์–‘์‹ : 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. 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

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">
  • ๋‹ค๋ฅธ ์–‘์‹์˜ ๋‚ ์งœ
    • <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. input support

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. ์ถ”๊ฐ€๋œ ํผ ์–‘์‹

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
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0135 sec