基于HTML商业网站开发.pptVIP

第三章 表 单 ---表单与表单元素 回 顾 表格在网页中的作用 如何创建表格 表格的基本结构 表格标签及其属性 单元格的合并 本章目标 什么是表单？ 表单如何使用？ 如何创建表单？ 了解表单和表单元素之间的关系 掌握 表单元素 的使用 表单 为什么使用表单? 表单的应用 表单在商务上的应用 网上预定商品 网上商品拍卖 表单在各种社会机构中的应用 网上调查 网络咨询 表单在网络上其它应用 网络人才招聘 网络社区注册 表单的定义 表单 表单由表单容器和其中的表单元素组成，通过表单可以向服务器传递表单元素中用户输入的数据，形成用户与服务器的交互 表单容器 由form/form定义一个表单容器 表单元素 由一个或者多个文本输入框，可点击按钮，多选框等等组成 表单中的文本字段 文本框 标签： input type=“text” 属性：type，name，size，maxlength，value，readonly 密码框 标签：input type=“password” 属性： type，name，size，maxlength，value，readonly 表单中的其它元素 复选框 标签：input type=“checkbox” 属性：type，name，value，checked 单选框 标签：input type=“radio” 属性：type，name，value，checked 表单中的其它元素 下拉菜单 标签：select option/option /select select属性：name，size，multiple option属性：value，selected 补充： optgroup标签:为select主菜单中的每个 optgroup标签都生成子菜单。 表单中的文本字段 文件输入框 标签： input type=“file” 属性：type，name， size，maxlength， readonly 多行文本框 标签：textarea/textarea 属性： name ，rows，cols，readonly 表单中的动作按钮 提交按钮 标签：input type=“submit” 属性：type，name，value 重置按钮 标签：input type=“reset” 属性：type，value 表单中的动作按钮 图像按钮 标签：input type=“image” 属性：src，name，align，alt 点击按钮 标签：input type=“button” 属性：name 表单中的动作按钮 button标签 标签：button/button 属性：type 给表单元素标记和分组 label标签 使用label 标签来定义表单元素间的关系 fieldset标签 legend标签 将一群相关表单控件形成一个组，并用fieldset和legend标签来标记这个组 Tab 键索引顺序 tabindex 属性 用来设定按下tab键时焦点的移动顺序 tabindex 属性值为正整数 规则：数值越小越先访问，没有tabindex属性或属 性为0的元素后被访问 其它相关属性 id 属性 id属性赋值的名称不会传递给服务器 id属性和name属性的区别 title 属性 作用：用弹出式帮助来给用户提示 accesskey属性 作用：设定页面快捷键 IE 为alt+accesskey属性值， FireFox 为alt+shift+accesskey属性值 disabled和readonly属性 readonly属性 用户不能修改表单控件 控件值将被传送到服务器 控件可以被鼠标和通过tab键选定 disabled属性 用户不能修改表单控件 控件值将不会被传送到服务器 控件不能被鼠标和通过tab键选定 Form标签的三大属性 action属性(必须) 说明了接收和处理表单数据的应用程序URL method 属性(必须) 为浏览器设置表单中的数据传送到服务器的方法 属性值：get 和 post name 属性 get 还是post(补充) 综合练习 总结 表单是由表单容器和其中的表单元素组成 表单中的各种表单元素及其属性 表单的结构和表单属性 作业 模拟美食网站的注册页面 要求(要求用表格来排版) 姓名 密码 出生年月 性别 个人喜好：各类美食 个人介绍 提交、取消按钮 中国十大品牌IT教育机构 表单是网页上的一块区域， 用于向服务器提交信息 form 你喜欢什么动物？ br input type=“checkbox” name=“pets” value=“dog”狗 br input type=“check