《HTML5表单.ppt》由会员分享，可在线阅读，更多相关《HTML5表单.ppt（46页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、目录目录l 第第1章章 网页设计理论网页设计理论l 第第2章章 HTML语言语言l 第第3章章 HTML5表单表单l 第第4章章 CSS基础基础l 第第5章章 CSS页面布局及排版页面布局及排版l 第第6章章 JavaScript基础基础l 第第7章章 JavaScript对象对象l 第第8章章 DOM技术技术l 第第9章章 JavaScript事件处理事件处理l 第第10章章 HTML5 Canvas绘制图形绘制图形l 第第11章章 HTML5音频和视频技术音频和视频技术l 第第12章章 HTML5本地数据存储本地数据存储l 第第13章章 HTML5通信通信APIl 第第14章章 HTML5
2、地理位置地理位置APIl 第第15章章 HTML5游戏开发游戏开发第第3章章 HTML5表单表单是动态网页的基础，用户可以通过表单向服务器传达自己的要求，服务器可通过表单来收集访问者的信息。本章主要讲述：l 3.1 动态网页与网页的动态效果l 3.2 表单设计基础l 3.3 表单标记l 3.4 综合实例 3.1动态网页与网页的动态效果网页的动态效果是指网页上的视觉效果，如移动的文字、横幅广告、Flash动画等，是静态网页的动态视觉效果，而动态网页则是具有交互功能的网页，例如，网站中的用户登录网页以及用户注册网页就是具有交互式功能的动态网页。交互式动态网页的工作过程是通过表单来实现的：用户在浏览
3、网页时，需要填写必要的信息，然后提交填写的信息；客户提交的信息通过Internet传送到服务器上；服务器上对应的程序对客户提交的数据进行处理，如果提交的信息有错误，则会返回错误信息，并要求用户纠正错误；当数据完整无误后，服务器反馈一个输入完成信息。1995年，HTML2标准提出了一种叫做Forms的设计。Forms设计在客户端和服务器端之间起着桥梁和纽带的作用，使应用程序能够在服务器端和客户端进行交互。服务器端和客户端的交互需要共同遵守互联网上的通信和传输协议，即http（超文本传输协议）。http协议具体来说，就是通过客户端把数据打包传到服务器端，服务器端再通过一个请求对象获取传过来的请求数
4、据，这是最基本的服务器端与客户端交互过程。3.2 表单设计基础1995年，HTML2标准提出了一种叫做Forms的设计。Forms设计在客户端和服务器端之间起着桥梁和纽带的作用，使应用程序能够在服务器端和客户端进行交互。服务器端和客户端的交互需要共同遵守互联网上的通信和传输协议，即http（超文本传输协议）。http协议具体来说，就是通过客户端把数据打包传到服务器端，服务器端再通过一个请求对象获取传过来的请求数据，这是最基本的服务器端与客户端交互过程。3.3 表单标记n基本语法： n举例： 3.3.1 表单标记n基本语法： n基本语法： n举例 3.3.1 表单标记n设置信息提交方式n基本语法
5、： n语法解释：信息提交的方式有两种，分别是：nGet：将表单的内容附加到提交地址后面，对提交信息的长度进行了限制，不能超过8192个字符。nPost：将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，没有字符限制。1.举例：3.3.1 表单标记（信息提交的编码方式）n基本语法： n语法解释：信息提交的编码方式有三种，分别是：nText / plain：以纯文本方式传送信息。nApplication / x-www-form-urlencoded：默认的编码形式。nMultipart / form-data：使用mine编码。1.举例：3.3.1 表单标记n设置信息返
6、回的窗口n基本语法： n语法解释：窗口属性即表单信息返回的窗口，有四类,分别是：_blank、_parent、_self、_topn举例： 3.3.1 表单标记n基本语法： n举例3.3.2 输入标记功能：设定表单中的文字域，可输入任何类型的文本、数字和字母。基本语法： 语法解释：name表示文字域的名称，maxlength表示文字域的最大输入字符数，size表示文字域的宽度（以字符为单位） ，value表示文字域的默认值。举例： 3.3.2 输入标记功能：表示单行数字文本框，其中只能输入数字，可以设置最小值min和最大值max属性。例如： 语法解释：其中value = 105表示当前文本框数
7、值为105，min = 100表示文本框中输入的最小值为100，max = 200表示文本框中输入的最大值为200。3.3.2 输入标记n功能：表示电子邮件输入框，可以自动校验输入的是否是有效的电子邮箱。如果输入非法电子邮件地址，提交表单时会提示错误。n例如：nEmail: 3.3.2 输入标记n功能：用于输入URL地址，如果输入不合法的URL，提交时会提示警告信息。n例如：n3.3.2 输入标记n功能：颜色选择器，点击后会弹出一个带颜色的选择器。n例如：n3.3.2 输入标记n功能：选择一个范围的数字，默认范围为0到100，也可以通过min和max设置范围的最小值和最大值。n例如：n3.3.
8、2 输入标记功能：设定表单中的密码域，输入到文本域中的文字均以*或圆点显示。基本语法： 语法解释：name表示密码域的名称，maxlength表示密码域的最大输入字符数，size表示密码域的宽度（以字符为单位），value表示密码域的默认值。举例： 3.3.2 输入标记功能：让用户在域中填写自己的硬盘中的文件路径，然后通过表单上传。基本语法： 举例：3.3.2 输入标记 (以方框表示)功能： 让用户进行选择的区域，可选多，也可选一。基本语法： 语法解释：checked表示此项被默认选中，value表示选中项目后传送到服务器的值。举例：音乐 旅游3.3.2 输入标记 (以圆框表示)功能： 让用户
9、进行选择的区域，只可选一。基本语法： 举例： 广州 深圳 北京3.3.2 输入标记n基本语法：n语法解释：value表示按钮上显示的文字。n举例： 3.3.2 输入标记基本语法：语法解释：value表示按钮上显示的文字。举例： 3.3.2 输入标记基本语法： 语法解释：value表示按钮上显示的文字。举例： 3.3.2 输入标记功能：可以用于提交按钮位置上的图片。基本语法： 语法解释：src表示图片的路径。举例：3.3.2 输入标记功能：在页面中是不可见的，可以用于收集或发送信息，以利于被处理表单的程序使用,它不会显示结果，只是用于传送数据的标记。基本语法： 语法解释：value表示提交表单时
10、隐藏域返回的值。举例：3.3.2 输入标记n该属性规定当页面加载时，input元素自动获得输入焦点。autofocus是一个布尔值，只需插入到对应的表单项后面即可。n注意：autofocus属性不能加到type = hidden的后面，且一个页面只能有一个设置为autofocus属性的表单项。3.3.2 输入标记ndisabled属性值是一个布尔值，如果为true则表示禁止使用该表单控件，当前文本框即成灰色，无法输入，disabled属性同样不能加到type = hidden的后面。3.3.2 输入标记n指定输入项所属的表单名，例如：nnn表示name = username的表单项提交到的表单
11、中。3.3.2 输入标记nlist属性可结合标记使用，以获得当前文本框的默认值列表，自动实现下拉选择输入。当下拉框获取焦点之后，就可以把已有的数据源对象中的内容呈现出来，可以用鼠标也可以用键盘选择这些内容项。3.3.2 输入标记n该属性规定输入值的格式，例如：nn表示只允许输入0到9的数字格式。3.3.2 输入标记n该属性表示数字递增，控制输入的值按照固定的值递增，例如：nn输入框会变成一个以3递增的选择项。3.3.2 输入标记n该属性表示输入提示，类似value属性，但placeholder属性只是提示文字，不能作为数据的一部分输入，点击文本框时，placeholder中的值会消失；valu
12、e属性不是提示文字，而是已经输入的一部分，点击文本框时，value中的值不会消失。例如：n3.3.2 输入标记n该属性表示只读状态，是一个布尔值，类似于disabled，加入了readonly属性的输入项不能输入，也不会呈灰色，会显示其默认值。例如：n期数：3.3.2 输入标记n该属性表示必填项，是一个布尔值，如果不输入内容就提交，则会提示错误。Required属性和前面学到的pattern、min、max等属性一样，主要是用于表单验证。例如：nn如果此项为空，则会有相应提示信息3.3.2 输入标记n功能：是一种供用户选择的工具，可以显示一定数量的选项，用滚动轴表示；也可以只显示一个选项，用下
13、拉菜单表示。3.3.3下拉列表框标记n基本语法： 选项选项 选项选项 n语法解释：name表示菜单和列表的名称，size表示显示选项的数目，multiple表示列表中的项目可多选，value表示选项返回的值，selected表示默认选项。3.3.3下拉列表框标记n举例 size=9 multiple option value= selected北京北京 option value= 南京南京 option value= 广州广州 option value= 深圳深圳 /select3.3.3下拉列表框标记功能：用来制作多行的文本块，可以在其中输入更多的文本。基本语法：语法解释：name表示文本块
14、的名称，rows表示文本块的行数，cols表示文本块的列数，value表示文本块的默认值。举例：您的意见反馈3.3.4多行文本框标记n标记用于从逻辑上将表单中的元素组合起来，并在周围绘制边框，方便在一个表单中表单项较多的情况下进行区分，与分组标题标记标记结合使用。n例如：nn n 注册基本信息: 姓名: n 电话: n 生日: n n n 注册详细信息:n 家庭住址: n 任职公司: n 电子邮件: n n3.3.5表单分组标记与分组标题标记n标记表示一个按钮，使用时必须与同时使用，在内部，可以放置文本或图像。这是该元素与使用标记创建的按钮之间的不同之处。n例如：n立即购买3.3.6按钮标记n
15、标记的for属性应当与相关元素的id属性相同，即将for属性的值设置为相关元素的 id 属性的值。例如：nn Malen n n Femalen n3.3.7 绑定标记n标记是HTML5中的新标记，标记提供了用于显示计算结果的位置，或者提供脚本执行的结果输出。在HTML5之前，一般是通过innerHTML将这些结果放置在或标记内显示。为了明确指定标记与表单控件相关联，可以用类似标记的方法，通过for属性指定需要关联的表单控件即可。例如：nn3.3.8 输出标记n标记是HTML5的新标记，用于生成表单的密钥对。当提交表单时，私钥存储在本地，公钥发送到服务器。IE和Safari浏览器不支持该标记。标记类似于传统的MD5加密，点击提交按钮后，将整个表单的数据以加密的方式传送给服务器，标记支持自选加密级别。n例如：nn 用户名: n 密码: n 加密: n n3.3.9 生成秘钥对标记