HTML5用户指南

HTML5用户指南
1、HTML5用户指南第三章表单3.1我们爱HTML，如今它反过来爱我们了HTML5使得开发表单变得很快。

有一些不错的内容，例如，HTML5添加了两种HTTP类型的表单动作〔update和delete〕，可以与当前的get和post协作使用。

更有意思的是，此前需要在一个表单元素之中的许多元素〔button,fieldset,input,label,select,textarea,加上object,keygen,meter,output,和progress这样的新元素〕，如今这些元素可以位于页面的任何地方，并且通过指向其表单全部者的id 的一个form属性与一个表单关联起来。

2、考虑这个例子：formid=fooinputtype=”text”.../formtextareaform=foo/textar eainput由表单foo全部，因为它包含于其中，并且没有表单属性覆盖全部关系textarea位于表单之外，但它仍旧属于该表单，因为它的表单属性指向了其表单全部者的id。

当你想要这些元素在视觉上〔和结构上〕出如今父表单之外时，会给样式化带来更多的敏捷性。

但是，更大的功能是新的HTML5的表单类型以及它们所带来的内置验证。

最终，对于这些基本的数据类型，你根本不再需要JavaScript 验证，新的输入类型优雅降级，但是在到达金色的将来〔当每个人都
3、有HTML5浏览器的时候，或者老板告知你，用旧的浏览器的用户将必需忍受仅在服务器端的表单检查〕之前，仍将需要你的JavaScript。

3.2新的输入类型新的表单字段是这个规范成为HTML5
的起源，在这里我们看到了向后兼容扩展原理的应用。

扩展主要是input元素的type属性的新值。

由于全部浏览器默认为inputtype=text，不理解新的扩展的遗留浏览器将会退而求其次地使用默认值，并且允许用户向一般文本字段输入数据。

留意：规范对于浏览器如何把新的输入类型显示给用户或如何报告错误等没有做出要求。

不同的浏览器和不同的设备将会显示不同的用户界面。

例如，Safari桌面和S
4、afari/iPhone上显示的一个选择框的差异如图3.1所示。

图3.1选择框的差异同一个选择框显示于Safari/Windows〔左边〕和Safari/iPhone中。

大多数的屏幕截图来自于Opera，因为在编写本书时〔2021年5月〕它具有最完好的实现，但是对于在其他浏览器中实现的内容，我们将会使用该浏览器作为替代。

3.2.1email输入类型标记inputtype=email告知浏览器，假如用户的输入看上去不像是一个有效的E-mail地址，它就不应当允许该表单提交，也就是说，它不会检查E-mail地址是否存在，而只是检查它是否是有效的格式。

和全部的输入类型一样，
5、用户可能提交带有空字段的表单，除非该字段是必填的。

浏览器报告错误的方式也没有定义。

Opera10.50中〔试验性〕的实现如图 3.2所示。

图 3.2Opera10.50中一条自动生成的错误消息multiple属性也是允许的，这意味着，该字段的值可能是逗号隔开的有效E-mail地址的一个列表。

当然，这不是要求用户手动输入一个逗号隔开的列表，浏览器可能使用复选框从用户的邮件客户端或手
机通讯录中很好地取出用户的联络人的列表。

位于/blog/2021/03/contacts-in-the-browser
的试验性的FirefoxConta
6、cts插件，从各种资源收集联系人信息，当用户遇到一个inputtype=email时，它通过收集的信息提供地址。

它还将通过W3C 草案ContactsAPI〔/2021/dap/〕将这些联络信息暴露给Web站点脚本。

3.2.2URL输入类型inputtype=url让浏览器确保输入字段是正确的URL。

浏览器可能为用户提供关心，例如，Opera 显示来自用户的浏览器历史的，最近访问过的URL的一个列表，并且自动地在URL的“”开始处之前添加“http://”〔一个URL不肯定是一个WebURL，例如它可能是一个基于Web的HTML编辑
7、器，其中用户可能想要使用tel:伪协议〕。

