|
|
|
|
移动端

1.3.4 表单标签(2)

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

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

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


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 属性示例,max 属性与 min 属性配合使用, 
  28. 28 可创建合法值范围</p><form> 
  29. 29 输入数量: <input type="number" name="输入数量" min="0" max="10" /> 
  30. 30 <input type="submit" /></form> 
  31. 31 <!--max 和 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetime-local, 
  32. 32 month, time 以及 week。--> 
  33. 33 <p>这里为输入段字符最大长度属性示例:</p><form> 
  34. 34 <p>姓: <input type="text" name="姓" maxlength="85" /></p> 
  35. 35 <p>名: <input type="text" name="名" maxlength="55" /></p> 
  36. 36 <input type="submit" value="Submit" /> 
  37. 37 <!--maxlength 属性规定输入字段的最大长度,以字符个数计。 
  38. 38 maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用--> 
  39. 39 </form><p>此处示例可接受多个值的上传字段,请尝试在浏览文件时选取一个以上的文件。 
  40. 40 </p><form>选择图片:<input type="file" name="img" multiple="multiple" /> 
  41. 41 <input type="submit" /></form> 
  42. 42 <p>这里为通过pattern 属性规定用于验证输入字段的模式,输入时请按要求输入3 个字母的国家代码: 
  43. 43 </p><form>国家代码:<input type="text" name="country_code" pattern="[A-z]{3}" 
  44. 44 title="三个字母的国家代码" /> 
  45. 45 <input type="submit" /></form> 
  46. 46 <!--模式指的是正则表达式,pattern 属性适用于以下 <input> 类型:text, search, 
  47. 47 url, telephone, email 以及 password 。pattern 属性规定用于验证输入字段的模式。--> 
  48. 48 <p>接下来我们演示的是输入字段预期值属性,提供可描述输入字段预期值的提示信息, 
  49. 49 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。</p><form> 
  50. 50 <input type="search" name="user_search" placeholder="输入字段预期值" /> 
  51. 51 <input type="submit" /></form> 
  52. 52 <!--placeholder 属性适用于以下的 <input> 类型:text, search, url, password 等。--> 
  53. 53 <p>接下来我们演示的为required 与size 属性,required 属性规定必需在提交之前填写输入字段。 
  54. 54 如果不填写任何内容,则会有提示出现。</p><form> 
  55. 55 姓名: <input type="text" name="usr_name" required="required" size="35"/> 
  56. 56 <input type="submit" value="提交" /></form> 
  57. 57 <!--required 属性适用于以下 <input> 类型:text, search, url, telephone, email, 
  58. 58 password, date pickers, number, checkbox, radio 以及 file。--> 
  59. 59 </body></html> 
 

第2~10行为image属性应用案例。在使用该属性时需要注意的是图片的存放位置,只需将图片与HTML文件放到同一个文件夹下即可。如果还有上层文件,在路径上加上上层文件即可。通过alt属性可以为用户在由于某些原因无法查看图像时提供备选的信息。

第11~26行为自动完成与获得焦点属性应用。在平时浏览网页时我们输入要登录账号的开头字母或数字便会出提示,这便是因为开启了autocomplete属性。有autofoucs属性时我们会发现,网页打开后焦点自动回到该input元素上。

第27~41行为max与maxlength属性的应用,应用这几个属性时只需规定好相应的数值即可。结合使用max与min属性可以规定好一段范围,maxlength一般用在有字数限制的文本输入<input>元素。

第42~59行为验证输入字段属性、字段预期值属性与required属性的应用,这些在我们日常上网时都会遇到。使用验证输入字段与required属性,在不满足条件时都会弹出提示通过使用字段预期值,在初始加载进界面后会显示预期设置的值。

到这里为止我们便将表单标签的基础内容学习完毕。本小节的内容有些繁杂,知识点零碎,但每点都比较容易接受。

 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

JAVA并发编程实践

本书既能够成为读者的理论支持,又可以作为构建可靠的、可伸缩的、可维护的并发程序的技术支持。本书并不仅仅提供并发API的清单及其机制,...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