HTML5對表單有了極大的增強，不僅加了很多表單屬性而且加了許多類型的表單元素，
下面例子就對所有新增的表單屬性和表單元素做了一個演示
- <!DOCTYPE html>
- <head>
- <link rel="stylesheet" href="css/common.css" type="text/css">
- <script type="text/javascript" src="js/validateform.js"></script>
- <meta charset="UTF-8">
- <title>HTML5 表單DEMO</title>
- </head>
- <h3>Part1：新增的input 元素的屬性</h3><br>
- <form method="post" action="action1.jsp">
- <!-- 文本框的placeholder(占位符）屬性，這個屬性可以用於未輸入狀態時的文本提示 -->
- 實驗1：demo 文本框的placeholder屬性，這個屬性可以用於未輸入狀態時的文本提示 <br>
- 輸入textfield:<input type="text" placeholder="請輸入內容到文本框" />
- <br><br>
- <!-- autofocus可以讓頁面打開時，這個控件自動獲得焦點 -->
- 實驗2：demo autofocus屬性，這個屬性可以讓某控件自動獲得焦點<br>
- 輸入搜索文本:<input type='search' autofocus/>
- <br><br>
- <!-- list屬性可以和datalist配合起來使用，當用獲得焦點時候可以讓給用戶提示，否則讓用戶自己輸入內容 -->
- 實驗3：demo list屬性，這個屬性可以和datalist配合，當用戶獲得焦點時候給用戶提示<br>
- 輸入文本（有提示哦）：<input type="text" name="charles" list="charles info" >
- <datalist id="charles info" stype="display:none;">
- <option value="charles wang">charles wang</option>
- <option value="charles_wang888">charles_wang888</option>
- <option value="charles王子">charles王子</option>
- </datalist>
- <br><br>
- </form>
- <hr>
- <h3>Part2：新增的input 元素的類型</h3><br>
- <form method="post" action="action2.jsp">
- <!-- url類型表明專門輸入url的文本框,必須是協議名+地址，否則提示報錯-->
- 輸入url: <input name="url1" type="url" size="60" value="http://www.sina.com.cn"/>
- <br><br>
- <!-- email類型表明專門輸入郵箱地址 -->
- <!-- 注意，每個元素都可以用pattern，來使用正則表達式來校驗輸入，比如我這裡就給出了郵箱地址的正則表達式 -->
- 輸入郵箱地址:<input name="email1" type="email" size="60" value="[email protected]" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"/>
- <br><br>
- <!-- datetime類型可以輸入UTC日期和時間,並且進行有效性檢查，這個Opera支持，Firefox不支持-->
- 選擇大好時間：<input name="datetime1" type="datetime" required="true"/>
- <br><br>
- <!-- number 類型可以輸入數字，可以上下箭頭選擇增減，並且進行校驗 -->
- 輸入數字:<input name="number1" type="number" value="25" min="10" max="25" step="5"/>
- <br><br>
- <!-- range類型可以輸入一定范圍內的數值，具有最小值和最大值 ，可以設定 ，值用滑動條指定-->
- 選擇數值：<input name="range1" type="range" value="25" min="0" max="100" step="5"/>
- <br><br>
- <input type="submit"/>
- </form>
最後效果圖是：
650) this.width=650;" border=0>
部分控件比如<date> <datetime> <range>控件在Firefox 11上不支持，所以我的截圖是用的Opera 11浏覽器的截圖