15
전전전 @nzin4x

Html5 new input attributes (@nzin4x)

  • Upload
    -

  • View
    1.216

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Html5 new input attributes (@nzin4x)

전승호 @nzin4x

Page 2: Html5 new input attributes (@nzin4x)

autocomplete autofocus list multiple max, min, step pattern placeholder required

form form overrides

◦ form◦ formaction◦ formenctype◦ formmethod◦ formnovalidate◦ formtarget

Page 3: Html5 new input attributes (@nzin4x)

on off

If "on" browsers can store the form's input values, to auto-fill the form if the user returns to the page.

Page 4: Html5 new input attributes (@nzin4x)

autofocus=“autofocus”

Makes the input field focused on page load

Note: Cannot be used with type="hidden"

Page 5: Html5 new input attributes (@nzin4x)

list=“id of datalist” Reference to a datalist element. If defined, a suggestion list (drop down list?) should be displayed, with predefined opions

Page 6: Html5 new input attributes (@nzin4x)

<input type=email multiple name=cc list=contacts>

If present the user is allowed more than one value.

datalist 와 호환해서 추가 선택을 가능하게 해줌 .

Page 7: Html5 new input attributes (@nzin4x)

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

Page 8: Html5 new input attributes (@nzin4x)

placeholder=“[email protected]

Defines a hint to help users fill out the input field.

Page 9: Html5 new input attributes (@nzin4x)

<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

Page 10: Html5 new input attributes (@nzin4x)

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

Page 11: Html5 new input attributes (@nzin4x)

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

Page 12: Html5 new input attributes (@nzin4x)

<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 를 이용해서 해당 폼에 귀속된다 .

Page 13: Html5 new input attributes (@nzin4x)

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

Page 14: Html5 new input attributes (@nzin4x)

http://www.w3schools.com/html5/html5_form_attributes.asp

Page 15: Html5 new input attributes (@nzin4x)

HTML5 form Ref◦ http://www.w3schools.com/html5/html5_form_attributes.a

sp 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