以下是一个简单的例子，演示如何获取搜索框的 DOM 对象以及如何使用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Input Element</title>
</head>
<body>
<label for="searchInput">Search:</label>
<input type="search" id="searchInput" placeholder="Enter your search">
<script>
// 通过 id 获取搜索框的 DOM 对象
var searchInput = document.getElementById("searchInput");
// 添加事件监听器，以便在搜索框值改变时触发
searchInput.addEventListener("input", function() {
// 获取输入的搜索值
var searchValue = searchInput.value;
// 在控制台输出输入的搜索值
console.log("Search value: " + searchValue);
});
</script>
</body>
</html>
在这个例子中，我们使用 addEventListener 来监听搜索框的 input 事件。当用户输入搜索值时，将触发事件处理程序，并输出所输入的搜索值。
搜索框还可以使用 placeholder 属性设置一个占位符，向用户提供输入的建议。这个占位符会在用户未输入内容时显示在搜索框中。
转载请注明出处：http://www.zyzy.cn/article/detail/4406/HTML