请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Form 查看内容

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

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

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

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


页面代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8" />
  5.         <title></title>
  6. </head>
  7. <script type="text/javascript">
  8. function showValue(o)
  9. {
  10. document.forms["form1"]["sum"].value=o.value;
  11. }
  12. </script>
  13. <body>
  14.    <form action="" method="POST" id="form1" name="form1">
  15.         <input type="text" autofocus="autofocus" required pattern="[A-z]{3}" name="auto" placeholder="必填项测试" />
  16.        数字: <input type="number" name="demoNumber" min="1" max="100" step="2" />
  17.        邮箱: <input type="email" placeholder="请输入邮箱" name="mail" />
  18.         <input type="url" name="url" placeholder="输入正确的网址" />
  19.         <br />
  20.         日期:<input type="date" name="time" />
  21.         颜色:
  22.         <input type="color" name="color" /><br />
  23.         <br />
  24.         <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" onchange="showValue(this)"/>
  25.         <output name="sum">0</output>
  26.         <br />
  27.         <input type="submit" value="提交表单" />
  28.     </form>
  29. </body>
  30. </html>
复制代码

1

鲜花

握手
1

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:49 , Processed in 0.091552 second(s), 26 queries .

返回顶部