(web前端开发》课程理论教学部分 第七讲:表单 河南中医学院互联网应用技术研究所 Http://Labs.51xuEweb.Com 2013.4
web前端开发》课程理论教学部分/第七讲:表单 学时计划 学时计划:2学时理论,1学时实验 实验四:在网页中使用表单和多媒体) 教学大纲: 1、表单基础 2、 input 3、新增的表单属性 4、新增的表单元素 5、表单验证 6、讨论与思考
Web前端开发》课程理论教学部分/第七讲:表单 在开发Web应用程序的过程中,表单是页面上非常重要的内容,因 为用户输人的内容都是在表单上完成的,用户和后台程序的交互也 是通过表单实现的。 本讲详细介绍HTML5中表单的元素、属性,以及HTML5新增增加 和扩展的元素和属性,并对表单验证、表单行为等内容进行了介绍 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 HTML使用表单向服务器提交请求,表单、表单控件的主要作用就是 收集用户输人,当用户提交表单时,用户输人的内容将被作为请求 参数提交到远程服务器。因此,在Web编程中,表单主要用于收集 用户输人的数据。 表单是进行用户交互的主要途径,因此表单在Web开发中有着重要 的意义。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.1表单元素与表单属性 元素介绍 form元素用于生成输人表单,该元素不会生成可视化的部分。 在HTML5规范以前,其他的表单控件都必须放置在该元素内部。 HTML5之后,表单元素增加了form属性,所以可以单独存在。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.1表单元素与表单属性 主要属性 (1) action:指定当点击表单内的¨确认”或“提交”按钮时,该 表单将提交给 action指定的程序来接受和响应。该属性值可以是一个 相对路径或者URL。 (2) method:指定提交该表单时,采用的数据传输方式,即提交 表单时发送何种类型的请求。该属性值为“GET”或“PoST”。 (3)name:指定表单的唯一名称。 4) target:指定使用哪种方式来打开 action指定的响应程序页面 (5) enctype:指定表单内的文字编码方式。该属性值为 application/x-www-form- urlencode”、“ multipart/form- data”、“ text/plain”。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.1表单元素与表单属性 操作演示: 示例7-1:表单提交方式 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.2标签 元素介绍 label元素主要用在表单元素中定义标签,以实现对其他表单元素的 说明。 元素说明 (1)元素可以使用id、 style、 class等核心属性,但通常不 需要 value属性,因为该元素不传递值。 2)元素只是输出了文本内容。使用该标签而不直接使用 文字内容的原因在于,使用该标签可以使得和该元素相关联的元素 形成焦点。部分浏览器是支持。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.2标签 操作演示: 示例7-2:标签 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4
Web前端开发》课程理论教学部分/第七讲:表单 表单基础 1.3按钮 元素介绍 button元素用于定义一个按钮,在该元素内部可以包含普通文本 文本格式化标签、图像等内容。 主要属性 (1) disabled:指定该元素是否可用。在进行权限管理时,可以指 定该元素不可用等。 (2)name:指定该元素的唯一名称。 (3)type:指定该元素所定义的按钮类型,属性值是“ button” reset”、“ submit”之一。 (4) value:指定该元素的按钮初始值 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4