|
|
51CTO旗下网站
|
|
移动端

1.3.4 表单标签(2)

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍表单标签。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:01

1.3.4 表单标签(2)
 
表1-8所示的这些属性即为<input>元素的属性,其中包含了HTML5中新增的许多属性,接下来我们便来看一下这些属性的应用效果。图1-9为<input>元素属性应用案例效果,由于之前已经讲述了type属性,所以在这里便没有再叙述这部分知识。
 

看完了案例生成的效果图,我们就来看一下案例的开发过程。如前面案例开发过程所示,本案例的大部分标签与属性的使用方法大家应该已经掌握了,我们现在来具体学一下<input>元素的局部属性的应用,其与大部分属性的应用是相同的,读者学起来会很快。

代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_6.html。

 
  1. <html><body> 
  2. <p>单击此图像即为提交,这里为用图片代替按钮,alt 属性只能与type="image"配合使用 
  3. 3 它为图像输入规定替代文本</p><form> 
  4. <p>姓: <input type="text" name="姓" /></p> 
  5. <p>名: <input type="text" name="名" /></p> 
  6. <input type="image" src="back.png" alt="Submit" width="64" height="64"/></form> 
  7. 7 <!--即使 alt 属性不是必需的属性,但是当输入类型为 image 时,仍然应该设置该属性。如果 
  8. 8 不使用该属性,就有可能对文本浏览器或非可视的浏览器造成使用障碍。除了 Safari,所有 
  9. 9 主流的浏览器都支持 "alt" 属性。height 属性只适用于 <input type="image">,它规定 image 
  10. 10 input 的高度。其属性pixel 以像素为单位,%以百分比为单位--> 
  11. 11 <p>这里是表单的自动完成功能测试,填写并提交表单,然后再输入一遍相同的数据的开头来体 
  12. 12 验一下自动完成功能</p><form autocomplete="on"> 
  13. 13 姓:<input type="text" name="姓" /><br /> 
  14. 14 名: <input type="text" name="名" /><br /> 
  15. 15 <input type="submit" /></form><p></p> 
  16. 16 <!--自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值, 
  17. 17 应该显示出在字段中填写的选项。autocomplete 属性适用于 <form>,以及下面的 <input> 类型: 
  18. 18 text, search, url, telephone, email, password, datepickers, range 以及 color--> 
  19. 19 <p>这里显示的为加载时自动获得焦点与禁用输入字段示例,使用该属性input 元素获得焦点</p> 
  20. 20 <form> 
  21. 21 姓: <input type="text" name="姓" autofocus><br> 
  22. 22 名: <input type="text" name="名" disabled="disabled"><br> 
  23. 23 <input type="submit"></form> 
  24. 24 <!--被禁用的 input 元素既不可用,也不可单击。可以设置 disabled 属性,直到满足某些其他的 
  25. 25 条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值, 
  26. 26 将 input 元素的值切换为可用--> 
  27. 27 <p>这里显示的为max 与min 属性示例,