第三章 (2) 表单标记 form, input, select, option

1. 第三章(2) 表单标记form, input, select, option textarea, label, fieldset, legend

2. 网页中表单的作用 • 表单是实现动态网页的一种主要的外在形式。它的主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息。它是网站实现互动功能的重要组成部分。 • 例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面，其主要内容是姓名、年龄、联系方式等个人信息。又例如要在某论坛上发言，发言之前要申请资格，也是要填写完成一个表单网页。无论网站使用的是那种形式的语言来实现网站的互动功能，例如ASP、PHP、JSP，表单已经成为它们统一的外在形式

3. 用换行符布局的表单 <form name="form1" method="post" action=“a.asp"> <p>请输入您的姓名:<br><input type="text" name="name" id="name"></p> <p>请问你的性别:<br> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女</p> <p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" value="book">看书 <input type="checkbox" name="hobby" value="net">上网 <input type="checkbox" name="hobby" value="sleep">睡觉</p> <p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p> <p><input type="submit" value="Submit"></p></form>

4. 为什么要用表格布局表单 • 表单和表单元素并不具有排版的能力，表单和表单元素的排版最终还是要由表格组织起来， • 因此在html代码中，表单标记和表格标记通常是如影随形的。

5. 用表格布局的表单代码 <form name="form1" method="post" action=“a.asp"> <table width="88%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">用户名：</td> <td height="28"><input name=“user" type="text" maxlength="10" size="12" /></td> </tr> <tr> <td height="28" align="center">密 码 ： </td> <td><input name=“pwd" type="password" value="" size="12" /></td> </tr> <tr> <td height="32">&nbsp; <input type="submit" name="Submit" value="提交" /></td> <td>&nbsp; <input type="reset" name="Submit2" value="重置" /></td> </tr> </table> </form>

6. 表单代码的组成 一个表单的代码至少应包括三个组成部分： (1) 表单<form>标记：这里包含了处理表单数据所用动态网页的URL以及数据提交到服务器的方法。 (2)表单元素：包含了文本框、菜单、复选框和单选框等。 (3)提交按钮：将数据传送到服务器上的动态网页。

7. 表单的功能 • 表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的html源代码，二是服务器端用来处理用户所填信息的程序（暂时不学），或者客户端的脚本。在html里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。 • 表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会上传到服务器中，然后由服务器中的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中。

8. 表单标记<form> • <form></form>标记用来创建一个表单域，即定义表单的开始和结束位置，这一标记有几方面的作用。第一，限定表单的范围。所有表单对象，都要插入到表单域之中。单击提交按纽时，提交的也是表单范围之内的内容。 • 第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置（action）、提交表单的方法（method）等。这些信息对于浏览者是不可见的，但对于处理表单确起着决定性的作用 • 多个<form>标记不能嵌套

9. form标记的属性面板 target action enctype name method

10. form标记常见属性method • method： get或post get方式提交的表单信息是非安全方式，附加在URL地址后面（例如百度） url?表单元素1的name=表单元素1的value &表单元素2的name=表单元素2的value…… <form name=f action=s> <input type=text name=wd id=kw size=42 maxlength=100> <input type=submit value=百度一下 id=sb><div id=sug onselectstart="return false"></div><span id=hp><a href=/gaoji/preferences.html>设置</a><br><a href=/gaoji/advanced.html>高级</a></span></form>

11. form标记常见属性action • action：接一个动态网页名 <form name="test" method=“post" action="4-2_2.asp"> 设置action属性后会产生两个作用： 1点击该表单的提交按钮将会链接到该网页 2 同时还会将表单中输入的数据发送给该网页进行处理

12. 表单数据提交后 • 表单将数据提交给动态页后，动态页通过request对象取下数据，就能进行处理了，如把这些数据存入数据库，或按这些数据进行查询等。 <%dim userName,PS userName=request.form("userName") PS=request.form("PS") response.write "你输入的用户名是:"&userName response.write"<br>你输入的密码是:"&PS%>

13. form标记常见属性 • enctype：一般不需要设置，如果表单中有文件上传对象，则设置该属性值为multipart/form-data • name和id：在表单的接收页面只接收有name属性的表单元素，赋ID的元素通过表单是接收不到值的 • target：接收页是否在新窗口打开，和a标记的该属性类似

14. 表单中的元素

15. DW中表单对象与标记的对应关系 • 表单域form标记中包含的表单标记主要有input，select (option)，textarea等 • 在DW中表单对象面板中的对象与这些标记的对应关系是：

16. input-表单元素的通用标记 • input标记是收集用户输入信息的标记，是一个单标记，其含义由type属性决定。input标记的type属性总共有10种取值，含义如表1所示：

17. 文本域 • 文本域举例： 查询：<input type="text" name="search" size=20 onfocus="this.value=''" value="请输入关键字"/> input标记中的size属性是定义文本域的宽度

