HTML5新增標籤（二）

table新增

table新增如下標籤

<table summary="財務表格" border="1"><!--summary讓瀏覽器識別-->

    <caption>財務表格</caption>

    <colgroup>

        <col width="*"><!--*自動平均分配-->

        <col width="*">

        <col width="*">

        <col width="*">

    </colgroup>

    <tr>

        <th>1</th>

        <th>2</th>

        <th>3</th>

        <th>4</th>

    </tr>

    <tr>

        <td>01</td>

        <td>02</td>

        <td>03</td>

        <td>04</td>

    </tr>

</table>

表單新增

表單新增如下標籤

姓名：<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="6" placeholder="請輸入姓名">

<!-- required必填項   disabled禁用項    pattern正則驗證  maxlength最大長度 -->

年齡：<input type="number" max="18" min="12" step="2" >

闕值：<input type="range" id="range"  max="200" min="100" step="10" >

<!--max爲最大年齡    min爲最小年齡  step表示以step值進行遞增-->

電話號碼：<input type="tel" /> <!-- 在移動端會調用9宮格的數字鍵盤 -->

<!-- 只能輸入數字類型 在移動端會調用9宮格的數字鍵盤 -->

網址：<input type="url"> <!-- 校驗網址 -->

Email: <input type="email"><!-- 校驗郵箱 -->

顏色：<input type="color" > <!-- 拾色器 -->    

日曆1：<input type="date">    

月曆1：<input type="month">    

周曆1：<input type="week">    

小時歷1：<input type="time">    

日曆2：<input type="datetime-local"> <!-- UTC時間 -->    

<progress value="50" max="100"></progress>

<button type="submit"> 提交 </button>

 

帶輸入功能的下拉

<input type="text" list="name" /><!--list名須與 datalist id名一致-->

<datalist id="name">

    <option value="程序猿" />

    <option value="產品狗" />

</datalist>