精编制作20101127-第9章-表单PPT课件

1、网页设计与欣赏 第9章使用表单创建交互网页 一 表单的构成一个表单有三个基本组成部分 1 表单标记 这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法 2 表单域 包含了文本框 密码框 隐藏域 多行文本框 复选框 单选框 下拉选择框和文件上传框等 3 表单按钮 包括提交按钮 复位按钮和一般按钮 用于将数据传送到服务器上的CGI脚本或者取消输入 还可以用表单按钮来控制其他定义了处理脚本的处理工作 二 表单的原理当用户单击确认按钮时 表单的内容会被传送到另一个文件 表单的动作属性 action 定义了目的文件的文件名 由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 第9章使用表单创建交互网页 三 表单标记 FORMaction URL method get post name target window FORM 1 action属性 定义处理表单数据的程序地址 通常是CGI地址 CGI是 通用网关接口 CommonGatewayInterface 是HTTP服务器与你的或其他机器上的程序进行 交谈 的一种工具 其程序必须运行在网络服务器上 CGI使网

2、页具有交互功能 解释处理来自表单的输入信息 并在服务器上产生相应处理 再将处理结果反馈给浏览器 2 method属性 指定表单数据传送到服务器的方式 get 将输入数据加在action指定的地址后面传送至服务器 post 将输入数据按照HTTP的传输方式传送至服务器 用电子邮件接收用户信息采用的就是这种方式 3 name属性 定义表单 用于区分一个页面上的多个表单 4 target属性 定义输入数据的结果显示在哪个窗口 书中99页 例如 formaction 表示表单将向 一 单行文本框是一种让访问者自己输入内容的表单对象 通常被用来填写单个字或者简短的回答 如姓名 地址等 代码格式 type text 指定输入类型为文本信息 且为单行 上限为255个字符 name属性定义文本框的名称 要保证数据的准确采集 必须定义一个独一无二的名称 size属性定义文本框的宽度 单位是单个字符宽度 maxlength属性定义最多输入的字符数 value属性定义文本框的初始值例1代码 inputtype text name example1 size 20 maxlength 15 四 表单域 inp

3、uttype text name size maxlength value 二 密码框是一种特殊的文本域 用于输入密码 当访问者输入文字时 文字会被星号或其它符号代替 而输入的文字会被隐藏 代码格式 inputtype password name size maxlength 属性解释 type password 定义密码框 name属性定义密码框的名称 要保证数据的准确采集 必须定义一个独一无二的名称 size属性定义密码框的宽度 单位是单个字符宽度 maxlength属性定义最多输入的字符数 例2代码 inputtype password name example3 size 20 maxlength 15 三 多行文本框也是一种让访问者自己输入内容的表单对象 只不过能让访问者填写较长的内容 代码格式 TEXTAREAname cols rows TEXTAREA 属性解释 name属性定义多行文本框的名称 cols属性定义多行文本框的宽度 rows属性定义多行文本框的高度 例3代码 TEXTAREAname example2 cols 20 rows 2 TEXTAREA 四 复

4、选框复选框允许在待选项中选中一项以上的选项 每个复选框都是一个独立的元素 都必须有一个唯一的名称 代码格式 INPUTtype checkbox name value 属性解释 type checkbox 定义复选框 name属性定义复选框的名称 value属性定义复选框的值例4代码 inputtype checkbox name wire value 09 有线 inputtype checkbox name wireless value 08 无线 五 单选框当需要访问者在待选项中选择唯一的答案时 就需要用到单选框 代码格式 inputtype radio name value 属性解释 type radio 定义单选框 name属性定义单选框的名称 要保证数据的准确采集 单选框都是以组为单位使用的 在同一组中的单选项都必须用同一个名称 value属性定义单选框的值 在同一组中 它们的域值必须是不同的 例5代码 inputtype radio name 性别 value 1 男 inputtype radio name 性别 value 2 女 六 文件上传框有时候 需要用户上传自

5、己的文件 文件上传框看上去和其它文本域差不多 只是它还包含了一个浏览按钮 访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件 注意 在使用文件域以前 请先确定你的服务器是否允许匿名上传文件 表单标签中必须设置ENCTYPE multipart form data 来确保文件被正确编码 另外 表单的传送方式必须设置成POST 代码格式 inputtype file name size 15 maxlength 100 属性解释 type file 定义文件上传框 name属性定义文件上传框的名称 size属性定义文件上传框的宽度 单位是单个字符宽度 maxlength属性定义最多输入的字符数 例6代码 inputtype file name myfile size 15 maxlength 100 七 下拉选择框允许你在一个有限的空间设置多种选项 代码格式 selectname size multiple optionvalue selected option select 属性解释 size属性定义下拉选择框的行数 name属性定义下拉选择框的名称 multipl

6、e属性表示可以多选 如果不设置本属性 那么只能单选 value属性定义选择项的值 selected属性表示默认已经选择本选项 五 表单按钮表单按钮控制表单的运作 一 提交按钮提交按钮用来将输入的信息提交到服务器 代码格式 inputtype submit name value 属性解释 type submit 定义提交按钮 name属性定义提交按钮的名称 value属性定义按钮的显示文字 例9代码 inputtype submit name mySent value 发送 二 复位按钮复位按钮用来重置表单 代码格式 inputtype reset name value 属性解释 type reset 定义复位按钮 name属性定义复位按钮的名称 value属性定义按钮的显示文字 样例10代码 inputtype reset name myCancle value 取消 三 一般按钮用来控制其他定义了处理脚本的处理工作 代码格式 inputtype button name value onClick 属性解释 type button 定义一般按钮 name属性定义一般按钮的名称 valu

7、e属性定义按钮的显示文字 onClick属性 也可以是其它的事件 通过指定脚本函数来定义按钮的行为 样例11代码 inputtype button name myB value 保存 onClick javascript alert itisabutton 二 单选框与复选框1 type radio该控件为单选框type checkbox该控件为复选框2 Checked 内定选项 即决定选项是否在第一次显示时就被选中 3 若要使一组单选框具有单选效果 则应使这组单选框的name属性值相同 从而实现一组中只能选中一项 即单选效果 第9章使用表单创建交互网页 三 文件选择框 四 按钮用src指定的图像作为提交按钮 无法显示图像时 则用alt值显示提交按钮 第9章使用表单创建交互网页 五 选项菜单使用select标记 并用option标记每个可选项 其语法如下 选项1选项2选项3 第9章使用表单创建交互网页 五 导航菜单的制作黑龙江大学哈尔滨商业大学哈尔滨商业大学佳木斯大学说明 1 Select中代码的作用 一旦选项发生改变 立即从当前被选择的菜单中获得网址 并链接该地址 从而保证了导航功能的实现 2 Value的值不再是字符 而是网页URL 因此 一旦选中一个菜单 就相当于获得了一个网页地址 第9章使用表单创建交互网页 例 制作提交到E mail的表单 FORMaction mailto ljws2007 method post 主题 抄送 正文 FORM 例6 1 利用表单创建用户信息注册表 如图所示

《精编制作20101127-第9章-表单PPT课件》由会员ahu****ng2分享，可在线阅读，更多相关《精编制作20101127-第9章-表单PPT课件》请在金锄头文库上搜索。