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

1.3.4 表单标签(1)

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

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

1.3.4 表单标签(1)
 
通过Sample1_2与Sample1_3两个例子,我们掌握了大部分格式标签的基本用法,那么我们接下来介绍剩下的标签用法与一部分表单标签。我们首先来看一下本部分程序的效果图,如图1-7所示。

看完效果图以后我们不难发现,这些标签同之前讲的标签在外观表示形式方面有所差别,这样便于大家的理解记忆。通过接下来的学习,我们将学会如何在网页中制作出基础表单与多种多样的特效形式。

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

 
  1. <html><body> 
  2. <p>这里为删除线标签示例—有 <del>二十</del> <ins>十二</ins> 件。</p> 
  3. 3 <!--大多数浏览器会改写为删除文本和下划线文本,一些老式的浏览器会 
  4. 4 把删除文本和下划线文本显示为普通文本--> 
  5. <p>这里为标记标签示例:出门记着带 <mark>钥匙</mark></p><!--此标签为HTML5 新加的标签--> 
  6. <p>这里为时间标签示例:我在 <time datetime="2016-10-01">国庆节</time> 会放假。</p> 
  7. <!--本标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的--> 
  8. <p>从现在开始我们就要进入表单类标签的学习,在这里我们将学到日常生活中在网页世界中 
  9. 9 经常见到与用到的东西。<br/> 
  10. 10 我们首先将要学习的是form 标签,下面将是form 标签示例:</p> 
  11. 11 <form action="/example/html/form_action.asp" method="get"> 
  12. 12 <p>姓氏: <input type="text" name="姓氏" /></p> 
  13. 13 <p>名字: <input type="text" name="名字" /></p> 
  14. 14 <input type="submit" value="Submit" /> 
  15. 15 </form><!--由于本部分涉及服务器方面的知识,但是这里只是在介绍关于HTML 的基础内容,所以 
  16. 16 便不叙述服务器方面知识,想了解此方面内容的读者应当找一些专业讲解此方面内容的书籍资料来学习。--> 
  17. 17 <p>以上程序示例了一个基本的form 标签如何使用,接下来我们分步来看一下文本域、密码域、复选框、单 
  18. 18 选按钮。</p> 
  19. 19 <form><p>现在为文本域的创建示例:</p> 
  20. 20 名:<input type="text" name="名"><br /> 
  21. 21 姓:<input type="text" name="姓"> 
  22. 22 </form><!--同上面程序一样,input 标签的type 属性为text 时即为文本域--> 
  23. 23 <form><p>现在我们来看密码域的创建过程,在输入密码时浏览器将会用其他符号代替密码</p> 
  24. 24 用户:<input type="text" name="用户"><br /> 
  25. 25 密码:<input type="password" name="密码"> 
  26. 26 </form><!--与文本域类似,将input 标签的type 属性改为password 即为建立了一个密码域--> 
  27. 27 <form><p>现在我们来看复选框的创建过程</p> 
  28. 28 我喜欢步行:<input type="checkbox" name="步行"><br /> 
  29. 29 我喜欢汽车:<input type="checkbox" name="汽车"> 
  30. 30 </form><!—将input 标签的type 属性改为checkbox 即创建了复选框--> 
  31. 31 <form><p>现在我们来学习单选按钮的创建过程</p> 
  32. 32 男性:<input type="radio" checked="checked" name="Sex" value="male" /><br /> 
  33. 33 女性:<input type="radio" name="Sex" value="female" /> 
  34. 34 </form><!--当用户单击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态--> 
  35. 35 </body></html> 
 
第1~7行为剩余的几个格式标签示例,<del>标签经常会与<ins>标签一起使用,用在改正错误上面。标记标签为HTML5中新增加的一项标签,用于强调。最后一个<time>标签的两个属性datatime用于规定日期时间,pubdata用于指示文档的发布时间。
 
