<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5中的表单</title>
<script type="text/javascript">
var flag = true;
function checkMail(){
var url = document.getElementById("url");
if (url.value==""){
//表单提交时 自定义验证信息
url.setCustomValidity("请输入url地址");
// alert("url地址不能不空");
flag=false;
}
//显式调用 checkValidity()方法 ，验证通过返回true
else if (!url.checkValidity()){
alert("请输入合法的url地址");
flag= false;
}
else {
alert("恭喜您输入的url地址合法");
}
return flag;
}
</script>
</head>
<body>
<!--
novalidate="novalidate" 忽略表单的验证
-->
<form id="sub" method="post" >
<!-- placeholder属性设置文本域未输入信息的提示信息 -->
<!-- autofocus自动获取焦点 -->
<!-- tabindex当设置值时1,2，3...
按tab键切换时会按照指定的值，依次切换 ..
-->
用户名: <input name="username" placeholder="请输入用户名" autofocus="autofocus" formmethod="get" tabindex="1">
<!-- list属性引用指定的datalist的id -->
<!-- formmethod指定该元素表单提交的方式post或者get -->
<!-- autocompleter:自动补全内容 -->
爱好: <input name="fav" autocomplete="off" list="data" tabindex="3" formmethod="post" >
颜色选取:<input name="color" type="color">
<!-- 显示验证url,
应在表单提交时验证，此处方便测试就添加失去焦点事件
-->
url: <input type="url" id="url" name="url" onblur="checkMail();">
mail:<input name="email" type="email" required>
<!-- date类型，火狐,ie9 中测试不支持，
chrome 支持....,
datetime类型:这三款浏览器都不支持，
datetime-local:只有chrome支持,
time:时间输入框,chrome支持,
week:某一年的第几周,chrome支持,
month:某一年的第几月,chrome支持,
-->
出生日期:<input name="date" type="month">
<!-- number: min,max :最小值和最大值；step表示变化的幅度-->
薪资:<input type="number" min="0" max="100" step="10">
<!--
添加pattern属性利用正则表达式限制属性的内容
-->
年龄:<input type="text" required="required" pattern="^[0-9]{0,3}$"/>
<!-- html5中的type="submit",不指定value属性时默认显示提交查询
formaction指定提交的路径,
-->
<!-- 取消表单验证: 1、 添加 formnovalidate="formnovalidate"
2. form元素中添加 novalidate="novalidate"
-->
<input type="submit" formaction="sub.jsp" >
</form>
<!--
form属性定义该元素指向的表单的id,
required :表示该字段必填
-->
密码: <input name="pwd" type="password" tabindex="2" required="required" form="sub">
<!-- datalist是html5新增标签，类似于select -->
<datalist id="data">
<option value="java">java</option>
<option value="c">C</option>
<option value="c++">C++</option>
<option value="python">python</option>
</datalist>
</body>
</html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/10084.html