<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> <style> form { width: 670px; margin: 0 auto; } td { background-color: #ffffff; } td, input { font-size: 20px; } th { font-size: 26px; background-color: #22ccff; letter-spacing: 2px; } #sub { float: right; margin-left: 10px; position: relative; top: 50px; left: 0px; -webkit-transition: all 0.5s ease-in-out 0.0s; -moz-transition: all 0.5s ease-in-out 0.0s; -ms-transition: all 0.5s ease-in-out 0.0s; -o-transition: all 0.5s ease-in-out 0.0s; transition: all 0.5s ease-in-out 0.0s; } </style> </head> <body> <form target="_blank" action="URL"> <!-- 額外的提交按鈕 --> <input type="submit" value="提交" id="sub"/> <table bgcolor="#000" cellpadding="10" align="center"> <!-- 文本類 --> <tr> <th colspan="2">文本類</th> </tr> <tr> <td>text</td> <td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td> </tr> <tr> <td>url</td> <td> <input type="url" placeholder="attribute:placeholder" value="a:b"/> </td> </tr> <tr> <td>password</td> <td> <input type="password" maxlength="8" placeholder="請輸入密碼" autofocus required/> </td> </tr> <tr> <td>email</td> <td> <input type="email" value="1@2.3"/> </td> </tr> <tr> <td>tel</td> <td><input type="tel"></td> </tr> <tr> <td>search</td> <td><input type="search"/></td> </tr> <tr> <td colspan="2"> <p>“placeholder”：占位符；</p> <p>“autofocus”：焦點獲取；</p> <p>“required”；表單必填項；</p> <p>“pattern”；輸入規范，該值為一個正則表達式；</p> <p>在H5中，URL和email類型在提交表單時，會檢測是否符合格式。</p> </td> </tr> <!-- 文本類 end --> <!-- 操作類 --> <tr> <th colspan="2">操作類</th> </tr> <tr> <td>checkbox</td> <td> <label><input type="checkbox" name="ch_box"/>box_1</label> <label><input type="checkbox" name="ch_box"/>box_2</label> <label><input type="checkbox" name="ch_box"/>box_3</label> <input type="checkbox" id="ch_box4"/> <label for="ch_box4">box_4</label> </td> </tr> <tr> <td>radio</td> <td> <label><input type="radio" name="radio"/>ra_1</label> <label><input type="radio" name="radio"/>ra_2</label> <label><input type="radio" name="radio"/>ra_3</label> <label><input type="radio" name="radio"/>ra_4</label> </td> </tr> <tr> <td colspan="2"> label:<br/> 非跨度：<label><input></input></label><br/> 跨 度：<label for="input_id"></label><br/>     <input id="input_id"></input> </td> </tr> <tr> <td>file</td> <td> <input type="file" multiple="multiple"/> <p>multiple="multiple"：允許添加多個值；</p> <p>accept="MIME_type";指定上傳文件的類型；</p> <p>如：accept="image/jpg,image/gif"</p> <p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附錄表</a></p> </td> </tr> <tr> <td>number</td> <td><input type="number" max="100" min="90" step="2"/> <p>只允許輸入數字；"e":自然常數;</p></td> </tr> <tr> <td>range</td> <td> <input type="range" max="100" min="0" step="20"/> <p>“value”，默認為50，范圍0~100；</p> </td> </tr> <tr> <td colspan="2">max：最多值；min：最小值；step：步長；</td> </tr> <tr> <td>color</td> <td><input type="color" value="#00ff00"/> 數值型：#ffffff；</td> </tr> <!-- 操作類 end --> <!-- 表單功能 --> <tr> <th colspan="2">功能類</th> </tr> <tr> <td>button</td> <td> <input type="button" value="button"/> <button>This is a button.<img src="btn_03.png" width="52"/></button> <p>“button”允許嵌入其他元素；</p> </td> </tr> <tr> <td>image</td> <td><input type="image" src="btn_03.png" width="32" height="26"/><span> H5中使用“width”“height”修改圖片大小；</span></td> </tr> <tr> <td>submit</td> <td> <input type="submit"/> <p>get:在url地址上傳送參數到服務器;<br/>post:在后台傳送參數到服務器; </p> </td> </tr> <tr> <td>reset</td> <td><input type="reset"/></td> </tr> <!-- 表單功能 end --> <!-- 日期類型 --> <tr> <th colspan="2">Date 類</th> </tr> <tr> <td>date</td> <td><input type="date"/></td> </tr> <tr> <td>month</td> <td><input type="month"/></td> </tr> <tr> <td>week</td> <td><input type="week"/></td> </tr> <tr> <td>time</td> <td><input type="time"/></td> </tr> <tr> <td>datetime</td> <td><input type="datetime" value="2016-08-02T08:32Z"/></td> </tr> <tr> <td>datetime-local</td> <td><input type="datetime-local"/></td> </tr> <!-- 日期類型 end --> <!-- 特殊類 --> <tr> <th colspan="2">特殊類</th> </tr> <tr> <td>hidden</td> <td><input type="hidden"/> <p>可用於記錄一些表單狀態信息<br/>（例如使用value的值標記可選項為非空值的個數），<br/>或者其他自定義信息；</p></td> </tr> </table> </form> </body> <script type="text/javascript"> function sub_move() { var s = document.getElementById("sub"); window.onscroll = function _scroll() { var top = document.documentElement.scrollTop || document.body.scrollTop; s.style.top = top + 50 + "px"; } } </script> <script type="text/javascript"> window.onload = function main() { sub_move(); } </script> </html>
一、文本類
Text，文本
Url，網絡地址
Password，密碼
Email，郵箱地址
二、操作類
Checkbox ，復選框
Radio，單選框
File，上傳文件
Number，數值
Range，百分百滑動條
三、功能類
Button，按鈕
Image，圖片提交按鈕
Submit，文字提交按鈕
Reset，重置表單
四、Date類
Date，年月日控件
Month，年月控件
Week，年周控件
Time，時間控件
Datetime，年月日+時間控件
Datetime-local，本地年月日+時間控件
五、特殊類
Hidden，隱藏信息
擴展：
1.文本類屬性：placeholder。這是一個占位符，可以作為提示信息，而且無法被用戶選中。
2.Url和e-mail，在H5中，會在提交表單的時候檢測其格式是否書寫正確。
3.操作類。一般input標簽會結合label標簽使用，label一般有兩種書寫方法：
1.非跨度：<label><input></input></label>
2.跨度：<label for="input_id"></label>
<input id="input_id"></input>
如果網頁結構中，input和label是相鄰的關系，可以直接使用非跨度的書 寫方法，以減少代碼量。
4.file。在實際應用中，網頁表單中需要上傳的文件一般不止一個，這時候就要用到multiple屬性，它是一個布爾值屬性，在添加這個屬性后，就可以上傳多個屬性。另外，上傳的文件可以被規定，使用accept屬性。這個一個數組屬性，屬性值是MIME規定的文件類型。
5.Button。Button類型只能在value中定義按鈕上顯示的提示文字。Image類型只能在src中鏈接圖片。
而button標簽則結合了button和image的屬性，它是一個雙標簽，也就是說它可以在內部嵌套其他標簽，讓按鈕的顯示效果更多元化。
6.Date類。Date類型的input標簽是H5中新增加的。它實際上是一個控件，可以很方便的選擇和顯示時間數據，但是目前支持該控件的瀏覽器並不多。其中IE是完全不支持的。
7.Hidden。這個屬性的input標簽無法顯示，也無法被用戶控制。它的作用可以用來標記一些隱藏的表單信息。
例如：在一些網站中，對於用戶的描述，有一個信息完整度的提示。
用戶在注冊的時候，必填項有5個，可填項有5個。注冊的表單可以用hidden來記錄可填項中有多少個是有數據的。
假如，一個用戶把所有的可填項全部填寫。那么他的信息完整度就是100%。
另一個用戶的可填項一個也沒有填寫，他的信息完整度就是50%。
而這個數值可以根據hidden中記錄的數值來進行計算。