HTML5表单输入：搜索，URL和电子邮件

As the new HTML5 semantic container tags are to <div>, so these new form inputs are to the generic <input type=text> element. Having specific elements for search fields, URLs, eMail address inputs and a color picker allow browsers and devices to be far more powerful and responsive.

由于新的HTML5语义容器标记是<div> ，因此这些新的表单输入是通用的<input type=text>元素。 具有用于搜索字段，URL，电子邮件地址输入和颜色选择器的特定元素，使浏览器和设备的功能和响应能力大大提高。

搜索元素 (Search element)

The search element is new to HTML5:

search元素是HTML5的新功能：

<input type="search" name="search" id="search">

The search input does not, by itself, initiate a search. What it does deliver are browser-supported features that are useful in searches: the ability to clear the field without typing or clicking a separate button.

search输入本身不会启动搜索。 它确实提供了浏览器支持的功能，这些功能在搜索中很有用：无需输入或单击单独的按钮即可清除字段的功能。

Versions of Safari and Chrome want to style the search input to a very “Apple” appearance. This can be overwritten with a bit of proprietary CSS.

Safari和Chrome的版本希望将search输入的样式设置为非常“苹果”的外观。 可以用一些专有CSS覆盖它。

The HTML5 <mark> element should be used to highlight search responses.

HTML5 <mark>元素应用于突出显示搜索响应。

URL输入 (URL input)

The URL input type is designed to take web addresses, such as entering your portfolio URL into a form.

URL输入类型旨在采用网址，例如将投资组合URL输入表单。

<label for="portfolio">Your website portfolio:</label>
<input type="url" name="portfolio" id="portfolio">

Again it is not so much about how this element looks, as to the fact that the browser now recognizes that a URL should be entered into the field. The browser could validate this information, lock off or present certain keys (iOS presents a .com key to increase the user’s speed in completing the field quicker, for example), or other actions.

再次，关于该元素的外观并不仅是因为浏览器现在已经认识到应该在该字段中输入URL。 浏览器可以验证此信息，锁定或显示某些键(iOS会显示一个 .com 键，以提高用户更快地完成该字段的速度，例如)或其他操作。

电子邮件输入 (eMail input)

Like the URL element discussed above, the eMail input is designed to take addresses:

类似于上面讨论的URL元素，电子邮件输入被设计为采用地址：

<label for="email">Your eMail address:</label>
<input type="email" name="email" id="email">

Browsers will understand that this field is designed to take eMail addresses, and will validate any data the user enters.

浏览器将了解此字段旨在接收电子邮件地址，并将验证用户输入的所有数据。

注意 (Note)

It’s important to note that this browser-side eMail validation is based on matching a regular expression: it does not check that the information that is entered matches a real eMail account. You may be surprised at the allowed pattern of characters that can make a valid eMail address.

重要的是要注意，此浏览器端的电子邮件验证是基于匹配正则表达式的 ：它不会检查输入的信息是否与真实的电子邮件帐户匹配。 您可能会对允许使用有效的电子邮件地址的字符模式感到惊讶。

Actually checking that the user’s eMail account is real would mean sending a message to that account, or using a service like WebFinger.

实际上，检查用户的电子邮件帐户是否真实意味着向该帐户发送消息，或使用WebFinger之类的服务。

翻译自: https://thenewcode.com/259/HTML5-Form-Inputs-search-url-amp-eMail