搜索 ‹input type='search'›

Exisi 2020-06-07 12:15:11
Categories: Tags:

 

属性

说明

value

包含文本代表搜索字段中包含的值

list

<datalist> 元素的 ID,其中包含可选的预定义自动完成选项

maxlength

用户可以在搜索字段中输入的最大字符数(以 UTF-16 代码为单位)。 必须为 0 或更高的整数。 如果未指定 maxlength 或指定了无效值,则搜索字段没有最大长度。 此值还必须大于或等于 minlength 的值。

minlength

用户可以在搜索字段中输入的最小字符数(以 UTF-16 代码为单位)。 该值必须是小于或等于 maxlength 指定的值的非负整数值。 如果未指定 minlength 或指定了无效值,则搜索输入没有最小长度。

 

如果在字段中输入的文本的长度小于 minlength UTF-16 代码单元的长度,则搜索字段将无法通过约束验证

pattern

指定模式

placeholder

placeholder 属性是一个字符串,可向用户提供有关该字段中需要什么样的信息的简短提示。 它应该是一个单词或短语来说明预期的数据类型,而不是说明性消息。 文本中不得包含回车符或换行符。

 

如果控件的内容具有一个方向性的 (LTR RTL) ,但需要以相反的方向性来显示占位符则可以使用 Unicode 双向算法格式化字符来 在占位符中覆盖方向性

readonly

一个布尔属性,如果存在,则表示该字段不能由用户编辑

size

size 属性是一个数字值,指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字,默认值是 20。 根据字符和字体 (使用 font 设置),结果输入可能比指定的字符数窄或宽。

 

这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限,使用 maxlength 属性

spellcheck

拼写检查

示例

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

 

<body>

    <form>

        <div>

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

            <button>Search</button>

        </div>

    </form>

</body>

 

</html>

 

浏览器运行结果如下:

 

来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/search>