18. 单选框 • 单选框举例： <input type=“radio” name=“gender” value=“F” />女性 <input type="radio" name="gender" value="M" checked="checked" />男性 • checked属性设定初始时单选按钮哪项处于选定状态，同一组单选按钮name属性的值必须相同，这样这一组单选框中只有一个能被选中。

19. 复选框 • 复选框，可以选中多项 • <input name=“checkbox” type=“checkbox” value=“1” checked=“checked” />看书 <input name=“checkbox2” type=“checkbox” value=“2” />上网 <input type="checkbox" name="checkbox3" value=“3" />听音乐

20. 文件域 • <input type="file" name=“upfile" /> • 供上传文件用，需要服务器端的上传组件配合 • 文件域对表单标记form有特殊要求，method必须设为post，MIME类型必须为multipart/form-data

21. 按钮 • 提交按钮(type="submit") 将表单中所有具有name属性的元素内容发送到服务器端指定的应用程序 • 重置按钮(type="reset") 用户在填写表单时，若希望重新填写，单击该按钮将使全部表单元素的值还原为初始值 • 普通按钮(type="button") 该按钮没有内在行为，但可用javascript为其指定动作

22. 图像域 • 即图像按钮，用一张图片做按钮，功能和提交按钮相同 <input type="image" name=“tijiao" src="images/yjt.gif" />

23. <select>和<option>标记 • <select>标记是下拉菜单框或列表框标记，是一个标记的含义由其size属性决定的元素，如果该标记没有设置size属性，那么表示为下拉菜单框，如果设置了size属性，则变成了列表框，设置了multiple属性，则表示列表框允许多选。下列列表框中的每一项由<option>标记定义，还可使用<optgroup>添加一个不可选中的选项。 • 例如：你的籍贯： <select name="select" id="select" size="3"> <option value="1">湖南</option> <option value="2">广东</option> <option value="3">江苏</option> <option value="4">四川</option></select> 去掉size属性后

24. 跳转菜单 • DW中的跳转菜单实际上是一个带有javascript脚本的下拉菜单，点击跳转菜单的某一项将会转到某个网页 <select name="menu1" onchange="MM_jumpMenu('parent',this,0)"> <option value="http://www.sina.com">新浪网</option> <option value="http://www.sohu.com">搜狐网</option><option value="http://www.taobao.com">淘宝网</option> </select>

25. 多行文本域标记<textarea> • <textarea>是多行文本域标记，用于让浏览者输入多行文本，如发表评论或留言，跟帖。 • <textarea name="comments" cols="40" rows="4" wrap="virtual">这是一个有4行，每行可容纳40个字符，换行方式为虚拟的多行文本域。</textarea>

26. 表单的辅助标记 • <fieldset>、<legend>标记 fieldset是字段集标记，它必须包含一个legend标记，表示是字段集的标题。如果表单中的控件较多，可以将逻辑上是一组的控件放在一个字段集内，显得有条理些。 <form method="post"> <fieldset><legend>个 人 资 料</legend> …… </fieldset>……</form>

27. <label>标记的用途 为控件定义一个标签，通过for属性绑定控件。在dw中插入表单控件时选择“使用for属性附加标签标记”如： <input type="radio" name="sex" value=“m" id="male" /> <label for="male">男</label><br /> <input type="radio" name="sex" value=“f" id=“female" /> <label for="female">女</label> 这样当单击标签时就相当于单击表单控件 表单控件还可添加快捷键，tab顺序键等

28. 将行为和表单一起使用 • 在DW中，通过标签面板－行为－检查表单，可以对表单的输入进行检查，如文本域不能为空，必须是数字，或电子邮件地址等，这实际上是添加了检查表单提交事件的javascript代码实现的 • <select name="select" onChange="window.open(this.options[this.selectedIndex].value)"> • 通过自己输入脚本实现跳转菜单功能

29. 框架标记 frameset frame iframe P88页

30. 框架标记 • 如果想把一个浏览器窗口分成几个区域，每个区域都显示一个网页，则需要使用框架集<frameset>和框架标记<frame>，这两个标记也是成组出现的。 • 框架标记以前也用于网页的排版，现在用得比较少了，但网站的管理后台程序常用左右分割的框架版式。 • DW中框架标记位于布局分类中

31. <frameset>标记 • 窗口框架的分割有两种方式，一种是水平分割，另一种是垂直分割，在<frameset>标记中通过cols属性和rows属性来控制窗口的分割方式 • <frameset rows=“各个横向框架的大小或比例" cols="各个纵向框架的大小" border="像素值" bordercolor="颜色值" frameborder="yes|no" framespacing="像素值">…</frameset>

32. 用cols属性将窗口分为左右部分 <frameset cols=“30%,40%,*”> 那么“*”就代表30%的宽度 • 用rows属性将窗口分为上下部分 • <frameset rows="30%,40%,*">

