![www.javaspecialist.co.kr
13. HTML5? ??? input ??? ?? (4/4)
? pattern
¨C ?? ???? ???? ?? ?? ??? ??? ? ??.
¨C ???? : "|" ??? ?? ? ??? ??? ??.
? "abc|adc"? abc?? ???? adc?? ???? ?? ??.
¨C ???? : "("? ")"? ?? ?? ??? ?? ? ??
? "abc|adc"? "a(b|d)c"? ?? ??? ??.
¨C ???? : ?? ?? ?? ??? ??? ???.
? "*" : 0? ??, "a*b"? "b", "ab", "aab", "aaab"? ??.
? "+" : 1? ??, "a+b"? "ab", "aab", "aaab"? ????? "b"? ???? ??.
? "?" : 0??? 1?, "a?b"? "b", "ab"? ???.
? "{m,n}" : m? ?? n? ??, "a{1,3}b"? "ab", "aab", "aaab"? ?????, "b"? "aaaab"? ???
?.
¨C "fa|mo|b?o)ther"? "father", "mother", "bother", "other"? ???
¨C ????? ???? ???
? "[]" : "["? "]" ??? ?? ? ??? ??, "|"? ??? ? ?? ?? ??
¨C "[abc]d"? ad, bd, cd? ??.
¨C "-"??? ?? ?? ??? ??? ??? ? ??. "[a-z]"? a?? z?? ? ??, "[1-9]"? 1??
9?? ?? ??? ??.
? "[^]" : "[^"? "]" ??? ??? ??? ??? ??? ??
¨C "[abc]d"? ad, bd, cd? ???? ?? ed, fd ? ??. "[^a-z]? ??? ???? ???? ?? ?
? ??? ???
? "^", "$" : ?? ???? ??? ?? ???
¨C ?)
? Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" >25](https://image.slidesharecdn.com/2-2-150922025704-lva1-app6891/85/2-2-html5-25-320.jpg)
![www.javaspecialist.co.kr
14. input ??? type ?? ? (1/3)
? type ??? ?? ?? ??? ??? ?? ?? ???? ???? ??
? text, password, checkbox, radio, submit, reset, upload ??? ?? HTML5 ? ?? ??? ???
??
? HTML5? type ??? ??? email, url, number, range, Date Picker(date, month, week, time,
datetime, datetime-local), search, color, tel ?? ?????.
¨C email : <input type="email" name="user_email">
¨C url : <input type="url" name="user_url">
¨C number : <input type="number" name="points" min="1" max="10">
¨C range : <input type="range" name="points" min="1" max="10">
¨C Date pickers (date, month, week, time, datetime, datetime-local) :
? Date: <input type="date" name="user_date">
? Month: <input type="month" name="user_month">
? Week: <input type="week" name="user_week">
? Date and time: <input type="datetime" name="user_datetime">
? Date and time: <input type="datetime-local" name="user_local">
¨C search
? <input type="search" placeholder="Search...">
¨C color
? <input type="color" name="user_color">
¨C tel
? <input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$">
26](https://image.slidesharecdn.com/2-2-150922025704-lva1-app6891/85/2-2-html5-26-320.jpg)
![www.javaspecialist.co.kr
Lab - HTML5 ? ?? ???? (HTML5/form/input_properties.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>input ???? ?? ?</title>
6. <style>
7. [required] {
8. border-color: #00F;
9. -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
10.}
11.:invalid {
12. border-color: #F00;
13. -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
14.}
15.</style>
16.</head>
17.<body>
18.<form action="#" id="input_form" method="post">
19.<input type="text" required placeholder="??? ?????." /><br />
20.<input type="email" placeholder="some@email.com" /><br />
21.<input type="date" min="2010-08-14" max="2013-12-31" placeholder="2010-08-14"/><br />
22.<input type="range" min="0" max="50" value="10" /><br />
23.<input type="search" placeholder="Search..." x-webkit-speech/><br />
24.<input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$" /><br />
25.<input type="color" placeholder="?) #bbbbbb" /><br />
26.<input type="number" step="1" min="-5" max="10" value="0" /> <br />
27.<select multiple>
28. <option>?? 1
29. <option>?? 2
30. <option>?? 3
31.</select><br>
32.<input type="radio" name="data" multiple />a <input type="radio" name="data" multiple />b <br />
33.<input type="submit" value=" ?? "/>
34.<input type="reset" value=" ?? "/>
35.</form>
36.</body>
37.</html>
???? ?? ?? ???
??? ?? ???? ???
????? ??? ?? ??
??? ????? ?? ??
??.
30](https://image.slidesharecdn.com/2-2-150922025704-lva1-app6891/85/2-2-html5-30-320.jpg)
![[2014?????] ???? HTML5 ??? ?? ??, ??? ???](https://cdn.slidesharecdn.com/ss_thumbnails/08-140827030216-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to 2-2. html5 (20)
More from JinKyoungHeo (11)
2-2. html5
- 2. www.javaspecialist.co.kr 1. HTML5 ? HTML5 ?? ¨C HTML(Hyper Text Markup Language)? ?? ?? (?? ?? ?? ???? ?? ???? HTML 4.01) ¡ ??? ??? HTML5?? ??? ??? ??? HTML? ???? ??? ?? JavaScript API(HTML5 API)? ???? ?? ???? HTML5 = HTML + CSS + JavaScript ¨C "??? ??? ???? ? ? ?????? ?? ???" ? ????? ? ?????? ??? ?? ?? ?? ? HTML5? ????? ?? ??? ¨C ? ????? ???? ?? ? ? ????? ???? ?? ¨C ?? ?? ??? ¡®??¡¯? ???? ? ?? ?? ??? ¡®??¡¯? ???? ? ¨C ? ?????? ??? ??? ? Rich? ? ?????? ?? ?? ? HTML5??? ¨C ? ??? ??, ??? ?? ¨C ??? ??? ?? ¨C ??? ??? ??, ? ?? ??? ?? 2
- 3. www.javaspecialist.co.kr 2. HTML5 ?? (1/3) ? ?? ?? ???? ?? ??????? ?? ? XHTML 2.0? ?? ??? ????? ??? XML ??? ???? ?? ??? ??? ? WHATWG(Web Hypertext Application Technology Working Group) ¨C ??? ??, ??, ??? ?????? ? ??? ?? ??? HTML4.01 ??? ??? ?? ?? ??? ?? ??? ????? ?? ?? ??? ?? 1. ??? ? ???? XHTML ?? 2. HTML/XHTML?? ???? ???? ?? XHTML 2.0 1. XHTML ?? HTML? ????? 2. W3C? ??? ???? 3. Apple, Mozilla, Opera ??? ????? 2004? ?? WHATWG VS 3
- 4. www.javaspecialist.co.kr 2. HTML5 ?? (2/3) 1. 2007? W3C? WG?? ?? ??? ?? 2. WHATWG? ???? HTML5? ??? ????? ? 3. 2008? 1? 22? W3C? HTML5? ??? ??? 4. 2009? 10? WHATWG? HTML5 ??? ??? W3C? ?? 5. 2009? 7? XHTML2? ?? ??? ??? WHATWG 4
- 5. www.javaspecialist.co.kr 2. HTML5 ?? (3/3) ?? HTML ?? ??? ?? 1993. 06 HTML 1.0 IETF Internet Draft 1995. 11 HTML 2.0 RFC 1866 1996 CSS 1 + JavaScript 1997. 01 HTML 3.2 W3C ?? 1997. 12 HTML 4 W3C ?? 1998 CSS2 1998. 10 DOM Level 1 W3C ?? 1999. 12 HTML 4.01 W3C ?? ??? HTML 2000. 01 XHTML 1.0 W3C ?? HTML + XML 2000. 11 DOM Level 2 Core W3C ?? 2001.05 XHTML 1.1 XHTML 2.0? 2006.07 2007.11 HTML5 ??? ?? ?? ? ? 2010. 01 HTML5 ?? ?? FPWD(First Publication Working Draft) 2011. 05 HTML5 ?? ?? LC(Last Call Working Draft) 2012. Q4 HTML5 ?? ??? CR(Candidate Recommendation) 2012. Q2->Q4 2014. Q4 HTML5 ?? ??? PR(Proposal Recommendation) 2014. Q1->Q4 2014. Q4 HTML5 ?? ??? Rec(Recommendation) 2014. Q2->Q4 HTML 5.1 2012. Q4 FPWD 2014. Q3 LC 2015. Q1 CR 2016. Q4 Rec 2004. WAHTWG ?? 2007. W3C? HTML5 ??? ? ? 5
- 6. www.javaspecialist.co.kr 3. HTML5 ?? ???? ¡®HTML5¡¯ ?? HTML5 DOM HTML ?? windows object ¡¡ JavaScript API Web Storage Web Socket Indexed DB ¡¡ CSS3 Transition Animation Transform ¡¡ etc¡ SVG MathML WebGL ¡¡ ? ?? ??? ¡®HTML5¡¯ ??? ??? ?? 6
- 7. www.javaspecialist.co.kr 4. HTML5 ????(HTML 4.01? ???) ? ?? ??? ?? ¨C <!doctype> ?? ¨C ?? ??? ?? (<meta charset="UTF-8">) ? ??? ?? ?? ¨C <header>, <footer>, <nav>, <section>, <article>, <aside> ? ? CSS ???? ???? HTML DOM ??? ???? Selector API ?? ¨C querySelector(), querySelectorAll(), getElementByClassName() ? ??? Form ?? ?? ¨C input type : email, number, range, calendar(date, time) ? ¨C autofocus, placeholder, pattern ? ?????? ??? ???? ??? ? ? ???? ????? ?? ?? ¨C <video>, <audio> ¨C <canvas> ? ??? HTML5 JavaScript API ?? ¨C Canvas, Video/Audio ?? API ¨C Web Storage, Application Cache, database, Communication, Geolocation API ? ? HTML5? ??? CSS3? ????? ¨C CSS3? Animation, transition, transform, Web Font? ??? ??? ????? jQuery()? ?? ? ? ?? ?? ? ??? ? ? ?????? ??? ??? ? ?? ??? ??? ?? ??? ? ?? ? ?? ???? ? ??? ??? ? ?? Rich? ??? ? ??? ? 7
- 8. www.javaspecialist.co.kr 5. HTML5 ?? ??? ? ??? text/html MIME ??? ??. ? ??? ???? *.html ?? *.htm ??? ??. ? DOCTYPE ??? ??? ?? ???? ??? ? ??. ¨C <!DOCTYPE HTML> ¨C HTML 4.01 ??? ??? ??? ?? ????. ? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ¨C XHTML 1.0 ??? ??? ??? ?? ????. ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? ?? ? ??? ??? ?? ??. ¨C ?? ?? 512 ??? ?? ?? meta ?? ? charset ??? ????. ?? UTF-8 ??? ?? ?? ? ??? ?? ?? ??. ¨C <META charset="UTF-8"> ¨C ??? ??? ??? ??? ?? ????. ? <META http-equiv="Content-Type" content="text/html;charset=UTF-8"> ? ?) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>¡ ??? ?? http://www.w3schools.com/tags/tag_doctype.asp 8
- 9. www.javaspecialist.co.kr 6. HTML5? ??? ??(???? ??) (1/2) ? HTML5?? ??? HTML4.01?? ??? ?? ?? ???? ??????. ¨C CSS? ??? ? ?? ?? ¨C ??? ?? ?? ¨C ?? ???? ??? ?? ? HTML5 ??? ???? ?? ???? ???? ? ??? ????? ???. ????? ??? ???? ????. ?? ?? ???? basefont ?? ?? ?? CSS? ?? ?? big ??? ???? ?? ? blink ???? ?? ?? center ??? ??? ?? font ?? ?? marquee ??? ??? ?? s ??? spacer ???? ?? strike ??? tt ?? ? ?? ?? u ???? ??? ?? bgsound ???? ?? audio ??? ?? ?? 9
- 10. www.javaspecialist.co.kr 6. HTML5? ??? ??(???? ??) (2/2) ?? ?? ???? applet ?? ??? ?? embed/object ?? ?? acronym ??? ???? ?? abbr ?? ?? dir ???? ??? ?? ul ?? ?? frame ??? iframe? CSS? ????? ????? ? ?? ???? ?? frameset ??? ? noframe ???? ???? ?? ????? ?? ? ?? isindex ??? ???? ??? ??? form? ??? ?? ??? ?? listing ??? ??? ?? pre ??? code?? ?? xmp ??? ??? ?? noembed embed? ??? ? ?? ?? ?? ?? ??? ????? object ?? ?? plaintext ??? ??? ?? MIME ?? "text/html"? ?? rb ?? ?????? ?? ?? ?? ???? ruby?? ?? ?? ?? 10
- 11. www.javaspecialist.co.kr 7. HTML5? ??? ?? ? HTML5? ??? ? ???? ??? ????. ?? HTML4 HTML5 href??? ?? a name ??? ???? ??? ?? ?? ?? placeholder ?? address ??? ??? ???? ?? ?? ?? ??? ??? ?? ??? ??? ??? ? ?? ????? ???? ??? ??? b ?? ??? ??? ????? ?? ??? ???? ?? ??? ??? ?? hr ?? ??? ?? i ???? ???? ??? ?? ???? ???? ?? ? ?? ?? ????? ?? ?? ? ??? ?? ????? ??? ? ?? ??? ?? ? ?? label ? ???? ?? ?? ???, ????? ??? ?? ? ???? ?? ?? menu ??? ???? ???? ??? ???? ??? ?? ?? ? ? ????? ??? ?? strong ??, em? ?? ???? ???? ??? ??? small ?? ??? ??? ??? ???? ?? ?? ?? ??? ?? ?? ??? ??? 11
- 12. www.javaspecialist.co.kr ? ??? div ??? ?? ????? ? HTML5??? ??? HTML4 ?? ??? ? ??? ????. ? ??, ?? ??? ???? header, footer, nav, section ?? ???? ???? ??? ? ? ?. 8. HTML5 ??? ?? (1/3) <header> <nav> <footer> <section id="content"> <article> <article> <article> <div id="header"> <div id = "sidebar" > <div id="footer"> <div id="content"> <div class="post"> <div class="post"> <div class="post">
- 13. www.javaspecialist.co.kr 8. HTML5 ??? ?? (2/3) ? <header> ¨C header ??? ?? ???? ????? ?? ???? ?? ?? ? ¨C 1? ?? ?? ??, ?? ???? ?? ???(header) ??? ???? ¨C ??? ??(h1~j6), ? ??? ??, ??? ??, ??? ?? ?? ? ?? ??? ?? ? ?? ? <footer> ¨C ???? ?? ???(footer) ??? ?? ¨C footer ??? ?? ?? ? ?? ??? ??? ?? ??? ?? ??? ?? ??? 1? ?? ??? ? ?? ¨C footer ???? ????? ?? ?????? ?? ??, ?? ?? ??? ??, ??? ??? ?? ?? ¨C footer ?? ?? small ??? footer ?? ?? ??? ?? ??, ??? ?? ??, ?? ??, ?? ??? ??? ???? ?? ????, ??? ?? ?? ?? ???? ?? ??? ?? ???? ?? ? <nav> ¨C ????? ???? ?? ? ?? ¨C ?????? ??? ?? ??? ? ?? ?? ?? ??? ??? ?? ????? ?? ? ? ?? ?? ¨C ? ???? ?? ????? ??? ?? ¨C ? ?? ?? ??? ?? ? ?? ?? ?? ? ?? ¨C ??? ??? ???? ? nav ??? ??? ??? ?? 13
- 14. www.javaspecialist.co.kr 8. HTML5 ??? ?? (3/3) ? <section> ¨C ???? ??? ?? ?? ??? ??? ?? ¨C section? ?? ?? article? ??? ? ?? ¨C ???? ??? ??(section)?? ?? ??? ?? ???? ??(article)? ???? section? article? ??? ?? ¨C section? article? ????? ?? ?? ?? ¨C section? ??? ?? ??? ?? ??? ????? ??? ?? ???? ??? ?? ? ¨C article? ???? ? ??? ??? ?? ???? ?? ? <article> ¨C article ??? ??, ???, ??????, ??? ?? ???? ????? ??? ? ? ? ????? ??? ????? ????? ?? ?? ¨C article ??? ??? ? ?? ??? ??? ?? ? <aside> ¨C aside? ?? ?? ?? ??? ????? ???? ?? ???. ?? ?? ??? ??, ????, ??? ? ¨C ??? ??? ?? ???? ???? ¨C ??? ?? ???? ????? ??? ?? ?? ?? ¨C ?? ???? ??? ????? ???? ??? 14
- 15. www.javaspecialist.co.kr 8. HTML5 ??? ?? - (HTML5/structured_elements.html) 15
- 16. www.javaspecialist.co.kr 9. ??? ? ?? ?? 16 ?? ?? mark ? ???? ???? ?? ??? ?? ruby/rt/rp ??? ?? ?? ???? ??? ?? time ??? ??? ?? command ???? ??? ? ?? ??, menu ?? ??? ?? ???? ?? figure ???? ???? ????? ?? details ???? ??? ?? ??? ? ?? ?? ?? datalist input ?? ?????, ?? ??? ?? ??? ??, ???? ?? ??
- 17. www.javaspecialist.co.kr ? <mark> ¨C mark ??? ???? ????? ?? ??? ??? ???? ?? <p>???? <mark>????? ?? ???? ? ?? ??</mark>?? ??? ????.</p> ? <ruby> ¨C ?? ???? ??? ? <p> ?? <ruby> ´ó<rt>?</rt> ín<rt>?</rt> Ãñ<rt>?</rt> ‡ø<rt>?</rt> </ruby> ? <ruby>ÔSßM¾©<rt>???</rt></ruby>???. </p> ? <time> ¨C time ??? ??? ??? ??? ??? ? ? ? ???? ??? ??? ??? ??? ? ? ? ?? <time datetime=2012-03-23>2012? 3? 23? </time> <p><time datetime=2012-03-23 pubdate>2012? 3? 23?</time>?????????</p> ? <detail> ¨C details ??? ??? ???? ??? ??? ?? ¨C ?? 17??? ?? <details open> <summary>???... <progress max="100" value="15">15%</progress> </summary> <dl> <dt>?? ??? : </dt><dd>867Kb/s</dd> <dt>?? ?? : </dt><dd>00:12:19</dd> </dl> </details> 9. ??? ? ?? ?? (HTML5/new_elements.html)
- 18. www.javaspecialist.co.kr ? <figure> ¨C img ??? ????, <figcaption> ??? ?? ?? ??? ??? ??? <figure> <img src=/slideshow/22-html5/53043781/"canvas/the_scream.jpg"> <figcaption>??? ??</figcaption> </figure> ? <datalist> ¨C ?? ??? ??? ??? ??? ? ¨C ??? ??? ?? <label>?? ?? <input list="cities"></label> <datalist id="cities"> <label>choose one <select> <option value="Paris">Paris</option> <option value="London">London</option> <option value="Berlin">Berlin</option> <option value="New York">New York</option> <option value="Tokyo">Tokyo</option> <option value="Sydney">Sydney</option> <option value="Johannesburg">Johannesburg</option> </select> </label> </datalist> 9. ??? ? ?? ?? (HTML5/new_elements.html) ?? ??? N ? ???? N ?? ???? ???? ?? ??.
- 19. www.javaspecialist.co.kr 10. HTML5? ??? ??? ?? (HTML5/global_attr/) ? ??? ??? ?? HTML ??? ??? ? ??. ¨C contenteditable ? ??? ?? ??? ???? ?????. ? <element contenteditable="true|false|inherit"> ¨C draggable ? ??? ??? ????? ??? ??. ? <element draggable="true|false|auto"> ¨C hidden ? ??? ?? ??? ??? ? <element hidden> ¨C data-* ??(??? ??? ??) ? non-visible ???? ??? ? ????. ? data-* ??? ???? ??? ? ??. ? ??? ???? ? ???? ???? ??? ?? ????. ? ??? ??? ?? ?? HTML DOM ??? dataset ???? ?? ??? ? ??. ? ??? ?????, ??? ??? ???? ??, ???? ?? ?? ?? ??? ? ??. ? ??? ???? ?? ??? HTML Global ???? ?? ??? ????. ¨C http://www.w3schools.com/tags/ref_standardattributes.asp ??? ??? ??? ???? ?? ?? ? ?? data-? ??? ? ?? ???? ??? ????. ??? ??? ?? ??? ??? ?? getAttributeNode("??? ").value? ?? ????? ??? ? ??. 19
- 20. www.javaspecialist.co.kr 11. form ?? ? ? ???? ??? ??(text field), ??? ??(text area), ??-?? ??(drop-down menu), ? ????(radio button), ????(checkbox) ?? ??? ???? ??? ??? ? ?? ? ? <form>??? action? method?? ??? ??? ?? ? action ?? ¨C ???? ??? ?? ? ? ?? ??? ??? ? ???? ????? ??? ???? ?? ?? ????? URL ?? ?? ?. ? method ?? ¨C ???? ???? ??? ???? ?, ?? ?? get?? post??? ?? ?? ?. ? post : post??? ???? ???? ?????? ?? ??, ???? ???? ???? ??? ?? ??? ??? ???? ??? ??? ????? ?? ??. post??? ?? ?? ??? ???? ??? ?? ??. ? get : get??? ???? ??? ???? ??? ???? ???? ?? ? ??? html5 ? autocomplete ??? novalidate ??? ???????. ¨C autocomplete="on|off" ? ?? ????? ??? ? ??. ¨C novalidate ?? ??? ?? ??? ???? ???? ?? ? ? ??. ? ?) ¨C <form action="process.jsp" method="post" autocomplete="on" novalidate> ¨C First name:<input type="text" name="fname"><br> ¨C Last name: <input type="text" name="lname"><br> ¨C E-mail: <input type="email" name="email" autocomplete="off"><br> ¨C </form> 20
- 21. www.javaspecialist.co.kr 12. input ?? ? ? ?? ? ??? ????? "??? ??"?? ???. input ??? ??? ??? ??? ?? ? ??, type ??? ?? ?? ?? ?? ?? ???? ??? ? ??? ? ? ?? ?? ???? type ??? ?? text? password ¨C text? ???? ??? ???? ? ??? ??? ? ? ?? ¨C type ??? ?? password? ??? ?? ?? ? ??? ?? *? ?? ? ¨C type ?? ??? input ??? ???? name, value, size, maxlength, checked ?? ??? ¨C HTML5 ?? input ??? type ??? ?? ???? ??. ¨C ?? ??? input ??? ??? ???? HTML5 ? ?? ?????. ? HTML5 ? ??? input ??? ??? ?? ¨C autocomplete : on ?? off ? ???? ??? ??? ? ??. ¨C autofocus : ???? ??? ? autofocus ??? ??? ??? ???? ???? ???? ? ?. ¨C form : input??? form ?? ?? ?? ??? ? ??? ??. ?? form ??? id ??? ?? ????. ¨C height, width : type ??? image? ?? ???? ??? ??? ????. ¨C list : ??? ??? ???? datalist? ????. ?? datalist ?? id? ?? ????. ¨C min, max : ???? ?? ???? ???? ????. number, range, date ?? ????. ¨C step : ???? ?? ??? ????. ¨C multiple : select ?? ??? ?? ? ??? ????? ??. ¨C pattern : ?? ???? ???? ?? ?? ??? ??? ? ??. ¨C placeholder : ?? ??? ?? ???? ????? ??? ??? ??. ¨C required : ??? ?? ????? ??. ? ??? ? ??? http://www.w3schools.com/html/html5_form_attributes.asp ? ????. 21
- 22. www.javaspecialist.co.kr 13. HTML5? ??? input ??? ?? (1/4) ? autocomplete ¨C on ?? off ? ???? ??? ??? ? ??. ¨C ?) ? E-mail: <input type="email" name="email" autocomplete="off"> ? autofocus ¨C ???? ??? ? autofocus ??? ??? ??? ???? ???? ???? ??. ¨C ?) ? First name:<input type="text" name="fname" autofocus> ? form ¨C input??? form ?? ?? ?? ??? ? ??? ??. ?? form ??? id ??? ?? ????. ¨C ?) ? <form action="demo_form.asp" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> ? height, width ¨C type ??? image? ?? ???? ??? ??? ????. ¨C ?) ? <input type="image" src=/slideshow/22-html5/53043781/"img_submit.gif" alt="Submit" width="48" height="48"> 22
- 23. www.javaspecialist.co.kr 13. HTML5? ??? input ??? ?? (2/4) ? list ¨C ??? ??? ???? datalist? ????. ?? datalist ?? id? ?? ????. ¨C ?) ? <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> ? min, max ¨C ???? ?? ???? ???? ????. number, range, date ?? ????. ¨C ?) ? Enter a date before 1980-01-01: < input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: < input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): < input type="number" name="quantity" min="1" max="5"> datalist ??? HTML5? ?? ? ?? ?? ? ?? ?? ? ? ? ????. 23
- 24. www.javaspecialist.co.kr 13. HTML5? ??? input ??? ?? (3/4) ? step ¨C ???? ?? ??? ????. ¨C ?) ? <input type="number" name="points" step="3"> ? multiple ¨C type ??? file? ?? ??? ?? ? ??? ? ??? ??. ¨C ?) ? Select images: <input type="file" name="img" multiple> ¨C select ?? ??? ?? ? ??? ????? ??. ¨C ?) ? <select multiple> <option>?? 1 <option>?? 2 ? </select> ? placeholder ¨C ?? ??? ?? ???? ????? ??? ??? ??. ¨C ?) ? <input type="text" name="fname" placeholder="First name"> ? required ¨C ??? ?? ????? ??. ¨C ?) ? Username: <input type="text" name="usrname" required> 24
- 25. www.javaspecialist.co.kr 13. HTML5? ??? input ??? ?? (4/4) ? pattern ¨C ?? ???? ???? ?? ?? ??? ??? ? ??. ¨C ???? : "|" ??? ?? ? ??? ??? ??. ? "abc|adc"? abc?? ???? adc?? ???? ?? ??. ¨C ???? : "("? ")"? ?? ?? ??? ?? ? ?? ? "abc|adc"? "a(b|d)c"? ?? ??? ??. ¨C ???? : ?? ?? ?? ??? ??? ???. ? "*" : 0? ??, "a*b"? "b", "ab", "aab", "aaab"? ??. ? "+" : 1? ??, "a+b"? "ab", "aab", "aaab"? ????? "b"? ???? ??. ? "?" : 0??? 1?, "a?b"? "b", "ab"? ???. ? "{m,n}" : m? ?? n? ??, "a{1,3}b"? "ab", "aab", "aaab"? ?????, "b"? "aaaab"? ??? ?. ¨C "fa|mo|b?o)ther"? "father", "mother", "bother", "other"? ??? ¨C ????? ???? ??? ? "[]" : "["? "]" ??? ?? ? ??? ??, "|"? ??? ? ?? ?? ?? ¨C "[abc]d"? ad, bd, cd? ??. ¨C "-"??? ?? ?? ??? ??? ??? ? ??. "[a-z]"? a?? z?? ? ??, "[1-9]"? 1?? 9?? ?? ??? ??. ? "[^]" : "[^"? "]" ??? ??? ??? ??? ??? ?? ¨C "[abc]d"? ad, bd, cd? ???? ?? ed, fd ? ??. "[^a-z]? ??? ???? ???? ?? ? ? ??? ??? ? "^", "$" : ?? ???? ??? ?? ??? ¨C ?) ? Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" >25
- 26. www.javaspecialist.co.kr 14. input ??? type ?? ? (1/3) ? type ??? ?? ?? ??? ??? ?? ?? ???? ???? ?? ? text, password, checkbox, radio, submit, reset, upload ??? ?? HTML5 ? ?? ??? ??? ?? ? HTML5? type ??? ??? email, url, number, range, Date Picker(date, month, week, time, datetime, datetime-local), search, color, tel ?? ?????. ¨C email : <input type="email" name="user_email"> ¨C url : <input type="url" name="user_url"> ¨C number : <input type="number" name="points" min="1" max="10"> ¨C range : <input type="range" name="points" min="1" max="10"> ¨C Date pickers (date, month, week, time, datetime, datetime-local) : ? Date: <input type="date" name="user_date"> ? Month: <input type="month" name="user_month"> ? Week: <input type="week" name="user_week"> ? Date and time: <input type="datetime" name="user_datetime"> ? Date and time: <input type="datetime-local" name="user_local"> ¨C search ? <input type="search" placeholder="Search..."> ¨C color ? <input type="color" name="user_color"> ¨C tel ? <input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$"> 26
- 27. www.javaspecialist.co.kr 14. Input ??? type ?? ? (2/3) ? Input Type - email ¨C ??? ??? ???? ?? ?? ??? ????. ¨C ???? ??? ??? ???? ??? ??. ¨C ?) ? E-mail: <input type="email" name="user_email" /> ? Input Type - url ¨C URL??? ???? ?? ?? ??? ????. ¨C ??? ??? URL ??? ??? ??? ??. ¨C ?) ? Homepage: <input type="url" name="user_url" /> ? Input Type - number ¨C ??? ???? ?? ????? ?? ? ????. ¨C ???? ??? ??? ??? ? ??. ¨C ?) ? Points: <input type="number" name="points" min="1" max="10" /> ? Input Type - range ¨C ???? ? ???? ????, ??? ??? ? ??? ??. ¨C ?????? ?? ???? ??? ??? ??? ? ??. ¨C ??? ??? ????? ???? ??? ??? ? ??. ¨C max, min, step, value ??? ??? ?? ? ??. ¨C ?) ? <input type="range" name="points" min="1" max="10" /> ?????? ? ??? ??? ? ???? ?? ? ?? ??? ?? ?. 27
- 28. www.javaspecialist.co.kr 14. Input ??? type ?? ? (3/3) ? Input Type - Date Pickers ¨C HTML5?? ??? ??? ???? ? ? ?? ??? ???? ????. ? date - Selects date, month and year ? month - Selects month and year ? week - Selects week and year ? time - Selects time (hour and minute) ? datetime - Selects time, date, month and year (UTC time) ? datetime-local - Selects time, date, month and year (local time) ¨C ?) ? Date: <input type="date" name="user_date" /> ? Input Type - search ¨C Site search ?? Google search ?? ?? ??? ?? ????. ¨C ? ??? ??? ??? ??? ???? ????. ¨C ????? x-webkit-speech ??? ???? ????? ????. ¨C ?) ? <input type="search" placeholder="Search..." x-webkit-speech/> ? Input Type - color ¨C ?? ?? ??? ? ??? ???. ¨C ????? ?? Color Picker? ??? ??? ??. ¨C ?) ? Color: <input type="color" name="user_color" /> 28
- 29. www.javaspecialist.co.kr 15. HTML5? ??? ? ?? ? datalist ¨C datalist ??? ??? ??? ????. datalist id ??? ?? input ??? list ???? ????. ¨C ?) ? Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> ? keygen ¨C <keygen> ??? ??? ??? ???? ???? ??. ¨C <keygen> ??? key-pair generator??. ?? submit? ?, ? ?? ?? ????? ??? private? ?? ?? ??? public? ??. ¨C private?? ?????? ????, public?? ??? ????. public ?? ?? ??? ???? ? ? ????? ???? ???? ??? ? ??. ¨C ?) ? <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> ? output ¨C output ??? ??? ?? ?? ???? ?? ?? ??? ????. ?? ? ??? ?? ?? ????? ? ?? ?? ???? ? ?? ???? ? ?. 29
- 30. www.javaspecialist.co.kr Lab - HTML5 ? ?? ???? (HTML5/form/input_properties.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>input ???? ?? ?</title> 6. <style> 7. [required] { 8. border-color: #00F; 9. -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5); 10.} 11.:invalid { 12. border-color: #F00; 13. -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8); 14.} 15.</style> 16.</head> 17.<body> 18.<form action="#" id="input_form" method="post"> 19.<input type="text" required placeholder="??? ?????." /><br /> 20.<input type="email" placeholder="some@email.com" /><br /> 21.<input type="date" min="2010-08-14" max="2013-12-31" placeholder="2010-08-14"/><br /> 22.<input type="range" min="0" max="50" value="10" /><br /> 23.<input type="search" placeholder="Search..." x-webkit-speech/><br /> 24.<input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$" /><br /> 25.<input type="color" placeholder="?) #bbbbbb" /><br /> 26.<input type="number" step="1" min="-5" max="10" value="0" /> <br /> 27.<select multiple> 28. <option>?? 1 29. <option>?? 2 30. <option>?? 3 31.</select><br> 32.<input type="radio" name="data" multiple />a <input type="radio" name="data" multiple />b <br /> 33.<input type="submit" value=" ?? "/> 34.<input type="reset" value=" ?? "/> 35.</form> 36.</body> 37.</html> ???? ?? ?? ??? ??? ?? ???? ??? ????? ??? ?? ?? ??? ????? ?? ?? ??. 30
Editor's Notes
- #3: ?? HTML? 1990?? ? ??? ?? ??? ??? ??? ??? ????. ?? ??? ????? ?????? ? ???? ?????? ????? ????? ??. ?? ??? ?? ??? ?? ???? ??? ????? ????? ??? ?? ????? ?? ???? ?? ??? ??. HTML 4? 1997?? W3C? ?? ???? ?????. ?? HTML ?? ??? ?? ?? ???? ??? ???????? ??? ? ?? ???? ???? ?? ??? ?? ???? ?? ??? ??? ?? ??? ??? ??? ? ?????. ??? ?? ??? ?? ??? HTML 4? XML? ???? XHTML1? HTML? XHTML? ?? ?????? ?? API? DOM ??2 ?? ????????. HTML 5? ??? ??? ?? ???? ????? ??. [HTML 4] [XHTML1] [DOM2HTML] HTML 5 ??? 2004?? ???? ??? HTML ?? ??? ? ?? HTML ??? ?? ?? ??? ???? ?? ??? ?? ??. ??? HTML ? XML ???? ??? HTML 5? ??? ?? ?? ?? ?? ??? ?? ???? ?? ?? ?? ??? ?? ??? ?? ?? ? ???????? ???? ?? ??? ?? ??? ? API ??
- #6: HTML 5.1 2012 Q4 FPWD 2014 Q3 LC 2015 Q1 CR 2016 Q4 Rec