html5表单常用属性介绍及在线演示

2013-10-12 17:29| 发布者: admin| 查看: 2520| 评论: 0

摘要: html5新的表单增加了很多常用属性，使代码编写更加容易，不需要其它js插件，只需将验证属性配置在html代码中即可完成表单验证。以下是表单常用的验证html代码：在线演示：http://www.html5star.com/demo/form页面代 ...

html5新的表单增加了很多常用属性，使代码编写更加容易，不需要其它js插件，只需将验证属性配置在html代码中即可完成表单验证。

以下是表单常用的验证html代码：

在线演示：http://www.html5star.com/demo/form

页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<script type="text/javascript">
function showValue(o)
{
document.forms["form1"]["sum"].value=o.value;
}
</script>
<body>
<form action="" method="POST" id="form1" name="form1">
<input type="text" autofocus="autofocus" required pattern="[A-z]{3}" name="auto" placeholder="必填项测试" />
数字： <input type="number" name="demoNumber" min="1" max="100" step="2" />
邮箱: <input type="email" placeholder="请输入邮箱" name="mail" />
<input type="url" name="url" placeholder="输入正确的网址" />
<br />
日期：<input type="date" name="time" />
颜色：
<input type="color" name="color" /><br />
<br />
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" onchange="showValue(this)"/>
<output name="sum">0</output>
<br />
<input type="submit" value="提交表单" />
</form>
</body>
</html>