33. 框架的嵌套 • 通过框架的嵌套可实现对子窗口的分割，例如有时需要先将窗口水平分割，再将某个子窗口进行垂直分割，如图3-50所示。可用下面的代码实现。 <html> <head> <title>用框架分割窗体</title> </head> <frameset rows="30%,*"> <frame src="2-8.html"/> <frameset cols="30%,*"> <frame src="2-9.html"/> <frame src="2-2hn.html"/> </frameset> </frameset> </html>

34. <frame />标记 • 用src属性指定要显示的网页 • <frame src="demo/2-8.html"/> • 用name属性指定框架的名称 • 可以用name属性为框架指定名称，这样做的用途是，当其他框架中的链接要在指定的框架中打开时，可以设置其他框架中超链接的target属性值等于这个框架的name值。 例如定义右边窗口name属性为main： <frame name="main"/> 左边窗口中的链接目标是main：<a href="add.htm" target="main">添加新闻</a> 这样add.htm会在框架名为main的窗口（右边窗口）中打开。

35. Iframe内嵌框架 • 框架集标记只能对网页进行左右或上下分割，如果要让网页的中间某个矩形区域显示其他网页，则需要用到浮动框架标记，下面是浮动框架的属性举例： • <Iframe src="/blog/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></Iframe> • src：URL地址，既可是HTML文件，也可以是文本、ASP等； • width、height："内部框架"区域的宽与高； • scrolling:当SRC指定的HTML文件在指定的区域显示不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; • FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。 • name:框架的名字，用来进行识别

36. 这是iframe框架的例子<br /> 下面的天气预报是插入的其他网页<br /> <iframe src="http://mimg.163.com/tianqi/city/57872.html" frameborder="0" scrolling="no" width = 128 height=150 />

37. 通过iframe挂木马 • 活动框架常用于将其他网页的内容导入到自己网页的某个区域，如把天气预报网站的内容导入到自己做的网页的某个区域显示， • 但某些木马或病毒程序利用iframe的这一特点，通过修改用户的网页源代码，在网页尾部添加iframe代码，导入其他带病毒的恶意网站的网页，并将iframe框架的宽和高都设置为0，这样用户打开自己网页的同时，就不知不觉打开了恶意网站的网页，从而感染病毒，这就是所谓的iframe挂木马的原理。不过可查看地址栏看打开网页时是否提示正在打开某个恶意网站的网址而发现这种被挂木马的网页。

38. <head>标记中的meta, title, link

39. meta元信息标记 • meta是元信息标记，是描述网页文档信息的标记。可以描述文档的编码方式，文档的摘要，文档的关键字，文档的刷新。都不会显示在网页上，其中网页的摘要，关键字是为了让搜索引擎能对网页内容的主题进行识别和分类。文档刷新可设置网页经过一段时间后自动刷新或转到其他Url。在DW中，可通过菜单命令“插入－HTML－文件头标签”进行这些设置。

40. Meta的name属性 • Keywords(关键字)说明：keywords用来告诉搜索引擎网页的关键字是什么。举例： • ＜meta name =“keywords” content=“science, relationships, entertainment, human”＞ • description(网站内容描述)说明：description用来告诉搜索引擎网站的主要内容。举例： • ＜meta name="description" content="This page is about the meaning of science, education,culture."＞

41. Meta的http-equiv属性 • 自动刷新 ＜meta http-equiv=“Refresh” content=“2；URL=http://www.webjx.com”＞ • 实现网页转换时的动画效果 ＜meta http-equiv="Page-Enter" content="revealTrans(duration=５.０, transition=２０)"＞

42. link链接其他文件的标记 • 主要用来链接外部CSS文件，也可链接一个图标文件.ico用来改变浏览器地址栏的图标。如： • <link rel="Bookmark" href="favicon.ico" /> • <link rel="icon" href="favicon.ico" type="image/x-icon" /> • <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> • <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

43. <style></style>标记是专用于在网页头部嵌入CSS代码的标记。<style></style>标记是专用于在网页头部嵌入CSS代码的标记。 • <script></script>标记是用于嵌入脚本（如javascript）或链接外部脚本文件(src属性)的标记，它既可位于网页头部，也可位于网页body部分。 • <title></title>是网页标题标记，该标记中的内容将显示在浏览器窗口的标题栏上

44. Base (基链接) • Base (基链接)　　　说明：插入网页基链接属性. 用法： • <Base href=“http://www.xia8.net/” target=“_blank”>　　　注意：网页上的所有相对路径在链接时都将在前面加上“http://www.xia8.net/”。 其中target=“_blank”指明链接文件在新窗口中打开。

45. 复习题 • 下面的表单元素代码都有错误，你能指出它们分别错在哪里吗？ • ① <input name="country" value="Your country here." /> • ② <checkbox name="color" value="teal" /> • ③ <input type="password" value="pwd" /> • ④ <textarea name="essay" height="6" width="100">Your story.</textarea> • ⑤ <select name="popsicle"> • <option value="orange" /> • <option value="grape" /> • <option value="cherry" /> • </select>