Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 對於表單的增強 Demo

HTML5 對於表單的增強 Demo

日期：2017/3/1 10:23:14 编辑：Linux編程

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>