《Web前端开发》课程理论教学部分 第七讲:表单 学时计划:2学时理论,1学时实验 (实验四:在网页中使用表单和多媒体) 教学大纲: 1、表单基础 2、 Input 3、新增的表单属性 4、新增的表单元素 5、表单验证 6、讨论与思考 在开发Web应用程序的过程中,表单是页面上非常重要的内容 因为用户输入的内容都是在表单上完成的,用户和后台程序的交互也 是通过表单实现的。 本讲详细介绍HTML5中表单的元素、属性,以及IIML5新增增 加和扩展的元素和属性,并对表单验证、表单行为等内容进行了介绍。 表单基础 HTML使用表单向服务器提交请求,表单、表单控件的主要作用 就是收集用户输入,当用户提交表单时,用户输入的内容将被作为请 求参数提交到远程服务器。因此,在Web编程中,表单主要用于收集 用户输入的数据。 表单是进行用户交互的主要途径,因此表单在Web开发中有着重 要的意义。 1.1表单元素与表单属性 元素介绍: form元素用于生成输入表单,该元素不会生成可视化的部分。 在HIML5规范以前,其他的表单控件都必须放置在该元素内部。HTML 5之后,表单元素增加了form属性,所以可以单独存在。 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51 xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第七讲：表单 学时计划：2 学时 理论，1 学时 实验 （实验四：在网页中使用表单和多媒体） 教学大纲： 1、表单基础 2、input 3、新增的表单属性 4、新增的表单元素 5、表单验证 6、讨论与思考 在开发 Web 应用程序的过程中，表单是页面上非常重要的内容， 因为用户输入的内容都是在表单上完成的，用户和后台程序的交互也 是通过表单实现的。 本讲详细介绍 HTML 5 中表单的元素、属性，以及 HTML 5 新增增 加和扩展的元素和属性，并对表单验证、表单行为等内容进行了介绍。 一、表单基础 HTML 使用表单向服务器提交请求，表单、表单控件的主要作用 就是收集用户输入，当用户提交表单时，用户输入的内容将被作为请 求参数提交到远程服务器。因此，在 Web 编程中，表单主要用于收集 用户输入的数据。 表单是进行用户交互的主要途径，因此表单在 Web 开发中有着重 要的意义。 1.1 表单元素与表单属性 元素介绍： form 元素用于生成输入表单，该元素不会生成可视化的部分。 在 HTML 5 规范以前，其他的表单控件都必须放置在该元素内部。HTML 5 之后，表单元素增加了 form 属性，所以可以单独存在
主要属性 (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 案例: 示例7-1:表单提交方式 使用GET方式提交表单 表单属性GET p>账号: p A: p> 利用POST方式提交表单 表单属性-POsT</ Ititle 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 主要属性： （1）action：指定当点击表单内的“确认”或“提交”按钮时， 该表单将提交给 action 指定的程序来接受和响应。该属性值可以是 一个相对路径或者 URL。 （2）method：指定提交该表单时，采用的数据传输方式，即提 交表单时发送何种类型的请求。该属性值为“GET”或“POST”。 （3）name：指定表单的唯一名称。 （4）target：指定使用哪种方式来打开 action 指定的响应程序 页面。 （5）enctype：指定表单内的文字编码方式。该属性值为 “application/x-www-form-urlencoded”、“multipart/form-data”、 “text/plain”。 案例： 示例 7-1：表单提交方式 使用 GET 方式提交表单： 表单属性-GET 账号： 口令： 利用 POST 方式提交表单： 表单属性-POST
p>账号: 口令: p> 1.2标签 元素介绍: label元素主要用在表单元素中定义标签,以实现对其他表单元 素的说明。 元素说明: (1)元素可以使用id、 style、 class等核心属性,但 通常不需要 value属性,因为该元素不传递值。 (2) label 账号: 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 账号： 口令： 1.2 标签 元素介绍： label 元素主要用在表单元素中定义标签，以实现对其他表单元 素的说明。 元素说明： （1）元素可以使用 id、style、class 等核心属性，但 通常不需要 value 属性，因为该元素不传递值。 （2）元素只是输出了文本内容。使用该标签而不直接使 用文字内容的原因在于，使用该标签可以使得和该元素相关联的元素 形成焦点。部分浏览器是支持。 案例： 示例 7-2：标签 label 账号：
口令: p> input type=" submit"name=" Submit" value="提交表单"> 1.3按钮 元素介绍 button元素用于定义一个按钮,在该元素内部可以包含普通文 本、文本格式化标签、图像等内容。 主要属性 (1) disabled:指定该元素是否可用。在进行权限管理时,可 以指定该元素不可用等。 (2)name:指定该元素的唯一名称。 (3)type:指定该元素所定义的按钮类型,属性值是“ button”、 reset submit 之 (4) value:指定该元素的按钮初始值。 元素说明: (1)和元素都可以实现按钮功能,但前者的功 能更加全面。 (2)不要在元素内放置图像映射,鼠标和键盘的一些 操作会影响按钮的行为。 (3)可以在元素内放置图像,实现图像按钮。 案例: 示例7-3:按钮 button bod 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb c
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 口令： 1.3 按钮 元素介绍： button 元素用于定义一个按钮，在该元素内部可以包含普通文 本、文本格式化标签、图像等内容。 主要属性： （1）disabled：指定该元素是否可用。在进行权限管理时，可 以指定该元素不可用等。 （2）name：指定该元素的唯一名称。 （3）type：指定该元素所定义的按钮类型，属性值是“button”、 “reset”、“submit”之一。 （4）value：指定该元素的按钮初始值。 元素说明： （1）和元素都可以实现按钮功能，但前者的功 能更加全面。 （2）不要在元素内放置图像映射，鼠标和键盘的一些 操作会影响按钮的行为。 （3）可以在元素内放置图像，实现图像按钮。 案例： 示例 7-3：按钮 button
mg src="images/UserName.png"> mg src="images/User PWD. png"> 1.4列表框与下拉菜单 元素介绍: select元素用于创建列表框或下拉菜单,该元素需要和 option 元素结合使用,每个 option元素代表一个列表项或菜单项。 select元素只能够包含两种子元素 元素:用于定义列表框或菜单项。 元素:用于定义列表项或菜单组项。该元素内包含 option>元素构成组。 主要属性: (1)元素可以指定ID、 style、 class等属性,还可以 指定 onchange事件属性,当该列表框或下拉列表项内的选中选项发 生改变时,出发 onchange事件 元素的其他属性有: disabled:指定该元素禁止使用。 multiple:指定该元素内的选项是否可以是多项选择,默认是单 向选择。 size:指定该列表框内可以同时显示多少个列表项。 (2)元素可以指定ID、 style、 class等属性,还可以 指定 onclick等事件属性。 元素的其他属性有: disabled:指定该元素禁用。 selected:指定该选项初始为选中状态。 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.4 列表框与下拉菜单 元素介绍： select 元素用于创建列表框或下拉菜单，该元素需要和 option 元素结合使用，每个 option 元素代表一个列表项或菜单项。 select 元素只能够包含两种子元素： 元素：用于定义列表框或菜单项。 元素：用于定义列表项或菜单组项。该元素内包含 元素构成组。 主要属性： （1）元素可以指定 ID、style、class 等属性，还可以 指定 onchange 事件属性，当该列表框或下拉列表项内的选中选项发 生改变时，出发 onchange 事件。 元素的其他属性有： disabled：指定该元素禁止使用。 multiple：指定该元素内的选项是否可以是多项选择，默认是单 向选择。 size：指定该列表框内可以同时显示多少个列表项。 （2）元素可以指定 ID、style、class 等属性，还可以 指定 onclick 等事件属性。 元素的其他属性有： disabled：指定该元素禁用。 selected：指定该选项初始为选中状态
value:指定该选项被选中时对应的值。 (3)元素可以指定ID、 style、 class等属性,还可 以指定 onclick等事件属性, optgroup>元素的其他属性有: lable:指定该选项组的标签,此属性为必须填写的项目。 diabled:指定该选项组禁止使用。 案例 例7-4:列表框与下拉菜单 html> select 用户注册 账号名称: 账号口令: 重复口令: 所在地区 北京 上海 广州河南 河北 亚洲 非洲 ption value=" Meizhou">美洲 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn value：指定该选项被选中时对应的值。 （3）元素可以指定 ID、style、class 等属性，还可 以指定 onclick 等事件属性。 元素的其他属性有： lable：指定该选项组的标签，此属性为必须填写的项目。 diabled：指定该选项组禁止使用。 案例： 示例 7-4：列表框与下拉菜单 select 用户注册 账号名称： 账号口令： 重复口令： 所在地区： 北京 上海 广州 河南 河北 亚洲 非洲 美洲
1.5文本区域 元素介绍: textarea元素用于生成多行文本框 主要属性: (1)元素可以指定ID、 style、 class等元素,还可 以指定 onclick等事件属性, (2)cols:指定文本域的宽度,此属性为必须填写的项目。 (3)rows:指定文本域的高度,此属性为必须填写的项目。 (4) disabled:指定该元素禁止使用。 (5) readonly:指定该元素为只读状态 案例: 示例7-5:文本框 textarea 新闻标题: 新闻内容:请在此 输入新闻内容,不得少于80个字。 p>发布说明:请认真填写新闻内容,不要进行强制排版。感谢您的支持。此文本 框为只读属性。 二、 input 表单中最重要的元素是 Input。该元素通过使用type属性,可 以改变元素的性质。 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.5 文本区域 元素介绍： textarea 元素用于生成多行文本框。 主要属性： （1）元素可以指定 ID、style、class 等元素，还可 以指定 onclick 等事件属性。 （2）cols：指定文本域的宽度，此属性为必须填写的项目。 （3）rows：指定文本域的高度，此属性为必须填写的项目。 （4）disabled：指定该元素禁止使用。 （5）readonly：指定该元素为只读状态。 案例： 示例 7-5：文本框 textarea 新闻标题： 新闻内容：请在此 输入新闻内容，不得少于 80 个字。 发布说明： 请认真填写新闻内容，不要进行强制排版。感谢您的支持。此文本 框为只读属性。 二、input 表单中最重要的元素是 input。该元素通过使用 type 属性，可 以改变元素的性质
在HTML5中,大幅度的增加和改良了 input元素的种类,并且 可以通过新增的这些种类,实现常用的需要 JavaScript才能够实现 的功能。 本部分主要介绍 input元素的各种类型 2. linput的属性 表7-1 input的属性 属性 属性值 描述 规定可通过文件上传控件提交的文件类型。 ist_of_mime_types(仅适用于seme alt 规定图像输入控件的替代文本。 (仅适用于type="mage") 规定是否使用输入字段的自动完成功能 规定输入字段在页面加载时是否获得焦点 autofocus autofocus (不适用于type=" hidden") 规定当页面加载时是否预先选择该 input元素 checked checked (适用于type=" checkbox"或type=" radio") 规定当页面加载时是否禁用该 input元素 disabled (不适用于type=" hidden") form formname 规定输入字段所属的一个或多个表单。 覆盖表单的 action属性 formation (适用于tvpe=" 'submit"和type=" image") 覆盖表单的 enctype属性 见注释 (适用于type=" submit"和type=" Image") 覆盖表单的 method属性。 formmethod (适用于type=" submit"和tpe=" Image") 覆盖表单的 novalidate属性。 formnovalidate 如果使用该属性,则提交表单时不进行验证 覆盖表单的 target属性。 formtarget (适用于tvpe=" 'submit"和type=" image") height 定义 input字段的高度。(适用于type" image") datalist-id 引用包含输入字段的预定义选项的 datalist。 number 规定输入字段的最大值。 max 请与"min"属性配合使用,来创建合法值的范围 number 规定文本字段中允许的最大字符数 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 在 HTML 5 中，大幅度的增加和改良了 input 元素的种类，并且 可以通过新增的这些种类，实现常用的需要 JavaScript 才能够实现 的功能。 本部分主要介绍 input 元素的各种类型。 2.1input 的属性 表 7-1 input 的属性 属性 属性值 描述 accept list_of_mime_types 规定可通过文件上传控件提交的文件类型。 （仅适用于 type="file"） alt text 规定图像输入控件的替代文本。 （仅适用于 type="image"） autocomplete on off 规定是否使用输入字段的自动完成功能。 autofocus autofocus 规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） checked checked 规定当页面加载时是否预先选择该 input 元素。 （适用于 type="checkbox" 或 type="radio"） disabled disabled 规定当页面加载时是否禁用该 input 元素。 （不适用于 type="hidden"） form formname 规定输入字段所属的一个或多个表单。 formaction URL 覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） formenctype 见注释 覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） formmethod get post 覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） formnovalidate formnovalidate 覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 formtarget _blank _self _parent _top framename 覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） height pixels % 定义 input 字段的高度。（适用于 type="image"） list datalist-id 引用包含输入字段的预定义选项的 datalist 。 max number date 规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 maxlength number 规定文本字段中允许的最大字符数
number 规定输入字段的最小值 min 请与"max"属性配合使用,来创建合法值的范围 multiple 如果使用该属性,则允许一个以上的值 规定 input元素的名称 name name name属性用于在提交表单时搜集字段的值。 规定输入字段的值的模式或格式。 pattern regexp_ pattern 例如 pattern="o-9]"表示输入值必须是0与9之间的数字 anode 规定帮助用户填写输入字段的提示, readonly readonly 指示字段的值无法修改。 equired equir 指示输入字段的值是必需的 number of char 规定输入字段中的可见字符数 RL 规定图像的URL。(适用于type=" Image") number 规定输入字的的合法数字间隔 datetime datetime-local month typ 规定 input元素的类型 radio submit 对于按钮:规定按钮上的文本 对于图像按钮:传递到脚本的字段的符号结果 对于复选框和单选按钮:定义 input元素被点击时的结果 对于隐藏、密码和文本字段:规定元素的默认值 注释:不能与tpe"fl"一同使用 注释:对于type=" checkbox"以及type=" radio",是必需的 定义 input字段的宽度。(适用于type="mage") 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn min number date 规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 multiple multiple 如果使用该属性，则允许一个以上的值。 name field_name 规定 input 元素的名称。 name 属性用于在提交表单时搜集字段的值。 pattern regexp_pattern 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 placeholder text 规定帮助用户填写输入字段的提示。 readonly readonly 指示字段的值无法修改。 required required 指示输入字段的值是必需的。 size number_of_char 规定输入字段中的可见字符数。 src URL 规定图像的 URL。（适用于 type="image"） step number 规定输入字的的合法数字间隔。 type button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week 规定 input 元素的类型。 value value 对于按钮：规定按钮上的文本 对于图像按钮：传递到脚本的字段的符号结果 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏、密码和文本字段：规定元素的默认值。 注释：不能与 type="file" 一同使用。 注释：对于 type="checkbox" 以及 type="radio"，是必需的。 width pixels % 定义 input 字段的宽度。（适用于 type="image"）
2.2电子邮件类型 元素介绍: 在HTML4中,如果需要输入电子邮件地址,只能够使用text类 型。HIML5中新增加电子邮件类型。浏览器会自动检验输入的内容 是否为合法的电子邮件地址,如果不能够通过验证,则表单就不会发 送。 案例: 示例7-6:电子邮件类型 p>请输入电子邮件地址: 2.3URL类型 元素介绍 URL类型和emai1类型相同,但是主要是针对于输入网址。该类 型只接受绝对URL,如果输入无效的URL,会提示错误 案例: 示例7-7:URL类型 URL类型</tte bod 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.2 电子邮件类型 元素介绍： 在 HTML 4 中，如果需要输入电子邮件地址，只能够使用 text 类 型。HTML 5 中新增加电子邮件类型。浏览器会自动检验输入的内容 是否为合法的电子邮件地址，如果不能够通过验证，则表单就不会发 送。 案例： 示例 7-6：电子邮件类型 电子邮件类型 请输入电子邮件地址： 2.3URL 类型 元素介绍： URL 类型和 email 类型相同，但是主要是针对于输入网址。该类 型只接受绝对 URL，如果输入无效的 URL，会提示错误。 案例： 示例 7-7：URL 类型 URL 类型