HTML5中的元素为开发者提供了一种方便的方式来创建搜索框，用于接收用户输入的搜索查询，这种类型的输入字段通常出现在网站的站点搜索或像Google这样的搜索引擎中。

HTML5 表单之Input 类型search

定义和用法

是HTML5新增的一种输入类型，专门用于搜索功能，它允许用户在文本字段中输入搜索字符串，并且可以包含一些特定的属性来增强其功能和外观，通过设置autocomplete="off"属性，可以关闭浏览器自动记录之前输入值的功能，以保护用户隐私。

基本语法

在这个例子中，name="q"是搜索字段的名称，这是提交表单时所必需的，如果没有设置名称，表单提交时将不会包含这个字段的值。

样式化

在默认情况下，以Webkit引擎为核心的浏览器（如Chrome和Safari）会为type="search"的输入框添加一些默认样式，包括边框、清除按钮等，如果需要移除这些默认样式，可以通过CSS来实现：

 input[type=search] {     webkitappearance: textfield;     webkitboxsizing: contentbox;     fontfamily: inherit;     fontsize: 100%; } input::webkitsearchdecoration, input::webkitsearchcancelbutton {     display: none; }

这段代码将移除默认的Webkit样式，使搜索框看起来更像一个普通的文本域。

响应式设计

在移动设备上，为了节省屏幕空间，搜索框通常会被设计得更简洁，当用户点击搜索框时，它会扩展到全宽度，以便用户进行输入，这种效果可以通过CSS的:active伪类来实现：

 input[type="search"] {     width: 55px;     transition: width 0.5s; } input[type="search"]:active {     width: 130px; }

这样，当用户激活搜索框时，它将平滑地扩展到指定宽度。

浏览器兼容性

在所有现代浏览器中都得到了良好的支持，包括Chrome、Firefox、Safari和IE8+，它不支持IE7及以下版本的浏览器，因为IE不支持:focus伪类元素。

相关问答FAQs

Q1:元素的默认样式是什么？如何移除它们？

A1: 在以Webkit引擎为核心的浏览器中，元素会有默认的边框、内边距和清除按钮，要移除这些样式，可以使用以下CSS代码：

 input[type=search] {     webkitappearance: textfield;     webkitboxsizing: contentbox;     fontfamily: inherit;     fontsize: 100%; } input::webkitsearchdecoration, input::webkitsearchcancelbutton {     display: none; }

Q2: 如何在移动设备上实现响应式的搜索框？

A2: 在移动设备上，可以通过CSS的:active伪类来实现搜索框的扩展效果。

 input[type="search"] {     width: 55px;     transition: width 0.5s; } input[type="search"]:active {     width: 130px; }

这样，当用户点击搜索框时，它将平滑地扩展到全宽度，提供更好的用户体验。

HTML5 表单之 Input 类型search

简介

type="search" 是 HTML5 中为搜索框定义的一个输入类型，它主要用于创建用于搜索的输入字段，通常与搜索按钮（Search）一起使用。

特点

搜索图标：默认情况下， 会显示一个搜索图标，这有助于用户识别输入字段的用途。

大小写敏感：search 类型的输入框默认对大小写敏感，即用户输入的大小写将直接影响搜索结果。

自动完成：浏览器通常会启用自动完成功能，以减少用户输入错误和提高搜索效率。

语法

属性

name：定义输入字段的名称，该名称在提交表单时用于识别输入数据。

placeholder：为输入字段提供占位符文本，提示用户输入内容。

value：设置输入字段的初始值。

autocomplete：控制浏览器是否启用自动完成功能，可能的值包括：

on：启用自动完成。

off：禁用自动完成。

required：指定输入字段是必填的。

minlength：指定输入字段的最小字符数。

maxlength：指定输入字段的最大字符数。

pattern：指定输入字段的模式（正则表达式），用于验证输入。

示例

 
   Search:      Search 

注意事项

确保name 属性被设置，以便服务器能够识别和处理提交的数据。

使用required 属性来确保用户必须填写搜索字段。

search 类型的输入框不适用于需要输入非搜索关键词的场景，例如用户名或密码。

通过使用type="search"，可以创建一个直观且易于使用的搜索输入框，提高用户体验。