HTML5表单.ppt

表单 表单表单的功能表单元素formInput元素Textarea元素Select元素Option元素Label元素Fieldset元素和legend元素表单数据及处理方式 表单的功能 用户登录 收集用户信息 提交用户请求 基于互联网的电子商务 表单的处理过程 一 设计表单 并放入一些输入域二 网站访问者在自己的计算机上填写上述输入域 并提交到服务器端三 服务器处理数据并返回确认信息 Internet 服务器 数据库 一 什么是表单 表单 form 由表单和表单对象组成 是web网页上用户界面元素的集合体 而用户界面元素就是网页上一些能让用户实施交互的东西 例如 能输入一段信息的文本域 能让用户选择是或否的问题式框 为用户提供一系列选项的弹出式菜单 用户可以按动的按钮等 表单对象主要包括 文本域 单行 多行 密码文本框复选框单选按钮文件域图像域 按钮 提交 重置 普通列表 菜单 下拉列表 列表框隐藏域跳转菜单 二 表单作用 表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具 注册用户 反馈信息 表单包含的元素 单行文本输入框 TEXT 单选按钮 RADIO 复选框 CHECKBOX 下拉列表 SELECT 重置按钮 RESET 提交按钮 SUBMIT 多行文本框 TEXTAREA 密码框 PASSWORD 一般表单页面的基本结构 METHOD post或get ACTION METHOD 指定提交后 由服务器上那个处理程序处理 指定向服务器提交的方法 一般为post或get方法 post方法比较安全 ACTION URL 示例1 使用post提交方式和get提交方式 HTML5中可以使from中的表单标签脱离from的嵌套 方法 form指定ID 所有表单标签均添加form id属性 提交 表单元素的统一格式 指定元素的类型 可为TEXT RADIO SUBMIT等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中 表单元素 语法开始标记 必需内容 表单域元素结束标记 必需主要属性Action属性 定义表单被提交时发生的动作 通常包含服务方脚本的URL 比如ASP PHP Method属性 指出表单数据提交的方式 有两个可能值Get 将表单数据附加在请求中的URL上Post 将表单数据封装在发送到服务器的请求中作用 定义一个区域可以加入表单对象 表单控件元素 表单控件元素是包含在表单元素中具有可视化外观的HTML元素 用于访问者输入信息表单控件元素有input元素 text passwordtextarea元素select和option元素Radio checkboxFilelabel 元素 语法开始标记 必需内容 空结束标记 禁用主要属性Type属性 指定表单控件的类型button checkbox image hidden text radio submit reset password file 按扭的类型可以为submit button resetValue属性 指定表单控件的数据Name属性 指定该控件的名字作用 根据对type属性不同的取值可以建立多种显示风格的表单控件 如文本区域 口令域 复选框 单选按钮 提交按钮 重新设置按钮 文本域 隐藏域 图像域和通用按钮 HTML5新增的使用和规范 新增的表单属性 文本域控件 Type text 作用 用于创建一个单行文本输入字段值 由访问者自由输入的任何文本与input元素的其它属性配合 Maxlength属性可以限制输入的字符数Readonly属性可以让文本控件只读Disabled是否禁用 口令控件 Type password 作用 用于创建一个单行文本输入字段 并用 号屏蔽用户的输入 注意 当password输入的数据提交时并不以任何形式加密value值 由访问者自由输入的任何文本作为默认值与input元素的其它属性配合 Maxlength属性可以限制输入的字符数 提交按钮和重置按钮 Type submit 作用 传送表单数据给服务器端脚本或其它程序处理value值 按钮的标题文字Type reset 作用 清空表单的内容并把所有表单控件设置为最初的默认值value值 按钮的标题文字 复选框控件 Type checkbox 作用 创建一个可以在选中和未选中之间切换的控件 当该表单提交给一个脚本进行处理时 每个被选取的复选框将返回一个与该复选框的名称相关联的值value值 选中该控件的值 可以是任意文本与input元素的其它属性配合 要以选取状态显示复选框 使用checked属性 旅游运动唱歌 单选按钮 Type radio 作用 创建一个单选按钮 用于互斥地选择某种属性值value值 文本 当提交form时 如果选中了此单选按钮 那么value就被发送到服务器与input元素的其它属性配合 要以选取状态显示复选框 使用checked属性 上午下午晚上 图像按钮和普通按钮 Type image 作用 创建一个图像按钮 用于实现用户自定义的按钮风格Src属性 指向按钮图片的位置Type image与元素功能一样 Type button 作用 用于控制执行客户端脚本Value值 文本 显示在按钮上的标签 隐藏控件和文件选择控件 Type hidden 作用 用于在表单中包含不希望用户看见的信息Value值 文本 指派给控件的值 当用户提交表单时 该值与其它数据一起被发送Type file 作用 上载文件Value值 文本 要上载的文件在本地的路径 同步练习 创建一个用户登录表单创建一个表单 加入由input元素构成的各种控件 元素 语法开始标记 必需内容 出现在textarea中的初始文本结束标记 必需主要属性 cols属性 指定文本区域的列数rows属性 指定文本区域的行数Name属性 指定该控件的名字Readonly 使文本区域不能编辑Accesskey 设置快捷键Tabindex tab键控制顺序作用 建立一个多行的文本输入区域 文本域控件举例 以下代码创建了一个高20字符宽5字符的文本区域请输入 菜单 列表元素 语法开始标记 必需内容 Option元素结束标记 必需主要属性 size属性 指定列表的高度multiple属性 指定数据项可以多选Name属性 指定该控件的名字作用 建立一个选择菜单 列表 菜单项 列表项元素 语法开始标记 必需内容 文本结束标记 可选主要属性 value属性 指定选中该项提交的值selected属性 指定该项预先被选择作用 代表一个选择菜单 列表的选项 菜单 列表控件举例 学生教职员工工人 学生教职员工工人 菜单 列表控件举例 Optgroup分组 菜单 列表控件举例 多选 标签元素 语法开始标记 必需内容 文本结束标记 必需主要属性 For 表示与该元素相联系的控件的ID值作用 将文本与控件联系在一起 将文本与控件联系在一起后 用户就可以单击这个文本 效果就同单击控件一样 FIELDSET元素 语法开始标记 必需内容 LEGEND元素元素结束标记 必需作用 对输入域元素进行分组 LEGEND元素 语法开始标记 必需内容 文本结束标记 必需作用 为FIELDSET提供一个说明性的标题 表单数据及处理方式 处理表单数据的主要方式通用网关脚本 CGI脚本 服务器端Java JSP Servlet ASP ASPX PHP etc 任务5 1 设计用户注册页面 设计用户注册页面很多网站只对注册用户提供服务 要成为注册用户 必须进行注册 一般注册的方式都要通过注册页面来收集用户的信息 本任务就设计这样一个用户注册页面 4表单 常用表单标记Forminput textarea select等新增表单标记新增输入类型 Email number range新增表单元素 Datalist 规定输