전승호  @nzin4x
<ul><li>autocomplete </li></ul><ul><li>autofocus </li></ul><ul><li>list </li></ul><ul><li>multiple </li></ul><ul><li>max, ...
<ul><li>on </li></ul><ul><li>off </li></ul><ul><li>If &quot;on&quot; browsers can store the form's input values, to auto-f...
<ul><li>autofocus=“autofocus” </li></ul><ul><li>Makes the input field focused on page load </li></ul><ul><li>Note:  Cannot...
<ul><li>list=“id of datalist” </li></ul><ul><li>Reference to a datalist element. If defined, a suggestion list (drop down ...
<ul><li><input type=email multiple name=cc list=contacts> </li></ul><ul><li>If present the user is allowed more than one v...
<ul><li>max=“10” min=“0” step=“2” </li></ul><ul><li><input name=bday type=date max=&quot;1979-12-31&quot;> </li></ul><ul><...
<ul><li>placeholder=“jonathan@example.com” </li></ul><ul><li>Defines a hint to help users fill out the input field. </li><...
<ul><li><input name=“name” required> </li></ul><ul><li>Defines if the input field's value is required in order to submit t...
<ul><li><input name=“cardnumber” pattern=“[0-9]*”> </li></ul><ul><li>Defines a pattern or format for the input field's val...
<ul><li>pattern  attribute is specified and the attribute's value, when compiled as a JavaScript regular expression with t...
<ul><li>< form  action=&quot;demo_form.asp&quot; method=&quot;get&quot; id=&quot; user_form &quot;> First name:<input type...
<ul><li><form action=&quot;demo_form.asp&quot; method=&quot;get&quot; id=&quot;user_form&quot;> E-mail: <input type=&quot;...
http://www.w3schools.com/html5/html5_form_attributes.asp
<ul><li>HTML5 form Ref </li></ul><ul><ul><li>http://www.w3schools.com/html5/html5_form_attributes.asp </li></ul></ul><ul><...
Upcoming SlideShare
Loading in...5
×

Html5 new input attributes (@nzin4x)

1,258

Published on

HTML5 input tag 에 새로 추가된 attribute 에 대한 슬라이드입니다.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,258
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 new input attributes (@nzin4x)

  1. 1. 전승호 @nzin4x
  2. 2. <ul><li>autocomplete </li></ul><ul><li>autofocus </li></ul><ul><li>list </li></ul><ul><li>multiple </li></ul><ul><li>max, min, step </li></ul><ul><li>pattern </li></ul><ul><li>placeholder </li></ul><ul><li>required </li></ul><ul><li>form </li></ul><ul><li>form overrides </li></ul><ul><ul><li>form </li></ul></ul><ul><ul><li>formaction </li></ul></ul><ul><ul><li>formenctype </li></ul></ul><ul><ul><li>formmethod </li></ul></ul><ul><ul><li>formnovalidate </li></ul></ul><ul><ul><li>formtarget </li></ul></ul>
  3. 3. <ul><li>on </li></ul><ul><li>off </li></ul><ul><li>If &quot;on&quot; browsers can store the form's input values, to auto-fill the form if the user returns to the page. </li></ul>
  4. 4. <ul><li>autofocus=“autofocus” </li></ul><ul><li>Makes the input field focused on page load </li></ul><ul><li>Note: Cannot be used with type=&quot;hidden&quot; </li></ul>
  5. 5. <ul><li>list=“id of datalist” </li></ul><ul><li>Reference to a datalist element. If defined, a suggestion list (drop down list?) should be displayed, with predefined opions </li></ul>
  6. 6. <ul><li><input type=email multiple name=cc list=contacts> </li></ul><ul><li>If present the user is allowed more than one value. </li></ul><ul><li>datalist 와 호환해서 추가 선택을 가능하게 해줌 . </li></ul>
  7. 7. <ul><li>max=“10” min=“0” step=“2” </li></ul><ul><li><input name=bday type=date max=&quot;1979-12-31&quot;> </li></ul><ul><li>The input field's maximum / minimum value. </li></ul><ul><li>Allowed when type=date,datetime,datetime-local,month,week,time,number, or range </li></ul>
  8. 8. <ul><li>placeholder=“jonathan@example.com” </li></ul><ul><li>Defines a hint to help users fill out the input field. </li></ul>
  9. 9. <ul><li><input name=“name” required> </li></ul><ul><li>Defines if the input field's value is required in order to submit the form </li></ul><ul><li>Note: Cannot be used with type: hidden, image, button, submit, reset </li></ul>
  10. 10. <ul><li><input name=“cardnumber” pattern=“[0-9]*”> </li></ul><ul><li>Defines a pattern or format for the input field's value. Example: pattern=&quot;[0-9]&quot; means that the input value must be a number between 0 an 9. Use the standard &quot;title&quot; attribute to describe the pattern. </li></ul>
  11. 11. <ul><li>pattern attribute is specified and the attribute's value, when compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled </li></ul><ul><li>Example </li></ul><ul><ul><li>[0-9][A-Z]{3} : 숫자한자리와 3 자리의 대문자 </li></ul></ul><ul><ul><li>[-0-9]+: - 와 숫자로만 이루어진 문자 </li></ul></ul><ul><ul><li>([0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-w]*[0-9a-zA-Z].)+[a-zA-Z]{2,9}) : Email </li></ul></ul>
  12. 12. <ul><li>< form action=&quot;demo_form.asp&quot; method=&quot;get&quot; id=&quot; user_form &quot;> First name:<input type=&quot;text&quot; name=&quot;fname&quot; /> <input type=&quot;submit&quot; /> </form> Last name: <input type=&quot;text&quot; name=&quot;lname&quot; form =&quot;user_form&quot; /> </li></ul><ul><li>Defines one ore more forms the input field belongs to. </li></ul><ul><li>Last name 은 form tag 밖에 있지만 form attribute 를 이용해서 해당 폼에 귀속된다 . </li></ul>
  13. 13. <ul><li><form action=&quot;demo_form.asp&quot; method=&quot;get&quot; id=&quot;user_form&quot;> E-mail: <input type=&quot;email&quot; name=&quot;userid&quot; /><br /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> <br /> <input type=&quot;submit&quot; formaction=&quot;demo_admin.asp&quot; value=&quot;Submit as admin&quot; /> <br /> <input type=&quot;submit&quot; formnovalidate=&quot;true&quot; value=&quot;Submit without validation&quot; /> <br /> </form> </li></ul><ul><li>Overrides the form's * attribute. Must be a valid URL that defines where to send the data when the form is submitted. </li></ul>
  14. 14. http://www.w3schools.com/html5/html5_form_attributes.asp
  15. 15. <ul><li>HTML5 form Ref </li></ul><ul><ul><li>http://www.w3schools.com/html5/html5_form_attributes.asp </li></ul></ul><ul><li>HTML5 input Ref </li></ul><ul><ul><li>http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html </li></ul></ul><ul><ul><li>http://www.w3schools.com/html5/tag_input.asp </li></ul></ul><ul><li>HTML5 input tester ( 브라우저 Tester) </li></ul><ul><ul><li>http://miketaylr.com/code/input-type-attr.html </li></ul></ul><ul><li>Pattern 이용한 가상 키보드와 보안 </li></ul><ul><ul><li>http://bit.ly/bdzqaD </li></ul></ul><ul><li>JavaScript 정규표현식 (RegExp, pattern attribute) </li></ul><ul><ul><li>http://www.w3schools.com/js/js_obj_regexp.asp </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×