<input> 元素用于在网页中创建各种输入字段,其中包括搜索框。<input type="search"> 可以创建一个搜索框,用户可以在其中输入搜索关键词。
属性
type:指定输入字段的类型为搜索框,取值为 "search"。name:指定输入字段的名称,用于在表单提交时标识该字段。value:指定输入字段的初始值。placeholder:指定在搜索框中显示的提示文本。size:指定输入字段的显示宽度,单位为字符数。maxlength:指定输入字段的最大字符数限制。required:指定输入字段是否为必填项。autofocus:指定页面加载时自动聚焦到该输入字段。
事件
oninput:输入框内容发生改变时触发的事件。onchange:输入框内容改变并失去焦点时触发的事件。
示例代码
<input type="search" name="search" placeholder="Search..." size="30" maxlength="50" required autofocus>
上述示例代码创建了一个搜索框,其名称为 "search",在搜索框中显示 "Search..." 作为提示文本,宽度为 30 个字符,最大字符数限制为 50,且为必填项且页面加载时自动聚焦到该搜索框。
| Property | 描述 |
|---|---|
| autocomplete | 设置或返回 search 字段的 autocomplete 属性值 |
| autofocus | 设置或返回 search 字段在页面加载后是否自动获取焦点 |
| defaultValue | 设置或返回 search 字段默认的值 |
| disabled | 设置或返回 search 字段是否可用 |
| form | 返回使用 search 字段的表单引用 |
| list | 返回包含了 search 字段的 datalist 引用 |
| maxLength | 设置或返回 search 字段的 maxLength 属性值 |
| name | 设置或返回 search 字段的 name 属性值 |
| pattern | 设置或返回 search 字段的 pattern 属性值 |
| placeholder | 设置或返回 search 字段的 placeholder 属性值 |
| readOnly | 设置或返回 search 字段是否只读 |
| required | 设置或返回 search 字段在表单中是否为必填字段 |
| size | 设置或返回 search 字段的 size 属性值 |
| step | 设置或返回 search 字段的 step 属性值 |
| type | 返回 search 字段的表单元素类型 |
| value | 设置或返回 search 字段的 value 属性值 |