移动WEB开发之表单元素.pptx

目录 表单元素的类型 表单元素中的属性 实例5-4：在网页中生成一个密钥 实例5-1：验证输入的是否是一个URL地址 实例5-2：验证输入的数值是否合法 实例5-3：实现一个简单的乘法计算器 综合实例：制作一个颜色滑动控制器 1 表单元素的类型 HTML5提供了多个新的表单输入类型，这些新类型为我们提供了更好的输入控制和验证功能。在HTML5标记语言中，包含了如下所示的输入类型。 email url number range Date pickers（date，month，week，time，datetime，datetime-local） search color 1 表单元素的类型 5.1.1 email类型 在HTML5标记语言中，email类型用于包含Email地址的输入域。如果将input元素中的“type”类型设置为“email”，将在页面中创建一个专门用于输入邮件地址的文本输入框。在显示页面时，这个文本框与其他文本框没有区别，专门用于接收Email地址信息。当提交表单时，会自动检测文本框中的内容是否符合Email邮件地址格式，如果不符则提示相应错误信息。 在现实应用中，在提交表单之前不会检测email类型文本框的内容是否为空，只有在不为空的情况下才会检测其内容是否符合标准的Email格式。如果将该元素的“multiple”属性设置为“true”，则表示允许用户输入一串用逗号分隔的Email地址。在提交表单时，会自动验证Email域中的值是否合法。 1 表单元素的类型 5.1.2 url类型 在HTML5标记语言中，url类型用于包含URL地址的输入域。在提交表单时，会自动验证url域中的值。在输入元素input中，“url”类型是一种新增的类型，该类型表示input元素是一个专门用于输入Web站点地址的输入框。Web地址的格式与普通文本有些区别，例如文本中有反斜杠“/”和点“.”。 为了确保“url”类型的输入框能够正确提交符合格式的内容，表单在提交数据前会自动验证其内容格式的有效性。如果不符合对应的格式，则会出现相应的错误提示信息。并且与“email”类型一样，url的有效性检测并不会判断输入框的内容是否为空，而是针对非空内容进行格式检测。 1 表单元素的类型 5.1.3 number类型 在HTML5标记语言中，number类型用于设置包含数值的输入域，通过此类型能够设置对所接受的数字的限定。在网页设计应用中，可以使用下表所示的属性来设置对数字类型的限定。 number类型支持的属性 1 表单元素的类型 在HTML4及以前的版本中，如果想要在表单中输入一个指定范围的整数，需要在表单提交前使用代码进行数据检测，以确定输入框中是否是一个符合要求的整数。而在HTML5标记语言中，只要创建一个“number”类型的input元素便可以实现以上操作。该类型的元素在HTML5中还将显示一个微调控件。如果指定了最大与最小范围值，就可以点击微调控件的上限与下限按钮，以指定的步长（step）增加或减少输入框中的值，极大方便了用户的操作。 在“number”类型的输入框中，不能输入其他非数字型的字符，并且当输入的数字大于设定的最大值或小于设置的最小值时，都将出现数字输入出错的提示信息。同样道理，该类型不进行输入内容是否为空值的自动检测。 1 表单元素的类型 5.1.4 Date Pickers（数据检出器） 在HTML5标记语言中，使用Date Pickers（数据检出器）可以为用户提供日期和时间输入框。Date Pickers的意义是可以避免用打字的方式输入日期和时间，能够大大提高处理数据的效率。在HTML5中提供了多个可供选取日期和时间的新输入类型，具体说明如下： date：选取日、月、年。 month：选取月、年。 week：选取周和年。 time：选取时间（小时和分钟）。 datetime：选取时间、日、月、年（UTC时间）。 datetime-local：选取时间、日、月、年（本地时间）。 1 表单元素的类型 在HTML4之前的版本中，没有专门用于显示日期的文本输入框，开发人员需要编写大量的JavaScript代码或导入相应的插件。而在HTML5中，只需要将input元素的类型设置为“date”，便可以创建一个日期输入框。当单击该文本框时会弹出一个日历选择器，选择日期并关闭这个框，会将所选择的日期显示在文本框中。 2 表单元素中的属性 除了本章5.1中介绍的表单类型外，在HTML5中还可以使用属性来实现我们需要的显示功能。HTML5新增的表单属性如下： （1）新的form属性 autocomplete novalidate （2）新的input属性 autocomplete autofocus f