HTML5新特性之多媒體和表單新元素及屬性

多媒體標籤video和audio

video合audio需要配合source標籤來對各種瀏覽器進行兼容，常用屬性有：

• controls：顯示控制欄(如播放、聲音、暫停等鍵)
• autoplay： 自動播放(不過瀏覽器爲了用戶體驗，該屬性一般設置無效；如果想要設置有效，需要再設置一個屬性muted, 表示關閉聲音，才能自動播放)
• loop：循環播放

測試代碼：

<video width="300" height="150" controls autoplay loop>
    <source src="../img/file/jia.mp4"/>
    <source src="../img/file/jia.ogg"/>
    <source src="../img/file/jia.WebM"/>
</video>
<audio controls loop>
    <source src="../img/file/Friendships.ogg" />
    <source src="../img/file/Friendships.mp3" />
    <source src="../img/file/Friendships.wav" />
</audio>

效果圖：

表單新元素及屬性

表單新元素

input標籤新增加的類型有：

• email：只能輸入郵箱
• url：只能輸入網址
• number：只能輸入數字
• range：滑動範圍
• color：取色器
• date：輸入年月日
• month：輸入年月
• week：輸入年周
• time：輸入小時和分種

測試代碼：

<form action="serve.php" id="form-ele" method="get">
    <input type="email" placeholder="請輸入郵箱" name="name-email"/>
    <input type="url" placeholder="請輸入網址" name="name-url"/>
    <input type="number" placeholder="請輸入數字" name="name-number"/><br/>
    <input type="range"/><br/>
    <input type="color"/><br/>
    <input type="date" /><input type="month" /><input type="week"/><input type="time"/><br/>
    <input type="submit" value="提交"/>
</form>

效果圖：

表單form標籤專有屬性autocomplete和novalidate

• autocomplete=on | off ：自動完成。默認就有，就是文本框雙擊後，會出現之前輸入過的內容。如不需要這個效果，請設置autocomplete=“off”
• novalidate=true | false ：是否關閉表單元素的校驗。設置爲true後，則比如type="email"或有設置required等必填屬性的標籤提交表單時都不會進行校驗

其他表單標籤新屬性

• autofocus：自動獲取焦點
• form：form表單提交時，一般只會把form標籤內有name屬性的標籤值提交到服務端。如果form表單外的標籤也想提交到服務端，則可以設置“form"屬性指向表單的id即可。測試代碼見下
• list：文本框從列表中選擇一條數據，測試代碼見下面
• multiple：select標籤使用，表示下拉列表可以多選
• placeholder：佔位提示信息
• required：設置後，表示該標籤必填，測試代碼見下面

測試代碼：

<form action="serve.php" id="form-ele" autocomplete="off" method="get">
    <input type="submit" value="提交"/>
    <input type="text" autofocus placeholder="自動獲取焦點"/><br/>
    <input type="text" list="list-ele" placeholder="請從列表中選擇"/>
    <datalist id="list-ele">
        <option value="1111"></option>
        <option value="2222"></option>
        <option value="3333"></option>
    </datalist>
    <br/>
    <select multiple name="name-select">
        <option value="1">惜秦皇漢武，略輸文采；</option>
        <option value="2">唐宗宋祖，稍遜風騷；</option>
        <option value="3">一代天驕，成吉思汗，只識彎弓射大雕；</option>
        <option value="4">俱往矣，數風流人物，還看今朝。</option>
    </select>
    <input type="text" required="required" placeholder="屬性required必填項" name="name-required"/>
</form>
<input type="text" form="form-ele" name="input-name-2" placeholder="表單外元素提交的內容也跟着表單走"/>