HTML5 表单

17,431 views

Published on

about HTML5 Form,the web form 2.0 tech.

Published in: Technology
6 Comments
36 Likes
Statistics
Notes
  • 怎么不能下载呢??
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 不错哦
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 16页,HTML 5 表单:placeorder 打错了,placeholder..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
17,431
On SlideShare
0
From Embeds
0
Number of Embeds
8,092
Actions
Shares
0
Downloads
0
Comments
6
Likes
36
Embeds 0
No embeds

No notes for slide

HTML5 表单

  1. 1. HTML5 表单<br />为体验而生<br />BY 神飞<br />前端观察<br />http://www.qianduan.net<br />
  2. 2. HTML 3.2的表单<br />
  3. 3. HTML 4表单<br />新增Button元素<br />增加label元素<br />增加filedset和legend元素<br />新增optgroup元素<br />增加accesskey属性<br />增加disable属性<br />增加readonly属性<br />Input增加accept属性[type=file] (目前opera和firefox均不支持)<br />
  4. 4. HTML5<br />
  5. 5. HTML 5表单的表现:opera和opera mobile<br />
  6. 6. HTML 5表单的表现:webkit<br />
  7. 7. HTML 5表单:input:url<br /><input id="inputUrl" type="url" value=""<br />
  8. 8. HTML 5表单:input:email<br /><input id="inputEmail" type="email" value=""<br />
  9. 9. HTML 5表单:input:search<br /><input id="inputSearch" type="search" value=""<br />
  10. 10. HTML 5表单:input:tel<br /><input id="inputTel" type="tel" value=""<br />
  11. 11. HTML 5表单:input:number<br /><input id="inputNum" type="number" value=""<br />
  12. 12. HTML 5表单:input:range<br /><input id= " inputRange“ type="range" value=""<br />
  13. 13. HTML 5表单:input:max,min和step<br /><input id="inputNumber" type="number" value=""<br /><div><br /><label for="inputNumber">number step</label><br /><input id="inputNumber" type="number" step="5" max="100" name="number" /><br /></div><br /><div><br /><label for="inputRange">range</label><br /><input id="inputRange" type="range" name="range" max="100" min="0" step="10" /><br /></div><br />
  14. 14. HTML 5表单:时间<br /><input id="inputDate" type="date" value=""<br />
  15. 15. HTML 5表单:input:datelist<br /><input type=“text" name="datelist" list="dataList" /><br /><datalistid="dataList"><br /> <option value=“BMW"><br /> <option value=“Ford"><br /> <option value=“Volvo"><br /> <option value=“…"><br /></datalist><br />结构类似select<br />
  16. 16. HTML 5 表单:placeorder<br /><input type="text" id="s" name="s" onfocus="if (this.value == '请输入关键词...') {this.value = '';}" onblur="if (this.value == '') {this.value = '请输入关键词...';}" value="请输入关键词..." class="inputBox"><br />HTML 5 code:<br /><input type=“text" value="" name="" placeholder="请输入关键词..." /><br />设置placeholder的时候,value值必须为空<br />
  17. 17. HTML 5 表单:autofocus<br />HTML 5 code:<br /><input type=“text" value="" autofocus /><br />可以用于input、textarea、button和select等元素<br />
  18. 18. HTML 5 表单:正则<br /><input type=“text“ pattern=“d*”/><br /><input type=“text“ pattern=“d{4}”/><br />
  19. 19. HTML 5 表单:验证<br /><input type=“text“ required/><br />
  20. 20. HTML 5表单的浏览器兼容性:type<br />注:Firefox 4.0以下的完全不支持 Firefox 4.0即将支持url、Email、number、color等<br />数据整理自:http://www.findmebyip.com/litmus#html5-forms-inputs<br />
  21. 21. HTML 5表单的浏览器兼容性:属性<br />注:Firefox 4.0以下的只支持multiple熟悉(其实这个不是HTML 5中的) Firefox 4.0即将支持autocompleta、required和pattern等<br />数据整理自:http://www.findmebyip.com/litmus#html5-forms-attributes<br />
  22. 22. HTML 5表单:分裂的UI<br />Chrome<br />Opera<br />
  23. 23. HTML 5表单:appearance<br />http://www.w3.org/TR/css3-ui/#appearance<br />http://davidwalsh.name/webkit-appearance<br />https://developer.mozilla.org/en/CSS/-moz-appearance<br />
  24. 24. 参考<br />http://www.w3.org/TR/WD-html40-970708/interact/forms.html<br />http://www.w3.org/TR/REC-html32<br />http://www.w3.org/TR/html5/forms.html<br />http://diveintohtml5.org/forms.html<br />http://www.opera.com/docs/specs/presto25/forms/<br />

×