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.0298 sec