第8~16行为第一个<form>表单示例,一般情况下<form>经常与<input>标签结合使用,因为会经常用到输入文本信息。由于篇幅问题,就没有介绍涉及到的服务器方面的知识,想了解此方面知识的读者可以自行查阅资料。
 
第17~35行为<form>标签与<input>标签结合使用的几个简单示例,更改<input>标签中的type属性可以创建不同类型表单。下面我们会介绍<input>与<form>两个标签的其他属性。
 
上述程序演示了表单的一部分标签,使读者对表单有了初步的印象,接下来我们先来看一下表单标签都有什么样的标签。表1-6列出了表单标签中的标签及其描述,学会了表1-6所列这些标签,我们便能够在网页中做出各种类型的表单了。
 
表1-6表单类标签及其描述
 

续表

看了上一个程序中表单标签的基本用法后,再结合表1-6所列出的标签,读者应该有更深刻的体会。下面我们将对剩下的标签用法进行介绍。由于本部分的标签都会有几个属性,在程序只介绍一下用到的属性,以后我们会对剩下的属性进行介绍。

现在大家首先来看一下表单标签剩下的那些未介绍的标签的开发过程,图1-8所示为通过表单标签做出来后的基础版的效果图。因为本案例需要对多个标签进行介绍,所以在视觉上便会显得有些杂乱,读者在阅读时应该将每个标签与图对应着看,效果会更好。

 

看完了效果图后我们不难发现,上面所介绍的是我们在实际中常用的一些控件,相信读者在心中肯定跃跃欲试,想要掌握这些控件的实现技术。现在我们就来介绍这些控件的开发过程,其实原理与上面介绍过的标签开发无异,开发起来并不困难。

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

 
  1. <html><body> 
  2. <p>现在示例下拉列表,您喜欢的汽车牌子: 
  3. <form><select name="汽车"> 
  4. <option value="沃尔沃">沃尔沃</option> 
  5. <option value="奔驰">奔驰</option> 
  6. <option value="菲亚特">菲亚特</option> 
  7. <option value="奥迪">奥迪</option> 
  8. </select></form></p> 
  9. <p>现在示例有预设值的下拉列表,您喜欢的汽车牌子为: 
  10. 10 <form><select name="汽车"> 
  11. 11 <option value="沃尔沃">沃尔沃</option> 
  12. 12 <option value="奔驰">奔驰</option> 
  13. 13 <option value="菲亚特">菲亚特</option> 
  14. 14 <option value="奥迪" selected="selected">奥迪</option> 
  15. 15 </select></form></p> 
  16. 16 <!--上面为大家演示了两种下拉列表,第一种没有预设值, 
  17. 17 第二种多了一个selected 属性即设定预设值--> 
  18. 18 <p>这里将要给大家演示多行输入文本</p> 
  19. 19 <textarea rows="10" cols="30"> 
  20. 20 Textarea 标签定义多行的文本输入控件,其中文本的字体默认为等宽字体。 
  21. 21 可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是 
  22. 22 使用 CSS 的 height 和 width 属性。</textarea> 
  23. 23 <!--在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。 
  24. 24 可以通过wrap 属性设置文本输入区内的换行模式--> 
  25. 25 <p>下面我们将要介绍按钮标签:在 button 元素内部,您可以放置内容, 
  26. 26 比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处</p> 
  27. 27 <button type="button">按钮1</button> 
  28. 28 <form><input type="button" value="按钮2" /></form> 
  29. 29 <!--需要注意的是请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button", 
  30. 30 而其他浏览器中(包括 W3C 规范)的默认值是 "submit"--> 
  31. 31 <!--如果在 HTML 表单中使用<button>元素,不同的浏览器会提交不同的值。Internet Explorer 
  32. 32 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。 
  33. 33 请在 HTML 表单中使用 <input> 元素来创建按钮--> 
  34. 34 <p>接下来我们来看一下围绕数据的<fieldset>标签:如果 
  35. 35 浏览器没有显示边框,则为浏览器版本老旧造成的</p> 
  36. 36 <form><fieldset><legend>健康信息</legend> 
  37. 37 身高:<input type="text" /> 
  38. 38 体重:<input type="text" /> 
  39. 39 </fieldset></form><!--<legend>标签定义<fieldset>标签的标题--> 
  40. 40 <!--当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊 
  41. 41 方式来显示它们,该标签没有必需或者唯一的属性--> 
  42. 42 <p>下面我们来介绍元素组合选项标签<optgroup>:</p> 
  43. 43 <select><optgroup label="美国产的车"> 
  44. 44 <option value="ford">福特</option> 
  45. 45 <option value="chevrolet">雪佛兰</option> 
  46. 46 </optgroup><optgroup label="德国产的车"> 
  47. 47 <option value="mercedes">奔驰</option> 
  48. 48 <option value="audi">奥迪</option> 
  49. 49 </optgroup></select><!--<option>标签定义下拉列表中一个项目, 
  50. 50 没有结束标签,常与select 一起使用。<optgroup> 元素用于组合选项。当您使用一个长的 
  51. 51 选项列表时,对相关的选项进行组合会使处理更加容易--> 
  52. 52 <p>接下来我们看到是<output>标签的使用,<output>标签定义不同类型的输出</p> 
  53. 53 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  54. 54 <input type="range" id="a" value="50">100 
  55. 55 +<input type="number" id="b" value="50"> 
  56. 56 =<output name="x" for="a b"></output><!--需要注意的是在IE 浏览器中不支持这个标签--> 
  57. 57 </form></body></html> 
 
