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表单 口<form>元素用于声明一个包含表单元素的区域。该元素并不会 生成可视部分,却允许用户在该区域中添加可输入信息的表单 控件元素。 口<fomm>元素中常用的属性: ■核心属性:id、 style、 class等。 事件属性: onclick等。 口<form>元素指定的其他属性: action、 method、 enctype、name 以及 target 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 <form>元素用于声明一个包含表单元素的区域。该元素并不会 生成可视部分，却允许用户在该区域中添加可输入信息的表单 控件元素。 <form>元素中常用的属性： 核心属性：id、style、class等。 事件属性：onclick等。 <form>元素指定的其他属性：action、method、enctype、name 以及target。 3 1.1表单
4 1.表单基础 1.1表单 口<form>元素指定的其他属性: action:指定当点击表单内的【确认】按钮时,该表单信息被提交 到哪个地址。 method:指定提交表单时发送何种类型的请求。 口GET请求:把表单数据放在UR中,对长度和数据值编码有所限制。 口POST请求:把表单数据放在HTTP请求体中,并且没有长度限制。 enctype:可指定表单进行编码时所使用的字符集。 name:指定表单的唯一名称 target:指定使用哪种方式打开目标URL。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.表单基础 <form>元素指定的其他属性： 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表单