[工学]HTML-表单教学.ppt

HTML 表单 本章任务 制作“注册”页面 本章目标 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会使用框架结构实现多窗口展示页面 表单输入控件的类型 文本框 ---单行 ---多行 ---密码文本框 复选框 单选框 表单包含的控件 表单输入元素 表单的工作原理 表单页面的基本结构 表单元素的统一格式 表单元素的逐一介绍 文本框基本语法 INPUT type=“text ” value=张三 size=20 表单元素的逐一介绍 密码框基本语法 INPUT type=“password ” value=“ 123456 ” size=“22” 表单元素的逐一介绍 表单元素的逐一介绍 表单元素的逐一介绍 表单元素的逐一介绍 表单元素的逐一介绍 小结1 编写如左图所示效果对应的html代码 在网页设计中，表单的主要用途有哪些？ 1.2 表单的工作原理 1.3 表单容器----FORM FORM包含所有表单内容 Action 属性 服务器端脚本程序（ASP、JSP、PHP、Perl等） mailto:mailbox@ 1.3 表单容器----FORM Method属性（get、post） get:发送的信息附加在URL的末尾 post:发送的信息作为一个整体 Enctype(MIME类型)属性 值:1. application/x-www-form- urlencoded(默认值) 2. multipart/form-data(文件域控件) 3.text/plain(邮件处理表单) 1.4 表单输入控件的类型 文本框 ---单行 ---多行 ---密码文本框 复选框 单选框 按钮 ---提交 ---重置 ---普通 选项菜单 ---下拉列表 ---列表框 1.4 表单控件的类型 文件选择框 隐藏控件 对象控件 1.4.1 文本框 单行文本框 input name=name type=text“ value=计算机 size=10 maxlength=30“ 多行文本框 textarea name=textfield cols=30 rows=6我毕业于枣庄学院/textarea 口令框 input type=“password” 演示——文本框示例 1.4.2 复选框和单选框 复选框 input type=“checkbox” checked 单选框 input type=“radio” name=“” checked 注意：单选框 name 属性相同者为一组！ 演示——复选框与单选框 1.4.3 按钮 提交按钮 input type=“submit” input type=“image” 重置按钮 input type=“reset” 自定义按钮 input type=“button” 演示——不同的按钮效果 1.4.4 选项菜单（菜单/列表） SELECT标记符 Size属性：列表显示的行数 Multiple属性：是否允许多选 OPTION标记符 演示——选项菜单 1.4.5 设置表单控件的标签 LABEL for=“controlID”标签文本/LABEL INPUT id=“controlID” 注意：id不能用name取代 演示——设置表单控件的标签 1.4.6 文件域 input name=file type=file size=10 maxlength=30 / 1.4.7 隐藏域 input name=hiddenField type=hidden value=这是计算机科学系考研预报名系统 / 注意：文字含有边框的为设置标签的控件 注意：含有图标处为隐藏域 * 表单 表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具 注册用户 收集信息 反馈信息 提供搜索工具 按钮 ---提交 ---重置 ---普通 选项菜单 ---下拉列表 ---列表框 单行文本输入框(TEXT) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET)