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