HTML5新的表單元素你都用過嗎？

一·progress 進度條

代碼：

<progress></progress>

效果：

二 output

output用來定義不一樣類型的輸出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

三 meter 刻度條

展現給定的數據範圍

<meter value="20" min="0" max="100"></meter>20

效果展現：

四 datalist 下拉列表

datalist須要爲用到的input添加list 值等於datalist的ID

<input type="text" list="grade">
    <datalist id="grade">
        <option value="1" name="name" label="張三"></option>
        <option value="2" name="name" label="里斯"></option>
        <option value="3" name="name" label="長城"></option>
    </datalist>