Web前端开发技术与实践 第5章：表单 阮晓龙 /

Presentation on theme: "Web前端开发技术与实践 第5章：表单 阮晓龙 /"— Presentation transcript:

1 Web前端开发技术与实践 第5章：表单 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

2 本章主要内容 表单基础 使用form元素 使用input元素 案例： 高考改革方案调查网页的实现 智能表单（用户注册）

3 1.表单基础 1.1表单 <form>元素用于声明一个包含表单元素的区域。该元素并不会生成可视部分，却允许用户在该区域中添加可输入信息的表单控件元素。 <form>元素中常用的属性： 核心属性：id、style、class等。 事件属性：onclick等。 <form>元素指定的其他属性：action、method、enctype、name以及target。

4 1.表单基础 <form>元素指定的其他属性： action：指定当点击表单内的【确认】按钮时，该表单信息被提交到哪个地址。
1.1表单 <form>元素指定的其他属性： action：指定当点击表单内的【确认】按钮时，该表单信息被提交到哪个地址。 method：指定提交表单时发送何种类型的请求。 GET请求：把表单数据放在URL中，对长度和数据值编码有所限制。 POST请求：把表单数据放在HTTP请求体中，并且没有长度限制。 enctype：可指定表单进行编码时所使用的字符集。 name：指定表单的唯一名称。 target：指定使用哪种方式打开目标URL。

5 1.表单基础 表单转换成请求参数的规则： 每个含有name属性的表单控件对应一个请求，没有name属性的表单控件不会生成请求参数。
1.1表单 表单转换成请求参数的规则： 每个含有name属性的表单控件对应一个请求，没有name属性的表单控件不会生成请求参数。 如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。 表单控件的name属性指定请求参数名，value属性指定请求参数值。 如果某个表单控件设置了disabled或disabled=“disabled”属性，则该表单控件不再生成请求参数。

6 现场演示： 案例5-01：利用GET方式提交表单 案例5-02：利用POST方式提交表单

7 1.表单基础 <input>元素是表单控件元素中功能最丰富的，许多的输入元素都可以使用<input>元素生成。
单行文本框：指定<input>元素的属性type为text即可。 密码输入框：指定<input>元素的属性type为password即可。 单选框：指定<input>元素的属性type为radio即可。 多选框：指定<input>元素的属性type为checkbox即可。 文件上传域：指定<input>元素的属性type为file即可。 按钮：指定<input>元素的属性type为button即可。

8 1.表单基础 <label>元素用于在表单元素中定义标签。 <label>元素指定的属性：
核心属性：id、style、class等。 事件属性：onclick等。 其他属性：for等。

9 1.表单基础 <label>元素定义标签的作用： 标签和表单控件关联的方式： 输出普通文本。
当用户单击该标签时，该元素关联的表单控件元素就会获得焦点。 标签和表单控件关联的方式： 隐式使用for属性：指定<label>元素的for属性值为所关联表单控件id的属性值。 显式关联：将普通文本、表单控件一起放在<label>元素内部即可。

10 现场演示： 案例5-03：表单标签

11 1.表单基础 <button>元素用于定义按钮，在该元素的内部可以包含普通文本、文本格式化标签、图像等。
核心属性：id、style、class等。 事件属性：onclick等。 其他属性： disabled：指定是否禁用此按钮。 name：指定该按钮的唯一名称。 type：指定该按钮属于哪类按钮（button、reset或submit）。 value：指定该按钮的初始值，此值可通过脚本进行修改。

12 现场演示： 案例5-04：表单按钮

13 1.表单基础 <select >元素用于创建列表框或下拉菜单，该元素必须和<option>元素结合使用。
核心属性：id、style、class等。 事件属性：onchange等。 其他属性： disabled：设置禁用该列表框和下拉菜单。 multiple：设置该列表框和下拉菜单是否允许多选。 size：指定该列表框内可同时显示多少个列表项。

14 1.表单基础 <select >元素中只能包含以下两种子元素： <option>元素：用于定义列表框选项或菜单项。
核心属性：id、style、class等。 事件属性：onclick等。 其他属性： disabled：指定禁用该选项，该属性的值只能是disabled。 selected：指定该列表项初始状态是否处于被选中状态。。 value：指定该选项对应的请求参数值。

15 1.表单基础 <select >元素中只能包含以下两种子元素： <optgroup>元素指定的属性：
核心属性：id、style、class等。 事件属性：onclick等。 其他属性： label：指定该选项组的标签，这个属性为必填属性。 disabled：设置禁用该选项组里的所有选项，属性值只能是disabled或省略该属性值。

16 现场演示： 案例5-05：列表与下拉菜单

17 1.表单基础 <textarea>元素用于生成多行文本域。 核心属性：id、style、class等。
事件属性：onclick（响应事件）、onselect（响应文本域内文本被选中事件）和onchange（文本被修改事件）。 其他属性： cols：指定文本域的宽度，该属性必填。 rows：指定文本域的高度，该属性必填。 disabled：指定禁用该文本域。该属性值只能是disabled，当此文本域首次加载时禁用此文本域。 readonly：指定该文本域只读。该属性值只能是readonly。

18 现场演示： 案例5-06：文本区域

19 2.使用form元素 HTML5中新增的form元素：
datalist元素：用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。 keygen元素：密钥对生成器（key-pair generator），能够使用户验证更为可靠。 output元素：定义不同类型的输出，必须从属于某个表单。

20 现场演示： 案例5-07：datalist元素 案例5-08：keygen元素 案例5-09：output元素

21 2.使用form元素 2.2 form属性总览

