移动WEB开发之表单元素

1、表单元素的类型表单元素中的属性实例5-4：在网页中生成一个密钥实例5-1：验证输入的是否是一个URL地址实例5-2：验证输入的数值是否合法实例5-3：实现一个简单的乘法计算器综合实例：制作一个颜色滑动控制器HTML5提供了多个新的表单输入类型，这些新类型为我们提供了更好的输入控制和验证功能。在HTML5标记语言中，包含了如下所示的输入类型。emailurlnumberrangeDate pickers（date，month，week，time，datetime，datetime-local）searchcolor在HTML5标记语言中，email类型用于包含Email地址的输入域。如果将元素中

2、的“type”类型设置为“email”，将在页面中创建一个专门用于输入邮件地址的文本输入框。在显示页面时，这个文本框与其他文本框没有区别，专门用于接收Email地址信息。当提交表单时，会自动检测文本框中的内容是否符合Email邮件地址格式，如果不符则提示相应错误信息。在现实应用中，在提交表单之前不会检测email类型文本框的内容是否为空，只有在不为空的情况下才会检测其内容是否符合标准的Email格式。如果将该元素的“multiple”属性设置为“true”，则表示允许用户输入一串用逗号分隔的Email地址。在提交表单时，会自动验证Email域中的值是否合法。在HTML5标记语言中，url类型用

3、于包含URL地址的输入域。在提交表单时，会自动验证url域中的值。在输入元素中，“url”类型是一种新增的类型，该类型表示元素是一个专门用于输入Web站点地址的输入框。Web地址的格式与普通文本有些区别，例如文本中有反斜杠“/”和点“.”。为了确保“url”类型的输入框能够正确提交符合格式的内容，表单在提交数据前会自动验证其内容格式的有效性。如果不符合对应的格式，则会出现相应的错误提示信息。并且与“email”类型一样，url的有效性检测并不会判断输入框的内容是否为空，而是针对非空内容进行格式检测。在HTML5标记语言中，number类型用于设置包含数值的输入域，通过此类型能够设置对所接受的数

4、字的限定。在网页设计应用中，可以使用下表所示的属性来设置对数字类型的限定。number类型支持的属性在HTML4及以前的版本中，如果想要在表单中输入一个指定范围的整数，需要在表单提交前使用代码进行数据检测，以确定输入框中是否是一个符合要求的整数。而在HTML5标记语言中，只要创建一个“number”类型的元素便可以实现以上操作。该类型的元素在HTML5中还将显示一个微调控件。如果指定了最大与最小范围值，就可以点击微调控件的上限与下限按钮，以指定的步长（step）增加或减少输入框中的值，极大方便了用户的操作。在“number”类型的输入框中，不能输入其他非数字型的字符，并且当输入的数字大于设定的

5、最大值或小于设置的最小值时，都将出现数字输入出错的提示信息。同样道理，该类型不进行输入内容是否为空值的自动检测。在HTML5标记语言中，使用Date Pickers（数据检出器）可以为用户提供日期和时间输入框。Date Pickers的意义是可以避免用打字的方式输入日期和时间，能够大大提高处理数据的效率。在HTML5中提供了多个可供选取日期和时间的新输入类型，具体说明如下：date：选取日、月、年。month：选取月、年。week：选取周和年。time：选取时间（小时和分钟）。datetime：选取时间、日、月、年（UTC时间）。datetime-local：选取时间、日、月、年（本地时间）。

6、在HTML4之前的版本中，没有专门用于显示日期的文本输入框，开发人员需要编写大量的JavaScript代码或导入相应的插件。而在HTML5中，只需要将元素的类型设置为“date”，便可以创建一个日期输入框。当单击该文本框时会弹出一个日历选择器，选择日期并关闭这个框，会将所选择的日期显示在文本框中。除了本章5.1中介绍的表单类型外，在HTML5中还可以使用属性来实现我们需要的显示功能。HTML5新增的表单属性如下：autocompletenovalidateautocompleteautofocusformform overrides（formaction，formenctype，formmet

7、hod，formnovalidate，formtarget）height和widthlistmin、max和stepmultiplepattern（regexp）placeholderrequired下面我们具体介绍其中常用的一些。在HTML5的元素中，属性“autofocus”是一个布尔值。主要功能是当加载页面完成后，设置光标是否自动锁定元素，即是否使元素自动获取焦点。在元素中，如果将该属性的值设置为“true”或直接输入“autofocus”属性名称，那么对应的元素将自动获取焦点。在HTML5网页中，可以通过“pattern”属性验证在表单中输入的数据是否合法。pattern属性适用于以下

8、类型的标签：textsearchurltelephoneemailpassword“email”和“url”等类型的元素都内置了正则表达式，当创建这些元素时，通过与内容进行匹配的方式进行有效性验证。其实这些元素都使用了“pattern”属性，只是内置的而已。但是内置验证的元素毕竟较少，并且如果要进行组合式的验证，就需要使用“pattem”属性。该属性支持各种类型的组合正则表达式，用来验证对应文本输入框中的内容。在HTML5标记语言中，placeholder属性能够提供一种描述输入域所期待值的提示。只要为某个元素设置“placeholder”属性后，会在输入域为空时显示提示，在输入域获得焦点时这

