八、表单的建立和应用精品.pptVIP

* 8-1表单的用途 表单（Form）可以让网页的浏览者输入数据，然后将数据返回Web服务器，以备登录或查询之用。 表单可以提供输入的界面，让浏览者输入数据，常见的应用有： Web搜索： 网络票选： 意见调查： 报名或在线订购： 知名的Yahoo、新浪、搜狐、首都在线（263）、Chinaren、网易（163）等。 表单的建立可以分成3个阶段来讨论： 一、决定要搜集的数据：首先，您必须根据实际需求决定要搜集哪些数据。 二、建立表单：首先，您必须针对要搜集的数据建立一个输入界面，也就是表单的形式。 三设计表单处理程序：最后，您还要设计表单处理程序，这个程序负责接收浏览者所输入的数据，以便将数据进行登录或查询等进一步的处理，如表8-1所示。 表8-1 表单字段 单行文本框 多行文本框 复选框 范例 上传您的GIF文件 您喜欢下列哪些活动（可复选）？ 水上运动 旅行 说明 允许浏览者输入单行的文字,如姓名、电话、传真、地址、E-Mail等。 允许浏览者输入多行的文字，如建议、评语、自我介绍等。 允许浏览者从一组选取单一或多个选项，比方说，要票选最喜爱的男歌手，于是以复选框设计一组包含5个歌手的选项，然后浏览者可以从5个歌手中做复选。 表单字段 选择钮 下拉式菜单 密码字段 范例 说明 允许浏览者从一组选项中选取单一选项，比方说，要知道浏览者的性别，于是以选择设计一组包含男和女的选项，然后浏览者只能从中选择男或选择女。 密码字段其实就像单行文本框一样，只是无论浏览者输入什么数据，密码字段都会以星号（*）表示。 续上表 按钮 性别： 男 女 范例 请输入密码： 允许浏览者从下拉式菜单所列出的清单中做选择 当浏览者的表单输入完成之后，可以点取按钮将数据传送回Web服务器；或者，当浏览器想放弃刚才输入的数据，亦可点取按钮重新输入。 8-3 建立表单的输入界面 FORM…/FORM标记 标记说明： FORM…/FORM标记的用途是在HTML文件中插入表单。 属性说明： ACTION=“URL” 指定表单处理程序的相对或绝对位置（若要将表单数据寄到电子邮件信箱，可以指定该电子邮件信箱的URL；若没有指定ACTION属性的值，表示使用默认的表单外理程序） 范例：FORM METHOD=“POST” ACCEPT=“mailto:windsorszhang@’ 属性说明： FORM…/FORM标签亦含有LANG、DIR、CLASS、ID、STYLE、TITLE、OnClick、OnDblClick、OnMouseDown、OnMouseUp、OnMouseMove、 OnKeyPress、 OnMouseOut、 OnMouseOver、OnKeyDown、OnKeyUp等属性。 INPUT标记 INPUT标记的用途是在表单中插入输入字段或按钮，如选择钮、选取方块、单行文本框等，这个标记必须放在FORM…/FORM标记之间。 标记说明： 属性说明： ALIGN=“{LEFT，RIGHT，CENTER}” 指定图片提交按钮的对齐方式（TYPE=“IMAGE”） ACCEPT=“…” 指定提交文件时的MIME类型（以逗号隔开） 取消表单字段，使表单数据无法被接受或提交 DISABLED CHECKED 当TYPE=“RADIO”或TYPE=“CHECKBOX”时，此属性会将选择钮或选取框默认为已选取的状态 范例：INPUT TYPE=“FILE”ACCEPT=“image/gif, image/jpeg” 8-3-1 插入表单与按钮 1.首先，我们使用FORM…/FORM标记插入表单。 BODY BACKGROUD=“mobi10.jpg PIMG SRC=“mobi11.jpg”/P FORM /FORM /BODY 2.在FORM…/FORM标记之间使用INPUT标记插入“提交”和“重新输入”两个按钮。 BODY BACKGROUD=“mobi10.jpg PIMG SRC=“mobi11.jpg”/P FORM /FORM /BODY INPUT TYPE=“SUBMIT”VALUE=“提交” INPUT TYPE=“RESET”VALUE=“重新输入” BUTTON…/BUTTON标记 在表单内插入按钮，若配合上IMG标记，则可插入图片按钮。 属性说明： ACCESSKEY=“…” 指定按钮的按键顺序 DISABLED 取消按钮的功能 NAME=“…” 指定按钮的名称（限英文），此名称不会显示在网页，但可作为后端处理用，供Script、表单处理程序使用 标记说明： TYPE=“{SUBMIT，RESET 指定按钮的类型。SUBMIT表示按钮为“提交”按钮，当浏览者按下“提交”按钮时，表单数据会被返回Web服务器；RESET表示按钮为“重新输入