计算机文化

Size: px

Start display at page:

Download "计算机文化"

谨泱索
5 years ago
Views:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33 33 现场演示 : 案例 5-15:date 类型案例 5-16:month 类型案例 5-17:week 类型案例 5-18:time 类型案例 5-19:time 限定时间案例 5-20:datetime 类型案例 5-21:datetime-local 类型

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

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

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

37 37

38 38

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

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

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

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

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

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

45 45 3. 使用 input 元素 3.4 新增的 input 属性表单重写 formaction: 用于重写表单的 action 属性 formenctype: 用于重写表单的 enctype 属性 formmethod: 用于重写表单的 method 属性 formnovalidate: 用于重写表单的 novalidate 属性 formtarget: 用于重写表单的 target 属性注 : 表单重写属性并不适用于所有的 input 输入类型, 只适用于 submit 和 image 输入类型

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

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

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

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

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

51 51 3. 使用 input 元素 3.4 新增的 input 属性 multiple 支持一次选择多个文件, 并且该属性同样支持新增的类型 pattern 用于验证 input 类型输入框中用户输入的内容是否与自定义的正则表达式相匹配允许自定义一个正则表达式, 但是用户的输入必须符合正则表达式所指定的规则适用于 text search url telephone password 类型的 <input> 标签

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

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

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

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

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

57 57 5. 案例 : 智能表单 ( 用户注册 ) 智能表单

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

59 59

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值