3.2.3date输入类型date输入类型是我所喜爱的一个。

我们都看到过这样的Web页面，要求用户输入一次航班的日期、音乐会门票的日期等。

由于日期的输入多种多样〔是DDMM-YYYY格式、MM-DD-YYYY格式，还是DD-MMM-YY 格式〕，格式各个站点的开发者所编写的JavaScript日期选取器挂件，早外观、易用性和可访问性上存在很大的差异。

inputtype=date解决了这一问题。

Opera上弹出的一个日历小挂件如图 3.3所示。

在BlackBerryDeviceSoftware5.0版的BlackBerry浏览器上，
8、用来实现日期输入字段的日期输入控件，与本地BlackBerry 日历应用程序中的Java部件〔尽管它没有整合该日历应用程序〕相同。

参见图 3.4。

图 3.3Opera10.50显示一个日历小挂件图
3.4BlackBerry浏览器上的inputtype=date当然，这些都是早期的状况。

该浏览器如今能够调佣本地的日历应用程序，以便你可以浏览日期来看看你将来的约会。

关键在于，该浏览器如今能够理解你的意图。

之前的日期选取器〔从浏览器的视角〕只不过是div和span，并且附加了许多JavaScript行为的链接。

如今的浏览器知道，你事实上在输入真正的时间和日期，并且可以对其他的日期
9、和时间信息提供更丰富的掌握和集成。

3.2.4time输入类型inputtype=time允许输入一个24小时格式的时间并验证它。

实际的用户界面有时浏览器可能只需要简洁地输入数字，但假如用户输入的小时数大于24或者分钟数大于59，将会抛出一个错误；或者界面可能更加精致一些，例如，一个带有可拖曳表针的钟面。

用户界面还允许输入时区偏移量。

3.2.5日期时间输入类型date和time验证一个精确的日期和时间。

本地日期和时间用作datetime，除非浏览器不允许用户添加〔或修改〕一个时区偏移量。

3.2.6month输入类型inputtype=month允许输入和验证一个月份。

尽
10、管在内部它存储为1~12的一个数字，但是浏览器可能提供一个选择方法，用户可以选取月份的名称。

可以用一个选择框来实现，其中带有12个选项，是January到December，但是这不够本地化。

使用一个HTML5月份输入类型，法语地区的一个浏览器可能提供带有Janvier而不是January的下拉列表。

浏览器做更多的工作，而你做更少的工作，这才是正确的方式。

3.2.7week输入类型inputtype=week允许输入并验证一个周数。

尽管这是一个简洁的输
入字段，允许用户输入一个数字，但它事实上较为冗杂：有些年份有53周。

表示2021年第7个周的格式是2021-W07。

Op
11、era提供了一个日期选择器UI，可向输入字段中填入任何选定日期所处的周数，而不是YYYY-MM-DD日期格式〔如图3.5所示〕。

图3.5Opera10.50对inputtype=week的显示3.2.8number输入类型假如用户没有输入一个数字字符，毫无疑问，number输入类型将抛出一个错误。

它与min、max和stop属性能很好地协作。

在Opera中，它显示为一个微调器控件，将不能超出最大限制和最小限制〔假如指定了的话〕，并且依据step中指定的增量来增加，不过用户也可以输入一个值〔如图3.6所示〕。

图3.6Opera10.50对inputtype=number 12、的显示3.2.9range输入类型inputtype=range显示为一个滑块条。

图 3.7给出了它在GoogleChrome中的显示。

图3.7GoogleChrome对inputtype=range的显示之前，滑块条需要通过劫持一个输入值并针对指针使用JavaScript和图像来仿照。

由于这在浏览器中不是本地的，需要费许多心思并且要编写额外代码，才能确保键盘的可访问性。

