跟KingDZ學HTML5之十一：表單新元素
編輯：HTML5詳解
新的課程又開始，哈哈，最近的文章更新比較快，希望大家跟上俺的步伐啊，呵呵，但是每當看到閱讀量，哎，還真不多，可是俺還要堅持寫下去，不知道，大家是不是都沒有在研究Html5呢？
這節課程，講的是 From 表單 新增加的幾個新的元素，他和前面的兩節課程 同屬於一個范圍，只不過長的比較特殊。所以就提煉出來了。
旁白：俺不是前端工程師啊，學習Html5完全是因為，哈哈，這個東西太酷了。俺是正宗滴NET程序員
好了第一個出現的新元素是 datalist 哈哈，這個好解釋了，前面我們已經使用過了。
還是用一個例子說明吧
- <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 元素
目前這個元素，我們還沒發現那個浏覽器支持。希望大家測試成功了沒告訴我一下
給大家一段代碼，大家，研究一下吧。
XML/Html Code復制內容到剪貼板- <!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>
主要注意下面的用法。
XML/Html Code復制內容到剪貼板- <output name="result" for="num1 num2"></output>
下面的這種用法，就是常見的用法了，大家主要記住下面的用法就可以了
XML/Html Code復制內容到剪貼板- <!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>
具體的效果我就不深究了，浏覽器太不給面子了，竟然不支持。
好了，這節課，在我的郁悶聲中~~~~~~~~~~~結束了，大家慢慢的熟悉一下上面的代碼，就可以了解 這兩個標簽的用法了
小編推薦
熱門推薦