在HTML5中，表單新增了一些屬性，input標簽也有了更多的type類型，有些實現了js才能實現的特效，但目前有些瀏覽器不能全部支持。下面是一些h5在表單和input標簽上的一些改動。
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8" />
<!-- 在不支持h5的瀏覽器中，可以用CSS樣式進行改寫 -->
<style>
input[type="search"] {-webkit-appearance: textfield;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 在html5中，input標簽可以不寫在form里，但要給form一個id（如：login），然后在input中加一個form="login"屬性。
如果在同一表單中，做操作時，可以在input中加入formaction="1.php"屬性將表單提交到不同的PHP處理文件中。
也可以增加formmethod="get"屬性使不同的文本框提交的方法不同。-->
<!-- 如果要使整個表單驗證失效，可以再form中加入novalidate屬性；也可以在input中加入formnovalidate屬性，使單個文本框失效（不可以與required一起使用） -->
<form action="demo.php">
<!-- 當文本框是text或者textarea類型時，在未輸入狀態下，使用placeholder屬性可以顯示輸入提示 -->
TEXT:<input type="text" placeholder="請輸入用戶名" name="username"/><br/>
<!-- search類型的input用來輸入搜索關鍵詞
autofocus屬性用來自動獲取光標焦點，但一個頁面只能有一個。
input標簽中的list屬性，用於給出下拉選擇（類似於select），要與datalist元素一起使用，datalist設置一個id值，
input中加入list="id值即可"-->
SEARCH:<input list="listtest" type="search" autofocus name="ser"/><br/>
<datalist id="listtest">
<option>www.baidu.com</option>
<option>www.sina.com</option>
<option>www.google.com</option>
</datalist>
<!-- tel類型的input用來輸入電話，title是提示信息，pattern中可以寫電話的正則.
autocomplete屬性用於自動完成，可以關閉-->
TEL:<input type="tel" autocomplete="off" name="num" title="只能輸入11位數字！" pattern="^1[34578]\d{9}$" /><br/>
<!-- URL類型的input用來輸入URL的文本框-->
URL:<input type="url" required name="url" title="請輸入正確的URL"/><br/>
<!-- email類型的input用來輸入郵箱的文本框，但是它並不檢測email地址是否存在，而且文本框可以為空，除非加了required屬性。 -->
EMAIL:<input type=email required name="email"/><br/>
<!-- datetime用來輸入UTC日期和時間，並且在提交時對輸入的日期格式進行檢測 -->
datetime:<input type="datetime" name="datetime"/><br/>
<!-- date類型：以日歷的形式方便輸入 -->
date: <input type="date" value="2016-07-05" name="date"/><br/>
<!-- month類型是用來輸入月份的文本框，並在提交時對月份格式檢查 -->
month: <input type="month" value="2016-07" name="month"/><br/>
<!-- week用來輸入周號，他的格式類似於：2014-W10，代表2014年的第10周 -->
week: <input type="week" value="2016-W28" name="week"/><br/>
<!-- time用來輸入時間 -->
time: <input type="time" value="18:18" name="time"/><br/>
<!-- datetime-local專門用來輸入本地日期和時間的文本框 -->
datetime-local:<input type="datetime-local" value="2016-07-05T18:18" name="local"/><br/>
<!-- number類型用來輸入數字，提交時檢測。有min、max、step（數字相差的步數）屬性 -->
number:<input type="number" name="num" min="10" max="30" step="3"/><br/>
<!-- range只允許輸入一段范圍內數值的文本框，具有min、max、step屬性，默認范圍是0到100 -->
<!-- output元素定義不同類型的輸出，比如計算結果或腳本輸出。它必須從屬於某個表單，寫在表單內部，或者對他添加form屬性。output和range結合如下 -->
range:<input type="range" onchange="range.value=value" min="10" max="30" step="3"/>
<output id="range">20</output><br/>
<!-- color提供了一個顏色選擇器 -->
color:<input type="color" name="color"/><br/>
<!-- 文件上傳文本框，multiple屬性使其可以選擇多個文件；accept屬性限制了選擇文件的種類 -->
file:<input type="file" multiple accept="image/*" id="file0" name="file"/><br/>
<img src="" id="img0">
<!-- 此段js實現了上傳預覽 -->
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
<input type="submit" name="dosubmit" value="提交">
</form>
</body>
</html>
html5中form表單新增屬性以及改良的input標簽元素的種類
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。