第08章表单的设计

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

19
上一页下一页目录本节结束
8.3.2 option标签
<option>标签用来定义菜单中的选项。<option>标签是单标签，它必须嵌套在<select>标签中使用。一个菜单中有几个选项，就要有几个<option>标签与之相对应，选项的具体内容写在每个<option>之后。<option>标签有两个属性：value和 selected，它们都是可选的。其中value属性的参数值是当该项被选中并提交后，Web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。selected属性用来指定选项的初始状态，表示该选项在初始时是被选中的。若在<select>标签中设定multiple属性的话，可以在多个<option>标签中带有 selected属性，即同时多个选项被预选。
14
上一页下一页目录本节结束
8.2.6 图像按钮image
当type=image时，浏览器会在相应位置产生一个图像按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必须的，它用于设置图像文件的路径。另外，很多在图像标签中使用的属性规定也可以在图像按钮中使用。
“表单”则是接受浏览者在网页中的操作，传递给服务器中的程序（如CGI程序），它是动态的，有输入框及按钮等。使用表单并配合CGI程序，网页能够知道浏览的人做了哪些事情，然后针对这些事情适当地加以回应，就可以做成一个具有交互功能的网页了。本章的内容就是要告诉你，如何使用表单和CGI程序来让自己的网页和浏览网页的人之间进行互相交流。
上一页下一页目录本节结束
8.2.3 密码框password
password类型与text类型使用起来很相似，不同之外只是当浏览者输入内容时，不显示所输入的内容，而是用星号“*”来代替每个密码字符，以保证密码的安全。
上一页下一页目录本节结束
8.2.4 单选框radio
当type=radio时，表示该输入项是一个单选项。单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息。因此，所有属性name都应取相同的值，但属性value的值应是不同的，而其中的checked属性用于指定该选项在初始时是被选中的。
只使用<form>这一标签是很难完成用户信息输入的，在<form>的开始与结束标签之间，除了可以使用以前讲的那些标签外，还有三个特殊标签，它们是：input、 select和textarea。下面，让我们一起学习。
上一页下一页目录本节结束
8.2 <input>标签
<input>是个单标签，没有结束标签，它必须嵌套在表单标签中使用，用于定义一个用户输入项。 <input>标签主要有六个属性：type、name、size、value、 maxlength和checked，其中name和type是两个必选属性。
21
上一页下一页目录本节结束
8.5 表单在网页中的应用
要想在网页中真正指挥表单的作用，就要使用CGI程序，因此先来认识一下CGI程序的概念。
8.5.1 CGI程序的概念
简单地说，CGI是服务器和HTML文件之间的接口程序，它负责处理HTML文件与运行在服务器中程序之间的数据交换。它可以是一个已编译的程序，或是一个批处理文件，或任何可以执行的二进制文件。CGI与服务器交互的流程如图 8.9所示。
cols属性用于规定文本输入框的宽度。属性的参数值是数字，表示一行所能显示的最大字符数。如果输入信息中有一行或几行的字符数大于cols属性的参数值，浏览器会为该文本输入框添加水平滚动条。
rows属性用于规定文本输入框的高度。属性的参数值是数字，表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是当输入信息的行数小于或等于 rows属性的参数值时，滚动条将不起作用。
上一页下一页目录本节结束
8.1 <form>标签
表单标Baidu Nhomakorabea<form>是成对标签，首标签<form>和尾标签 </form>之间的内容就是一个表单。
表单form为浏览者在屏幕上建立一张表格，表格中有明确的文字提示，使浏览者可以在表格上输入自己信息，然后使用提交按钮，将浏览者的信息传送给服务器。
其中name属性用于指定下拉菜单的名字。 size属性是可选的，用于定义菜单的长度。size属性的参数值是数字，表示显示在菜单中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该菜单添加滚动条，用户可以使用滚动条来查看所有的选项。szie属性的缺省值为1。 multiple属性用于预选多个选项。
1．size属性：用于指定文本框的长度，默认值为20，以字节为单位。
2．value属性：设定预先出现在文本框中的内容。 3．maxlength属性：表示该文本框允许用户输入的最大字符数。此值总是大于或等于size属性的参数值。当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过部分的内容。
20
上一页下一页目录本节结束
8.4 多行文本框textarea
用<textarea>标签可以来定义高度超过一行的文本输入框。 <textarea>标签是成对标签，首标签<textarea>和尾标签</textarea> 之间的内容就是显示在文本输入框中的初始信息。<textarea>标签有3个属性：name、rows和cols。其中name属性用于指定文本输入框的名字。
上一页下一页目录本节结束
8.2.1 文本框text
当type的类型为text时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。此文本框是一个只能输入一行文字的输入框。当type=text时，<input>标签除了有2个不可缺省的属性 name和type外，还有3个可选的属性：value、size和 maxlength。
上一页下一页目录本节结束
8.2.5 复选框checkbox
当type=checkbox时，表示该输入项是一个复选项，用户可以同时选中表单中的一个或多个复选项作为输入信息。由于选择是多项的，属性name应取不同的值。属性value的参数值就是该项被选中并提交后，Web浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺少的。而checked属性用于指定该选项在初始时是被选中的。
当type=reset时，浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。重置按钮的name属性也是可以缺省的。除 name属性外，它也有一个可选的属性value，用于指定显示在清除按钮上的文字。value属性的缺省值是“重置”。
一般来说，提交与重置按钮应同时出现。
8.3 下拉菜单
上一页
下一页
目录
8.3.1 select标签
本节
8.3.2 option标签
结束
8.5 表单在网页中的应用
上一页
下一页
目录
8.5.1 CGI程序的概念
本节
8.5.2 表单配合CGI程序
结束
上一页下一页目录本节结束
第8章表单的设计
随着Internet的迅速发展，用户的要求越来越高。他们不仅希望能从Web服务器中获得信息，而且还希望能向Web服务器反馈信息。HTML是利用表单（Form）来设计交互界面的。
上一页下一页目录本节结束
2．method属性 method属性用于指定该表单的运行方式。属性的参数
值为get和post之一，默认的方式是get。当值为get时表示该表单主要是从服务器中获取信息，因此它传送给服务器的反馈信息长度不能超过255个字符；当值为post时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制。
15
上一页下一页目录本节结束
8.2.7 隐含框hidden
当type=hidden时，表示输入项将不在浏览器窗口中显示。如果用户不想显示某些选项而又不愿将它们从文档中删去的话，就可以通过将这些选项中type属性的参数值改为hidden来达到上述目的。
16
上一页下一页目录本节结束
上一页下一页目录本节结束
8.2.2 提交按钮submit与重置按钮reset
当type=submit时，浏览器会在相应的位置产生一个提交按钮。当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。value属性的缺省值是“提交查询内容”。在一个表单中必须有提交按钮，不然将无法向服务器传送信息。
name属性的参数值是相应处理程序中的变量名，Web服务器将把这条输入信息的值赋予name属性规定的变量。type属性用于指定该输入项提供的输入方式即指出浏览者输入的值是什么类型的。
在不同的输入方式下，<input>标签的格式略有不同，其他五种属性因type的类型不同，含义也不同。 type主要有九种类型：text、password、radio、checkbox、submit、 reset、image、hidden和file。
上一页下一页目录本节结束
1．action属性 WWW是采用客户/服务器工作方式的。在浏览器端
得到的用户反馈信息将被传送到Web服务器中，由相应的处理程序进行处理。action属性的作用就是指出该表
单所对应的处理程序的位置。它的参数值就是该程序的 URL。
目前，在服务器端的采用较多的处理程序都是CGI程序，所以action属性写明的就是这个form需要执行的CGI 程序名，一般来说，处理用户反馈信息的程序CGI程序是放在Web服务器的CGI-BIN目录下的，一旦用户提交输入信息后，服务器便启动这个程序，完成查询任务。
8.2.8 文件选择输入框file
文件选择输入框在文件上传程序中应用最为广泛。文件选择输入框虽然看似复杂，但是在HTML中，只需通过<input id=file1 name=file1 type=file>就可以完全实现了。
17
上一页下一页目录本节结束
8.3 下拉菜单select/option
8.2 <input>标签
上一页下一页目录本节结束
8.2.1 8.2.2 8.2.3 8.2.4 8.2.5 8.2.6 8.2.7 8.2.8
文本框text 提交按钮submit与重置按钮reset 密码框password 单选框radio 复选框checkbox 图像按钮image 隐含框hidden 文件选择输入框file
表单form中的HTML代码要完成两件事情：一是指出CGI的路径和名称，二是要将表单输入的信息传递给CGI。至于CGI的概念，我们将在下一小节中讲，这里，读者只要把它当作一种在服务器上运行的应用程序就可以了。
上一页下一页目录本节结束
在HTML中，form的语法结构如下： <form action="…" method="…"> <input> … <select>…</select> … <textarea>…</textarea> </form> 在<form>标签里有两个属性：action和method。
在表单中，通过<select>和<option>标签就可以在浏览器中出现一个下拉式菜单或带有滚动条的菜单，浏览者可以在菜单中选中一个或多个选项。这一点和<input>标签中单选框和多选框使用上相似，只是形式不同。
18
上一页下一页目录本节结束
8.3.1 select标签
<select>标签是成对标签，首标签<select>和尾标签 </select>之间的内容就是一个下拉式菜单的内容。 <select> 标签必须与<option>标签配套使用，<option>标签用于定义下拉菜单中的各个选项。<select>标签有name、size和multiple三个属性。