Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Learn svg
Learn svg
Loading in …3
×
1 of 15

Html5 new input attributes (@nzin4x)

0

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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]([-.]*[0-9a-zA-Z])*@([0-9a-zA-Z][-]*[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>

×