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

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

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

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

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

还是用一个例子说明吧

1

 <input type="text" name="favfruit" list="fruits">
         <datalist id="fruits">
         <option value="apple" label="苹果">
         <option value="pine" label="菠萝">
         <option value="tangerine" label="橘子">
         </datalist>

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

第二个是

output 元素

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

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

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
    function add() {
        var o = document.getElementById("result");
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        o.value = parseFloat(num1.value) + parseFloat(num2.value);
    }
 </script>
<head>
<body>
<input name="num1" type="number" /> +
<input name="num2" type="number" /> =
<output name="result" for="num1 num2"></output>
<button onclick="add()">相加</button>
</body>
</html>
主要注意下面的用法。

<output name="result" for="num1 num2"></output>

 

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

<!DOCTYPE HTML>
<html>
<body>
<form action="" id="numform">
<input name="numa" type="number"> +
<input name="numb" type="number"> =
</form>
<output name="result" form="numform" onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output>
</body>
</html>

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

 

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

 

BYE  BYE

posted @ 2011-08-25 11:31  KingDZ  阅读(821)  评论(2)  编辑  收藏  举报