第1~17行为选择列表标签示例。其分为了两种,在第二种的<option>标签中的加上了selected属性,即预设值,在网页上初始显示的是预设值。<option>标签经常是与<select>标签一起使用的,它定义了下拉列表中的一个项目。
 
第18~33行为多行文本标签<textarea>与按钮标签的使用示例,其中多行文本的文本默认字体为等宽字体。对于按钮的实现方式,示例中写了两种,<button>标签提供了更为强大的功能和更丰富的内容,但是禁止使用的元素是图像映射。
 
第34~51行为<fieldset>标签与组合选项标签<optgroup>的示例。<fieldset>标签的使用方法比较简单,并且显示也很特殊,读者容易接受。使用组合选项标签时只要注意选项标签的分类,也是十分简单的。
 
第52~57行中我们看到的不只是<output>如何输出,我们也学到了<input>标签type属性的另外两个属性值。
 
至此为止表单标签基本讲解完毕,但是只有这些还是远远不够的,因为这些标签中还有许多元素没有讲解,这些标签只有在各种属性的配合使用下才会有更好的效果,那么下面我们就来看一下这些标签的属性及其用法,如表1-7所示。
 
表1-7<form>标签的属性值及其描述
 
 

说明
 
表1-7介绍了<form>标签在HTML 5中的属性,但是这部分都得结合服务器使用。由于篇幅问题我们并没有讲述服务器的知识,有兴趣的读者可以自己查阅这方面的资料,结合着本节介绍的属性来实践。属性是在开始标签中使用的,上面的每个例子中都有标签属性的使用。
 
表1-7中,我们在介绍<enctype>标签时没有介绍其值,现在我们来看一下。application/x-www-form-urlencoded:在发送前编码所有字符,为该属性默认值,multipart/form-data:在使用包含文件上传控件的表单时必须使用该值,text/plain:编码时空格转换为“+”号,不对特殊字符编码。
 
通过前面的案例学习过程我们发现,<input>标签及其属性的用法极其繁多,并且那只是使用了一个type属性所带来的效果。接下来我们来看一下<input>标签的其余属性,如表1-8所示。
 
表1-8<input>标签的属性值及其描述
 

续表
 

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

51CTO读书频道二维码


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

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

读 书 +更多

软件设计师考试考前冲刺预测卷及考点解析

本书依据最新版《软件设计师考试大纲》的考核要求,深入研究了历年软件设计师考试试题的命题风格和试题结构,对考查的知识点进行了提炼,并...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