如今滑块条成为HTML的本地化的部分，在削减开发者工作量的同时使键盘用户的可访问性更好。

参见本章“综合应用”一节的示例以了解更多信息。

3.2.10search输入类型这一输入类型期盼一个搜寻关键字。

在S
13、afari中，还有一个非规范的属性可以使用results=n属性添加最近结果的历史。

搜寻类型和文本类型之间的差异只是样式化，在Mac上的Safari中，它会对搜寻应用操作系统默认的圆角样式，
你无法使用某些专用的CSS来覆盖〔为此向WilfNas致敬〕：input[type=”search”]{-webkit-appearance:textfield;}3.2.11 tel输入类型tel类型期盼一个电话号码。

这里没有特别的验证，它甚至不强调只输入数字，因为许多电话号码经常带有额外的字符，例如+44〔0〕2081231234。

由于手机“知道”它们自己的号码，因此我们期盼大多
14、数手机能够做些事情，例如自动填充这些输入字段。

如今还没有手机能够做到这一点，尽管iPhone带有一个电话号码输入屏幕〔如图 3.8所示〕。

图 3.8iPhone的键盘用于完成inputtype=tel3.2.12color输入类型inputtype=color允许用户通过选取器输入一个颜色值。

目前为止，它只在BlackBerry上实现了〔如图3.9所示〕。

图3.9BlackBerry上的inputtype=color3.3新的属性除了新的输入类型，input元素还有几个新的属性用于指定行为和限制：autocomplete,min,max,multiple,pattern,
15、和step。

还有一个新的属性list，它联系到一个新的元素以允许一种新的数据输入方法。

3.3.1list属性datalist是对选择框的回忆，但是假如用户不想要选择与预先定义的选项，也允许用户输入自己的文本。

列表包含在一个新的元素中，在list属性的值中引用其id:inputid=form-person-titletype=textlist=mylistdatalistid= mylistoptionlabel=Mrvalue=Mroptionlabel=Msvalue=Msoptionlab el=Profvalue=”MadProfessor”/datalist/da
16、talist自身没有显示，而是把值显示到一个类似选取的字段中。

前面的例子使用type=text来允许自由形式的输入，但你可以对前面提到的任何输入类型使用/datalist，如url,email等。

它也可能随着用户的输入动态地填充选项，从而复制GoogleSuggest的功能。

参见/articles/view/an-html5-style-google-su ggest/了解更多详情。

许多人问过，为什么input/datalist对不组合为像select的一个单个的新元素呢？答案在于向后兼容性，input/datalist成对地使用
17、，在遗留浏览器中降级为inputtype=text，以便用户至少可以输入一些内容，你也可以很简单地对那些浏览器使用JavaScript 来模拟完好的实现。

3.3.2autofocus属性autofocus布尔值提供了一种生命式的方法，在页面加载的时候来聚焦到一个表单控件。

之前，开发者需要使用control.focus()编写JavaScript。

新的方法允许浏览器做更聪慧的事情，例如，假如用户已经点击了其他地方，就不会真正地聚焦该控件〔这在旧式的JavaScriptonload聚焦脚本中是一个常见问题〕。

一个页面上应当只有一个这样的输入字段。

从可用性的视角来看，这个属性
18、应当当心使用。

我们建议在拥有一个表单字段作为其核心目的的页面上使用它，例如搜寻表单。

3.3.3placeholder属性开发者常常使用的一个可用性技巧，就是在输入表单中的占位文本，它用作给用户的一个提示，当用户聚焦到该字段时，这些文本会消失，当聚
焦离开该字段时，这些文本又恢复出现。

这往往需要使用JavaScript。

然而，如今我们可以通过placeholder属性的声明来做到。

规范指出：“对于一个较长的提示或者其他的建议性文本，title属性更为合适。

”当前，基于WebKit的浏览器〔最初是一个专有的AppleHTML扩展〕以及Firefox3.7的alpha版已经可
19、以显示它了。