如何在HTML中添加搜索栏 - 带代码示例 - 常规

"如何在HTML中添加搜索栏 - 带代码示例"\n"学习如何在HTML中使用<input>元素添加搜索栏，以及如何使用JavaScript处理搜索事件，包括获取用户输入、搜索逻辑和结果显示。"\n\n"html\n<!DOCTYPE html>\n<html>\n<head>\n <title>搜索栏示例</title>\n</head>\n<body>\n <form>\n <input type="text" id="search" name="search" placeholder="在此输入搜索内容">\n <button type="submit">搜索</button>\n </form>\n \n <ul id="result"></ul>\n\n <script>\n const form = document.querySelector('form');\n const searchInput = document.getElementById('search');\n const resultList = document.getElementById('result');\n \n form.addEventListener('submit', (e) => {\n e.preventDefault();\n const searchTerm = searchInput.value;\n // 在这里执行搜索逻辑，将结果显示在列表中\n resultList.innerHTML = `<li>搜索结果：${searchTerm}</li>`;\n });\n </script>\n</body>\n</html>\n\n\n"上述代码中，<input>元素的type属性设置为text，表示创建一个文本输入框。id属性设置为search，以便通过JavaScript获取该元素。name属性设置为search，以便在提交表单时将输入的搜索内容作为参数传递。placeholder属性设置为在此输入搜索内容，用于显示在输入框内的提示文本。\n\n"通过JavaScript监听表单的submit事件，当用户点击搜索按钮或按下回车键时，会执行回调函数。在回调函数中，通过searchInput.value获取用户输入的搜索内容，并将结果显示在resultList元素中的列表项中。"\n