在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>