搜索 ‹input type='search'›

isixe 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>