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