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