html 查询表单,如何让我的HTML表单查询适用于所有表单元素?
时间: 2023-08-22 22:08:58 浏览: 44
你可以使用HTML表单元素中的通用属性`name`和`value`来实现这一点。你可以在HTML表单中添加一个`<input type="text">`元素,让用户输入查询关键字,并通过JavaScript代码获取用户输入的值。然后,你可以使用DOM操作来获取所有表单元素,根据其`name`属性和用户输入的值进行匹配,从而找到与用户查询相匹配的表单元素。
以下是一个示例代码,可以实现通用的HTML查询表单:
```html
<form>
<input type="text" id="query" placeholder="Search...">
<button type="button" onclick="searchForm()">Search</button>
</form>
<script>
function searchForm() {
var query = document.getElementById("query").value;
var formElements = document.getElementsByTagName("input");
for (var i = 0; i < formElements.length; i++) {
if (formElements[i].name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
formElements[i].style.backgroundColor = "yellow";
} else {
formElements[i].style.backgroundColor = "";
}
}
}
</script>
```
在这个例子中,我们使用`getElementsByTagName()`方法获取所有的`<input>`元素。然后,我们遍历所有的表单元素,检查它们的`name`属性是否包含用户输入的查询关键字。如果是,我们将该表单元素的背景色设置为黄色,否则将其背景色重置为空。你可以根据需要修改此代码,以适应你的具体情况。