9、个提示会消失。placeholder属性适用于以下所示的标签类型：textsearchurltelephoneemailpassword在HTML5标记语言中，可以使用required属性来验证文本框中的内容是否为空。required属性适用于以下所示的标签类型：textsearchurltelephoneemailpassworddate pickersnumbercheckboxradiofile通过前面的学习我们已经知道，“email”或“url”类型的元素在提交表单时只验证非空内容。这时只要在验证元素中添加一个“required”属性，就可以对其内容是否为空自动进行验证，如果为空，则在

10、表单提交数据时会显示错误提示信息。在HTML5标记语言中，使用autocomplete属性可以设置form或input域开启自动完成功能，该功能可随着用户键入显示以前的匹配条目从而节约时间。autocomplet属性不但适用于标签，而且适应于标签中的以下类型：textsearchurltelephoneemailpassworddatepickersrangecolor在某些浏览器中，可能还需要启用自动完成功能才能使该属性生效。在HTML5标记语言中，通过表单重写属性（form override attributes）可以重写form元素的某些属性设定。HTML5中的表单重写属性如下：form

11、action：重写表单的action属性。formenctype：重写表单的enctype属性。formmethod：重写表单的method属性。formnovalidate：重写表单的novalidate属性。formtarget：重写表单的target属性。在HTML5应用中，表单重写属性适用于以下类型的标签：submitimage在HTML5标记语言中，使用属性min、max和step可以为包含数字或日期的input类型规定限定条件，这三个属性的具体说明如下：max：规定输入域所允许的最大值。min：规定输入域所允许的最小值。step：为输入域设置合法的数字间隔，假如step=3，则合法

12、的数是-3、0、3、6等。在HTML5应用中，属性min、max和step适用于以下三个标签类型：date pickersnumberrange在HTML5标记语言中，使用multiple属性可以设置在输入域中选择多个值。在HTML5应用中，multiple属性适用于以下两种类型的标签：emailfile在本实例中首先创建了一个“url”类型的元素，然后新建了一个表单“提交”按钮。当单击“提交”按钮时，会自动检测输入框中的元素是否符合Web地址格式，如果不是合法的URL，则显示错误提示信息。实例文件5-1.html的具体代码如下所示。 请在下面的表单中输入一个网址： 在此需要说明的是，不同浏览

13、器对元素的支持不同。在笔者目前的测试中Chrome浏览器和Opera浏览器必须输入完整的URL地址路径（包括“http:/”），否则将提示格式出错信息，如下图所示。执行效果在本实例文件5-2.html中创建了三个表单，并分别创建了三个“number”类型的元素，分别用于输入日期中“年”、“月”、“日”的数字。同时，新建一个表单的“提交”按钮。单击该按钮时会检测这三个输入框中的数字是否属于各自设置的整数范围，如果不符合则显示错误提示信息。实例文件5-2.html的具体代码如下所示。 请输入你的生日（年-月-日格式）： 年 月 日 在上述代码中，定义了三个“number”类型的元素输入框，用于分别

14、设置“mm”、“max”、“value”、“step”属性值。其中“step”属性值表示步长值，默认值为1，表示当用户点击微调控件时，向上增加或向下减少的值。上述代码的执行效果如下图所示。执行效果在HTML5标记语言中，使用元素可以实现不同类型信息的输出，例如计算或脚本输出。在实际应用中，元素必须从属于某个表单，或通过属性指定某个表单。元素的功能是在页面中显示各种不同类型表单元素的内容，例如输入框的值、JavaScript代码执行后的结果值等。为了获取这些值，需要设置元素的“onFormlnput”事件。当在表单输入框中录入内容时，会触发该事件，从而方便地实时侦察到表单中各元素的输入内容。下面

15、我们设计实现一个简单的乘法计算器，方法如下：（1）在新建表单中创建两个输入文本框，分别用于输入两个数字。（2）新建一个元素，用于显示两个输入文本框中数字相乘后的结果。（3）当改变两个输入框中任意一个数值时，会自动变化在元素中显示的计算结果。实例文件5-3.html的具体代码如下所示。 请在下面输入两个数字 * = 在上述代码中，元素的内容通过“onFormlnput”事件绑定了两个输入文本框，因此，当输入框中的值发生变化时，元素的内容根据绑定的规则迅速响应，这样便实现了一种联动的效果。执行效果如下图所示。执行效果提示：目前各大浏览器并非完全支持HTML5的特性，这里建议读者使用Opera Mo

16、bile Emulator进行测试。它是一款PC上的Opera mobile模拟器，简单来说，它能在你的电脑上模拟各种手机、平板等设备去访问网站。免费、使用方法简单，读者可在其官方网站进行下载，资料包中附有相应安装包。在HTML5标记语言中，新增元素的功能是生成页面的密钥。元素是一种密钥对生成器（key-pair generator）技术，如果在表单中创建元素，当在表单提交时该元素将生成一对密钥：一个保存在客户端，称为私密钥（Private Key）；另一个发送至服务器，由服务器进行保存，称为公密钥（Public Key），公密钥可以用于客户端证书的验证。下面来讲解在网页中生成一个密钥的方法，具体实现流程如下所示：（1）在表单中新建一个“name”值为“keyUserInfo”的元素，通过此元素可以在页面中创建一个选择密钥位数的下拉列表框。（2）当选择列表框中某选项值，并单击表单中的“提交”按钮时，可以将根据所选密钥的位数生成对应密钥提交给服务器。实例文件5-4.html的具体实现代码如下所示：使用keygen元素 选择密钥位数 在上述代码中，元素在表单中以列表的形式展示提供密钥位数的选择。当提交表单时，可以通过元素在表单中的“name”值获取该元素生成的