搜索
第5章表单表单基础input标记多行文本框下拉列表框表单应用本章主要内容：《网页设计制作基础与上机指导——HTML+CSS+JavaScript》清华大学出版社5.1表单基础表单的主要功能是收集信息，接受浏览者在网页中的操作，并传递给CGI或ASP等服务器端的表单处理程序。有了表单使服务器端不仅可以向客户端发送网页数据，而且可以收集来自客户端上传的信息。表单通常来做注册登录、网络问卷调查、在线考试等需要向服务器上传的工作，这些来自客户端的数据存储于数据库中，从而为网络其它应用提供必要的支持。5.1.1什么是表单表单实质上就是用于实现网页浏览者和服务器端之间信息交换的一种页面元素，在上被广泛用于各种信息的搜集和反馈。在web应用中，与表单工作相关的有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入信息的服务器端应用程序，如ASP、JSP等。5.1.2表单控件的类型表单中通常包含两类元素，一种是普通的页面元素如文本、图像、表格等，另一种是用于收集信息的特定页面元素，即表单控件如按钮、文本框、密码框等。表单像一个容器一样包含各种类型的控件，表单内的控件用于接收用户的输入，典型的控件有文本框、按钮等。表单中的每个控件都有特定的名称，这个名称有效范围是所在表单。每个控件都有初始值和当前值，初始值是由网页设计者预先指定的，当前值是由用户与表单控件交互操作决定的，当提交表单时，会把控件中的当前值提交到服务器端。表单控件对于客户端用户和服务器端处理程序交互起着中间数据载体的作用，HTML中定义了以下类型的表单控件。5.1.2表单控件的类型1．文本框接受任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本。使用密码输入框的密码及其它信息在发送到服务器时并未进行加密处理。所传输的数据可能会以字母数字文本形式被截获并被读取。因此，始终应对要确保安全的数据进行加密。5.1.2表单控件的类型2．按钮在单击时执行操作。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签。使用按钮可将表单数据提交到服务器，或者重置表单。还可以指定其它已在脚本中定义的处理任务。5.1.2表单控件的类型3．单选框代表互相排斥的选择。在某单选框组（由两个或多个共享同一名称的单选框组成）中选择一个单选框，就会取消选择该组中的所有其它单选框。5.1.2表单控件的类型4．复选框允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。5.1.2表单控件的类型5．下拉列表框在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个列表显示选项值，用户只能从中选择单个选项。在下列情况下使用下拉列表框：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。下拉列表框与文本框不同，在文本框中用户可以随心所欲键入任何信息，甚至包括无效的数据，对于下拉列表框而言，只可以具体设置某个列表返回的确定值。5.1.2表单控件的类型6．文件选择输入框使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。5.1.2表单控件的类型7．隐藏框存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。5.1.3form标记表单是一个包含表单控件的区域，如果要在网页中添加表单，就要在文档中添加form标记。5.1.3form标记1．form标记的用法基本语法：formname=method=action=表单控件……/form语法解释：（1）name属性定义表单的名称。（2）action属性指定表单处理程序（CGI或ASP等服务器端的表单处理程序）的位置。（3）method属性定义表单结果从浏览器传送到服务器的方式，属性的参数值一般有两种：get和post。5.1.3form标记2．post方法和get方法浏览器使用method属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：post方法和get方法，默认采用get方法。如果采用post方法，浏览器将会按照下面的步骤来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦post样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。5.1.3form标记另一种情况是采用get方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据。浏览器会将数据直接附在表单的处理程序URL之后，它们两者之间用“?”进行分隔，各个参数之间用“&”号分隔。下面是一个采用get方法的url实例。=x1¶m2=x2……一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在form标签的method属性中指明表单处理服务器要用方法来处理数据，是post还是get。5.2input标记input标记用于收集用户输入的数据。根据input标记type属性值的不同，输入框拥有多种类型。输入字段可以是文本框、复选框、单选框、按钮等。基本语法：forminputname=type=/form5.2input标记语法解释：（1）input标记主要有六个属性，type，name，size，value，maxlength，check。其中name和type是必选的两个属性。（2）name属性的值，在服务器端处理相应程序中获得该表单控件的值所采用变量名和它相同。例如属性值为“x1”，那么服务器端通过在request对象中x1变量的值来获得这个表单控件的值（3）在不同的输入字段类型下，input标记的格式略有不同，其它五种属性因type类型的不同，其含义也不同。（4）type主要有九种类型：text，password，hidden，submit，reset，image，radio，checkbox，file。5.2.1单行文本框当input标记的type属性值为“text”时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。基本语法：forminputname=type=textmaxlength=size=value=/form5.2.1单行文本框语法解释：当type=text时，标记为用户可输入文本的单行输入字段。单行文本框还有3个可选的属性：maxlength，size和value。（1）maxlength属性用于设置单行输入框可以输入的最大字符数，例如限制用户名为10个字符、电话号码最多为11个数字等。（2）size属性用于设置单行文本框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超出的内容。（3）value属性为文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。（4）如果需要一个随表单传到客户端浏览器的文本框，希望能随表单把值提交回来，并且用户能够看到且不能修改，只需要添加一个“readonly”属性即可。5.2.2密码输入框密码输入框type属性值为“password”与单行文本输入框看起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。基本语法：forminputname=type=passwordmaxlength=size=/form语法解释：如果要在表单中插入密码框，只要将input标记中type属性值设为“password”即可，maxlength、size属性同文件输入框text的属性一样不再赘述。5.2.3隐藏框隐藏框是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏框是看不见的。当表单被提交时，隐藏框就会将信息用你设置时定义的名称和值发送到服务器上。基本语法：forminputname=type=hiddenvalue=/form语法解释：（1）当input标记的type属性值为“hidden”时，表示输入项为隐藏框将不在浏览器中显示。（2）隐藏框由于不在页面中显示，所以在表单中出现的位置没有先后顺序要求，只要包含在form标记范围内即可。5.2.4提交按钮和重置按钮当type属性值为“submit”时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将所属表单内的输入信息传送给服务器。当type属性值为“reset”时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。基本语法：forminputname=submittype=submitvalue=”提交”/formforminputname=resettype=resetvalue=”重置”/form5.2.4提交按钮和重置按钮语法解释：（1）提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息。（2）重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。5.2.5图像按钮有时候为了达到比较好的视觉效果，有人会使用图片代替按钮来提交或者重置表单数据。类型为图片(type=image)的按钮，其默认操作是提交表单。基本语法：forminputname=type=imagesrc=/form语法解释：单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必需的，它用于设置图像文件的路径。5.2.6单选框和复选框当input标记的type属性值为“radio”时，表示输入项为一个单选框。当input标记的type属性值为“checkbox”时，表示输入项为一个复选框。基本语法：forminputname=type=radiovalue=/formforminputname=type=checkboxvalue=/form5.2.6单选框和复选框语法解释：（1）当为单选框时，单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有单选框的name属性都应取相同的值；不同的选项其属性value的值应是不同的；checked属性用于指定该选项在初始时是被选中的。（2）当为复选框时，用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取不同的值；属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是必选项；checked属性用于指定该选项在初始时是否被选中。5.2.7文件选择输入框文件选择输入框可以让用户在表单的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件选择输入框的基本功能。如利用web发送E-mail时常见的附件功能。文件选择输入框的外观是一个文本框加一个浏览按钮，用户既可以直接将要上传给网站的文件的路径写在文本框内，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。基本语法：formmethod=”post”enctype=”multipart/form-data”