HTML5引入的几个简单的新控件

HTML5，在我看来，与以往版本最大的不同就是加入并支持一些新的控件。我最近翻译一本关于HTML的书，其中介绍了关于HTML5中引入的一些简单的表单控件，在此贴出来，给不认识这些控件的人做个介绍，同时，也请那些认识这些控件的朋友指点一下翻译上的不足。欢迎参与交流。

-------------------------------------------------------------------------

 

HTML5：日期控件

<input>

许多表单都需要收集日期、电子邮件地址和URL等信息。这些工作通常使用单行文本框来实现。

HTML5引入了新的表单控件并将某些信息的收集方式标准化，而那些不认识这类控件的旧浏览器会将它们作为单行文本框来处理。

type=”date”

如果需要用户提供日期，你就可以使用<input>元素并将其type属性的值设为date。这会在支持HTML5新控件类型的浏览器上创建一个日期控件。

本页中的示例显示的是日期控件在Opera浏览器中的外观。日期控件的外观在不同的浏览器中会有所不同。

 

HTML5：电子邮件和URL控件

<input>

HTML5还引入了让用户输电子邮件地址和URL的控件。那些不支持这类输入控件的浏览器会把它们当成普通文本框来处理。

type=”email”

如果需要用户提供电子邮件地址，你可以使用电子邮件输入控件。那些支持HTML5验证机制的浏览器将会检查用户所提供的信息是不是一个格式正确的电子邮件地址。有些智能手机在你输入电子邮件地址时会对其键盘布局进行优化，使得键盘可以显示最有可能用到的按键（比如@符号）。

type=”url”

URL输入控件在你需要用户提供网页地址时可以用到。那些支持HTML5验证机制的浏览器将会检查用户所提供的信息是否符合URL的格式。有些智能手机在你输入URL时会对其键盘布局进行优化，使得键盘可以显示最有可能用到的按键。

 

HTML5：搜索控件

<input>

如果你想为搜索查询创建一个单行文本框，可以使用HTML5为此提供的一个专用控件。

type=”search”

如果你想为搜索查询创建一个单行文本框，可以使用HTML5提供的搜索控件。

要创建HTML5的搜索框，应该将<input>元素的type属性值设置为search。旧浏览器会把它当作一个单行文本框。

新版本的浏览器增加了一些提高易用性的特性。例如，苹果电脑上的Safari在你开始输入信息时会在搜索框的右侧显示一个用于清除搜索框的叉号。Safari还会自动将搜索框的输入区域圆角化。

placeholder

在任何文本输入控件上，你都可以使用一个称为placeholder的属性，在用户点击文本输入区域之前，文本框内显示的文本就是placeholder的属性的值。旧浏览器会直接忽略该属性。

------------------------------------------------------------------------

转载请注明作者：刘涛