22 2.使用form元素 HTML5中新增的form属性：
autocomplete属性：用于规定form中所有元素都拥有自动完成功能。当属性用于整个form时，所有从属于该form的元素便都具备自动完成功能，也可文单独元素开启或关闭功能。 novalidate属性：用于提交表单时取消整个表单的验证，即关闭对表单内所有的有效性检查，也可单独用在表单中的部分元素。

23 现场演示： 案例5-10：novalidate属性

24 3.使用input元素 3.1 input类型总览

25 3.使用input元素 在HTML5中，新增加的input输入类型：
类型：专门用于输入 地址的文本输入框，在提交表单的时候，会自动验证 输入框的值。 url类型：用于输入url地址等特殊文本的文本框。当提交表单时，若所输入的内容是url地址格式的文本，则会提交数据到服务器；否则，则展示提示信息，并不允许提交数据。

26 3.使用input元素 3.2新增input类型 使用 时，iPhone键盘样式 使用url时，iPhone键盘样式

27 现场演示： 案例5-11： 类型 案例5-12：url类型

28 3.使用input元素 input输入类型： number类型：用于输入纯数值的文本框，可以设定对所接受的数字进行限制。

29 现场演示： 案例5-13：number类型

30 3.使用input元素 input输入类型： range类型：用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。

31 现场演示： 案例5-14：range类型

32 3.使用input元素 input输入类型： 日期检出器：用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。

33 现场演示： 案例5-15：date类型 案例5-16：month类型 案例5-17：week类型 案例5-18：time类型
案例5-20：datetime类型 案例5-21：datetime-local类型

34 3.使用input元素 input输入类型： search类型：可提供用于输入搜索关键词的文本框。
tel类型：提供专门用于输入电话号码的文本框。 color类型：提供专门用于设置文本框的颜色。

35 现场演示： 案例5-22：search类型 案例5-23：tel类型 案例5-24：color类型

36 3.使用input元素 3.3 input属性总览

37

38

39 3.使用input元素 autocomplete 该属性帮助用户在input类型的输入框中实现自动完成内容输入，
某些浏览器中，可能需要首先启用浏览器本身的自动完成功能，才能使属性起作用。 属性值指定为“on”、“off”与“ ” （不指定）这三种值。

40 现场演示： 案例5-25：autocomplete类型

41 3.使用input元素 autofocus 当进行搜索时，页面中文字输入框如果能够自动获得光标焦点，可方便用户输入搜索关键词，提高用户体验。
autofocus属性值是一个布尔值，适用于文本框、复选框、单选按钮和普通按钮等所有<input>标签的类型控件。

42 现场演示： 案例5-26：autofocus类型

43 3.使用input元素 3.4新增的input属性 form form属性可以把表单内表单控件元素写在页面中任一位置，然后只需为这个元素指定form属性并设置属性值为该表单的id即可。 form属性允许规定一个表单控件元素从属于多个表单。 form属性适用于所有的input输入类型，在使用时，必须引用所属表单的id。

44 现场演示： 案例5-27：form属性

45 注：表单重写属性并不适用于所有的input输入类型，只适用于submit和image输入类型。
formaction：用于重写表单的action属性。 formenctype：用于重写表单的enctype属性。 formmethod：用于重写表单的method属性。 formnovalidate：用于重写表单的novalidate属性。 formtarget：用于重写表单的target属性。 注：表单重写属性并不适用于所有的input输入类型，只适用于submit和image输入类型。

46 现场演示： 案例5-28：新增重写属性

47 3.使用input元素 height与width List
height和width属性可用于规定image类型的input标签的图像高度和宽度，这两个属性只适用于image类型的<input>标签。 List 实现数据列表的下拉效果，用户可从列表中选择，也可自行输入。 list属性用于指定输入框所绑定的datelist元素，其值是某个datelist的id。

48 现场演示： 案例5-29：height与width属性 案例5-30：list属性

49 3.使用input元素 min、max与step
用于为包含数字或者日期的input输入类型规定限制，适用于date、pickers和range标签。 max属性：规定输入框所允许输入的最大值。 min属性：规定输入框所允许输入的最小值。 step属性：为输入框规定合法的数字间隔。

50 现场演示： 案例5-31：min、max和step属性

51 3.使用input元素 multiple pattern 支持一次选择多个文件，并且该属性同样支持新增的email类型。
允许自定义一个正则表达式，但是用户的输入必须符合正则表达式所指定的规则。 适用于text、search、url、telephone、 、password类型的<input>标签。

52 现场演示： 案例5-32：multiple属性使用

53 3.使用input元素 placeholder required
用于为输入框提供一种提示，可以描述输入框期待用户输入何种内容，在输入框为空时显示出现，而当输入框获得焦点时则会消失。 适用于text、search、url、telephone、 和password类型的<input>标签。 required 用于规定输入框填写的内容不能为空，否则不允许用户提交表单。 适用于text、search、url、telephone、 、password、datepickers、number、checkbox、radio和file类型的<input>标签。

54 现场演示： 案例5-33：pattern属性 案例5-34：placeholder属性 案例5-35：required属性

55 4.案例：高考改革方案调查问卷网页的实现 高考改革问卷调查案例效果

56 现场演示： 案例5-36：高考改革方案调查问卷网页的实现 讨论：页面结构及开发过程。 讨论：本案例的开发难点和解决思路

57 5.案例：智能表单（用户注册） 智能表单

58 现场演示： 案例5-37：智能表单（用户注册） 讨论：页面结构及开发过程。 讨论：本案例的开发难点和解决思路

59 Thanks.