《网页设计与制作教学课件》7b 表单.pptVIP

本节学习要点： * 表单概述 form标记 表单控件的类型 表单的排版设计 网页表单制作 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 例如： 注册表单 登录表单 搜索网页 1.表单的工作原理 （1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。（2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成信息。 一个完整的表单包含两个部分： （1）一个是在网页中进行描述的表单对象。 （2）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。 2. form标记 form包含所有表单内容 格式： form action “服务器端程序的URL地址 ” method “get/post” enctype “type值” …… action 属性 设置服务器端脚本程序（ASP、JSP、PHP、Perl等）所在页面的路径 mailto:×××@ 注意： 做一个电子邮件反馈表单，只要在表单的action中填入你的信箱，格式mailto:lyl@，不过要在源程序中的 标签中插入属性 enctype “text/plain”。 如： form enctype text/plain action mailto:lyl@ method指定数据传送到服务器的方式，主要有两种： 当method “GET”时，将输入数据加在action指定的地址后面传送到服务器； 当method POST时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器。 3. 表单控件的类型 文本框 复选框 单选框 按钮 选项菜单 …… 3.1文本框和口令框 创建单行文本框的基本语法如下： input type text/password name value size maxlength 其中name属性指定了控件的名称，也是将域里面的输入值传给其他程序使用时域的名字 ； value属性指定了控件的初始值； size属性指定了文本框的宽度，默认值20； maxlength属性指定了在文本框中可以输入的最长文本数。 3.2复选框和单选框 创建复选框和单选框也是使用INPUT标记符，语法分别如下： INPUT type “checkbox” name “ ”value “ “ checked INPUT type radio name “” value checked type属性为“checkbox”，说明该控件是一个复选框，type属性为radio，说明该控件是一个单选框；name属性和value属性的值都是程序处理表单数据时需要的；checked属性是可选的。 注意：单选框 name 属性相同者为一组！ 3.3文件选择框 在发送邮件时，选择附件使用 input type “file” name “ ” size “ ” 3.4按钮 提交按钮 input type “submit” name “ ” input type “image” name “ ” 重置按钮 input type “reset” name “ ” 自定义按钮 input type “button” name “ ” 提交 submit 是为了把用户所输入的内容提交给服务器上相关程序处理，即实际上是把输入的信息提交给相关程序，让服务器进行处理。重新设置按钮（reset button）是把用户所输入的内容清除掉，重新输入。基本语法为： input type “submit” input type “reset” 在input标记里，输入value的属性值可改变按钮上的字，否则它自动写上submit和reset。上面介绍的文本框实际上都需要配上提交及重置按钮才算完整。 3.5多行文本框 如果希望用户多输入一些内容回答问题或进行讨论，可建立一个多行多列的文本框。 基本语法： textarea cols x rows y 属性cols确定文本框的宽度，它指的是多行多列的文本框一行同时出现的文字个数。属性rows确定多行多列的文本框的高度，即一次出现的文字行数。 3.6选项菜单 跟所有forms一样，下拉菜单也是以 标记开始，再紧接 标记。 基本语法为： select name “name1” size “value”multiple multiple option value “value” selected “selected”