HTML5入门

跟KingDZ学HTML5之十一：表单新元素

字号+ 作者： 来源： 2014-11-16 20:49 我要评论( )

新的课程又开始，哈哈，最近的文章更新比较快，希望大家跟上俺的步伐啊，呵呵，但是每当看到阅读量，哎，还真不多，可是俺还要坚持写下去，不知道，大家是不是都没有在研究

 新的课程又开始，哈哈，最近的文章更新比较快，希望大家跟上俺的步伐啊，呵呵，但是每当看到阅读量，哎，还真不多，可是俺还要坚持写下去，不知道，大家是不是都没有在研究HTML5呢？

这节课程，讲的是 From 表单 新增加的几个新的元素，他和前面的两节课程 同属于一个范围，只不过长的比较特殊。所以就提炼出来了。

旁白：俺不是前端工程师啊，学习HTML5完全是因为，哈哈，这个东西太酷了。俺是正宗滴NET程序员眨眼

好了第一个出现的新元素是 datalist 哈哈，这个好解释了，前面我们已经使用过了。

还是用一个例子说明吧

1

XML/HTML Code复制内容到剪贴板
  1. <input type="text" name="favfruit" list="fruits">  
  2.          <datalist id="fruits">  
  3.          <option value="apple" label="苹果">  
  4.          <option value="pine" label="菠萝">  
  5.          <option value="tangerine" label="橘子">  
  6. </datalist>  

option 元素永远都要设置 value 属性。

第二个是

output 元素

目前这个元素，我们还没发现那个浏览器支持。希望大家测试成功了没告诉我一下

给大家一段代码，大家，研究一下吧。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <script type="text/javascript">  
  5.     function add() {  
  6.         var o = document.getElementById("result");  
  7.         var num1 = document.getElementById("num1");  
  8.         var num2 = document.getElementById("num2");  
  9.         o.value = parseFloat(num1.value) + parseFloat(num2.value);  
  10.     }  
  11.  </script>  
  12. <head>  
  13. <body>  
  14. <input name="num1" type="number" /> +  
  15. <input name="num2" type="number" /> =  
  16. <output name="result" for="num1 num2"></output>  
  17. <button onclick="add()">相加</button>  
  18. </body>  
  19. </html>  

主要注意下面的用法。

XML/HTML Code复制内容到剪贴板
  1. <output name="result" for="num1 num2"></output>  

下面的这种用法，就是常见的用法了，大家主要记住下面的用法就可以了

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <form action="" id="numform">  
  5. <input name="numa" type="number"> +  
  6. <input name="numb" type="number"> =  
  7. </form>  
  8. <output name="result" form="numform" onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output>  
  9. </body>  
  10. </html>  

具体的效果我就不深究了，浏览器太不给面子了，竟然不支持。

好了，这节课，在我的郁闷声中~~~~~~~~~~~结束了，大家慢慢的熟悉一下上面的代码，就可以了解  这两个标签的用法了

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 盘点HTML5标签使用的常见误区

    盘点HTML5标签使用的常见误区

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十三：HTML5颜色选择器

    跟KingDZ学HTML5之十三：HTML5颜色选择器

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十二：Form表单元素新增属性

    跟KingDZ学HTML5之十二：Form表单元素新增属性

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十：新的input类型2

    跟KingDZ学HTML5之十：新的input类型2

    2014-11-16 20:49

网友点评
精彩导读
小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（11）——链接，图片，表格，框架

小强的HTML5移动开发之路（11）——链接，图

小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几

小强的HTML5移动开发之路（40）——jqMobi中

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

小强的HTML5移动开发之路（35）——jQuery中

小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似

小强的HTML5移动开发之路（41）——jqMobi中S

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案：鲁ICP备17035125号-2
HTML5入门 HTML5技术 canvas教程 专题学习 齐博CMS教程