Web前端开发技术与实践 第5章:表单 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
Web前端开发技术与实践 第5章：表单 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口表单基础 口使用form元素 口使用 Input元素 口案例 米 高考改革方案调查网页的实现 案例: 智能表单(用户注册) 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 表单基础 使用form元素 使用input元素 案例： 高考改革方案调查网页的实现 案例： 智能表单（用户注册） 2
3 1.表单基础 1.1表单 口元素用于声明一个包含表单元素的区域。该元素并不会 生成可视部分,却允许用户在该区域中添加可输入信息的表单 控件元素。 口元素中常用的属性: ■核心属性:id、 style、 class等。 事件属性: onclick等。 口元素指定的其他属性: action、 method、 enctype、name 以及 target 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 元素用于声明一个包含表单元素的区域。该元素并不会 生成可视部分，却允许用户在该区域中添加可输入信息的表单 控件元素。 元素中常用的属性： 核心属性：id、style、class等。 事件属性：onclick等。 元素指定的其他属性：action、method、enctype、name 以及target。 3 1.1表单
4 1.表单基础 1.1表单 口元素指定的其他属性: action:指定当点击表单内的【确认】按钮时,该表单信息被提交 到哪个地址。 method:指定提交表单时发送何种类型的请求。 口GET请求:把表单数据放在UR中,对长度和数据值编码有所限制。 口POST请求:把表单数据放在HTTP请求体中,并且没有长度限制。 enctype:可指定表单进行编码时所使用的字符集。 name:指定表单的唯一名称 target:指定使用哪种方式打开目标URL。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 元素指定的其他属性： action：指定当点击表单内的【确认】按钮时，该表单信息被提交 到哪个地址。 method：指定提交表单时发送何种类型的请求。 GET请求：把表单数据放在URL中，对长度和数据值编码有所限制。 POST请求：把表单数据放在HTTP请求体中，并且没有长度限制。 enctype：可指定表单进行编码时所使用的字符集。 name：指定表单的唯一名称。 target：指定使用哪种方式打开目标URL。 4 1.1表单
1.表单基础 1.1表单 口表单转换成请求参数的规则: ■每个含有name属性的表单控件对应一个请求,没有nane属性的表单 控件不会生成请求参数。 如果多个表单控件有相同的name属性,则多个表单控件只生成 请求参数,只是该参数有多个值。 表单控件的nane属性指定请求参数名, value属性指定请求参数值。 ■如果某个表单控件设置了 disabled或 disabled=“ disabled”属性, 则该表单控件不再生成请求参数。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 表单转换成请求参数的规则： 每个含有name属性的表单控件对应一个请求，没有name属性的表单 控件不会生成请求参数。 如果多个表单控件有相同的name属性，则多个表单控件只生成一个 请求参数，只是该参数有多个值。 表单控件的name属性指定请求参数名，value属性指定请求参数值。 如果某个表单控件设置了disabled或disabled=“disabled”属性， 则该表单控件不再生成请求参数。 5 1.1表单
十 2 现场演示: 案例5-01:利用GET方式提交表单 案例5-02:利用P0ST方式提交表单 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 6 现场演示： 案例5-01：利用GET方式提交表单 案例5-02：利用POST方式提交表单
1.表单基础 12 Input元素 口元素是表单控件元素中功能最丰富的,许多的输入元素 都可以使用元素生成。 ■单行文本框:指定元素的属性type为text即可。 ■密码输入框:指定元素的属性type为 password即可。 单选框:指定元素的属性type为 radio即可。 多选框:指定元素的属性type为 checkbox即可。 文件上传域:指定元素的属性type为file即可。 按钮:指定元素的属性type为 button即可。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 元素是表单控件元素中功能最丰富的，许多的输入元素 都可以使用元素生成。 单行文本框：指定元素的属性type为text即可。 密码输入框：指定元素的属性type为password即可。 单选框：指定元素的属性type为radio即可。 多选框：指定元素的属性type为checkbox即可。 文件上传域：指定元素的属性type为file即可。 按钮：指定元素的属性type为button即可。 7 1.2 input元素
8 1.表单基础 13 label元素 元素用于在表单元素中定义标签。 口元素指定的属性: ■核心属性:id、 style、 class等。 ■事件属性: onclick等。 其他属性:for等。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 元素用于在表单元素中定义标签。 元素指定的属性： 核心属性：id、style、class等。 事件属性：onclick等。 其他属性：for等。 8 1.3 label元素
9 1.表单基础 13 label元素 口元素定义标签的作用: ■输出普通文本。 当用户单击该标签时,该元素关联的表单控件元素就会获得焦点。 口标签和表单控件关联的方式 隐式使用for属性:指定元素的for属性值为所关联表单控 件id的属性值。 显式关联:将普通文本、表单控件一起放在元素内部即可。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 元素定义标签的作用： 输出普通文本。 当用户单击该标签时，该元素关联的表单控件元素就会获得焦点。 标签和表单控件关联的方式： 隐式使用for属性：指定元素的for属性值为所关联表单控 件id的属性值。 显式关联：将普通文本、表单控件一起放在元素内部即可。 9 1.3 label元素
10 十 2 现场演示: ■案例5-03:表单标签 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 10 现场演示： 案例5-03：表单标签