HTML5 对于表单的增强 Demo

企鹅博客
19511
文章
0
评论
2020年3月4日02:24:46 评论 10 views 1997字阅读6分39秒

HTML5对表单有了极大的增强,不仅加了很多表单属性而且加了许多类型的表单元素,

下面例子就对所有新增的表单属性和表单元素做了一个演示

 

 
 
  1. <!DOCTYPE html> 
  2.  
  3. <head> 
  4. <link rel="stylesheet" href="css/common.css" type="text/css"> 
  5. <script type="text/javascript" src="js/validateform.js"></script> 
  6. <meta charset="UTF-8"> 
  7. <title>HTML5 表单DEMO</title> 
  8. </head> 
  9.  
  10. <h3>Part1:新增的input 元素的属性</h3><br> 
  11.  
  12. <form method="post" action="action1.jsp"> 
  13.  
  14. <!-- 文本框的placeholder(占位符)属性,这个属性可以用于未输入状态时的文本提示 --> 
  15. 实验1:demo 文本框的placeholder属性,这个属性可以用于未输入状态时的文本提示 <br> 
  16. 输入textfield:<input type="text" placeholder="请输入内容到文本框" /> 
  17. <br><br> 
  18.  
  19. <!-- autofocus可以让页面打开时,这个控件自动获得焦点 --> 
  20. 实验2:demo autofocus属性,这个属性可以让某控件自动获得焦点<br> 
  21. 输入搜索文本:<input type='search' autofocus/> 
  22. <br><br> 
  23.  
  24. <!-- list属性可以和datalist配合起来使用,当用获得焦点时候可以让给用户提示,否则让用户自己输入内容 --> 
  25. 实验3:demo list属性,这个属性可以和datalist配合,当用户获得焦点时候给用户提示<br> 
  26. 输入文本(有提示哦):<input type="text" name="charles" list="charles info" > 
  27. <datalist id="charles info" stype="display:none;"> 
  28.     <option value="charles wang">charles wang</option> 
  29.     <option value="charles_wang888">charles_wang888</option> 
  30.     <option value="charles王子">charles王子</option> 
  31. </datalist> 
  32. <br><br> 
  33.  
  34.  
  35. </form> 
  36.  
  37. <hr> 
  38. <h3>Part2:新增的input 元素的类型</h3><br> 
  39.  
  40. <form method="post" action="action2.jsp"> 
  41.  
  42. <!-- url类型表明专门输入url的文本框,必须是协议名+地址,否则提示报错--> 
  43. 输入url: <input name="url1" type="url"  size="60" value="http://www.sina.com.cn"/> 
  44. <br><br> 
  45.  
  46. <!-- email类型表明专门输入邮箱地址 --> 
  47. <!-- 注意,每个元素都可以用pattern,来使用正则表达式来校验输入,比如我这里就给出了邮箱地址的正则表达式 --> 
  48. 输入邮箱地址:<input name="email1" type="email"   size="60"  value="[email protected]" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"/> 
  49. <br><br> 
  50.  
  51. <!-- datetime类型可以输入UTC日期和时间,并且进行有效性检查,这个Opera支持,Firefox不支持--> 
  52. 选择大好时间:<input name="datetime1" type="datetime" required="true"/> 
  53. <br><br> 
  54.  
  55. <!-- number 类型可以输入数字,可以上下箭头选择增减,并且进行校验 --> 
  56. 输入数字:<input name="number1" type="number" value="25" min="10" max="25" step="5"/> 
  57. <br><br> 
  58.  
  59. <!-- range类型可以输入一定范围内的数值,具有最小值和最大值 ,可以设定 ,值用滑动条指定--> 
  60. 选择数值:<input name="range1" type="range" value="25"  min="0"  max="100" step="5"/> 
  61. <br><br> 
  62.  
  63. <input type="submit"/> 
  64.  
  65. </form> 

最后效果图是:

 

继续阅读
  • 版权声明: 发表于 2020年3月4日02:24:46
  • 转载注明:https://www.qieseo.com/174896.html
从Android源码分析View绘制 Linux编程

从Android源码分析View绘制

在开发过程中,我们常常会来自定义View。它是用户交互组件的基本组成部分,负责展示图像和处理事件,通常被当做自定义组件的基类继承。那么今天就通过源码来仔细分析一下View是如何被创建以及在绘制过程中发...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: