html中search标签,input type="search"

最新推荐文章于 2025-05-16 11:41:12 发布

blossomzwj

最新推荐文章于 2025-05-16 11:41:12 发布

阅读量5.9k

点赞数

文章标签： html中search标签

input type="search"

"search"类型的元素是为用户输入搜索查询而设计的文本字段。

值

表示搜索字段中包含的值的DOMString。

活动

改变和输入

支持的通用属性

自动完成，列表，最大长度，最小长度，模式，占位符，所需，大小。

IDL属性

值

方法

select()，setRangeText()，setSelectionRange()。

值

该value属性包含DOMString,表示搜索框中包含的值。您可以使用JavaScript中的属性HTMLInputElement.value来检索它。

mySearch.value;

如果输入没有验证约束(请参阅验证以获取更多详细信息)，该值可以是任何文本字符串或空字符串("")。

使用搜索的 inputs

search类型的元素与text类型非常相似，只不过它们是专门用来处理搜索词的。它们在行为上基本相同，但风格不同。

基本示例

呈现如下：

q是name搜索输入的标准。提交时，发送到服务器的数据键/值对将会是q=searchterm。你必须记得为你的输入设置一个名字，否则什么都不会被提交。

search 和 text类型之间的差异

主要的基本差异来自浏览器处理它们的方式。首先要注意的是，有些浏览器会显示一个叉图标，如果需要，可以立即删除搜索字词。以下屏幕截图来自Chrome：

另外，现代浏览器也倾向于自动存储先前在域中输入的搜索项，然后当在该域的搜索输入中，执行后续搜索时，之前的搜索项作为自动完成的选项出现。这个截图来自Firefox：

在这一点上，让我们看看一些有用的技巧，你可以应用到你的搜索表单。

设置占位符

你可以在你的搜索输入中提供一个有用的占位符，它可以给出一个关于如何使用该placeholder属性的提示。看下面的例子：

placeholder="Search the site...">

你可以看到呈现的占位符如下：

搜索表单标签和辅助功能

搜索表单的一个问题是其可访问性 —— 一般的模式是，您不提供标签(尽管您可能会提供一个放大镜图标或类似的图标)，因为搜索表单放置后，它的目的通常对于有视觉的用户来说相当明显的(这个例子显示了一个典型的模式)。

但是，这可能会导致屏幕阅读器用户感到困惑，因为他们不会有任何关于搜索输入的口头指示。不影响你的视觉设计而解决这个问题的一个方法是，那就是使用WAI-ARIA功能：

元素内search值的role属性，将导致屏幕阅读器将表单作为搜索表单进行通知。

如果这还不够，可以在input上使用一个 aria-label 属性。该标签的目的是包含一个将由屏幕阅读器读出的描述性文字标签 - 基本上，这是一个非视觉等效的。

我们来看一个例子：

placeholder="Search the site..."

aria-label="Search through site content">

呈现如下：

与前面的例子没有区别，但是屏幕阅读器用户可以获得更多的信息。

注意：有关这些辅助功能的更多信息，请参阅路标/标志。

物理输入元素大小

输入框的物理尺寸可以使用size属性进行控制。有了它，您可以指定输入框一次可以显示的字符数。在这个例子中，例如，搜索框的宽度为30个字符：

placeholder="Search the site..." size="30">

验证

search 类型的元素具有text类型元素相同的验证特征。搜索框一般不太可能使用验证功能。在许多情况下，用户应该被允许搜索任何东西，但是有几种情况需要考虑，比如搜索已知格式的数据。

注：HTML表单验证不是确保正确格式数据输入的验证脚本替代品。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据(或数据太大，类型错误等等)输入到您的数据库时，可能会导致灾难。

关于造型的说明

伪类可用于有效/无效的表单元素 - :valid和:invalid。在本节中，我们将使用下面的CSS，它将在包含有效值的输入旁边进行检查(打勾)，并在包含无效值的输入旁边放置一个十字叉。

input:invalid ~ span:after {

content: '✖';

padding-left: 5px;

position: absolute:

}

input:valid ~ span:after {

content: '✓';

padding-left: 5px;

position: absolute:

}