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