首页html网页设计高级搜索框代码

html网页设计高级搜索框代码

时间: 2024-09-21 09:11:49 浏览: 84

HTML高级搜索框的设计通常结合CSS和JavaScript来实现动态交互效果。下面是一个基本的HTML结构示例，它包含了一个简单的文本输入框（用于用户输入关键字）以及一个提交按钮： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>高级搜索</title> <style> .search-box { width: 400px; margin: 0 auto; padding: 15px; border: 1px solid #ccc; border-radius: 5px; } input[type="text"] { width: 100%; padding: 10px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; } </style> </head> <body> <div class="search-box"> <input type="text" id="searchInput" placeholder="请输入搜索关键词..."> <button onclick="handleSearch()">搜索</button> </div> <script> function handleSearch() { var searchKeyword = document.getElementById("searchInput").value; // 这里只是一个占位符，实际应用会发送请求到服务器并处理结果 console.log('搜索关键字:', searchKeyword); } </script> </body> </html> ``` 在这个例子中，当用户点击“搜索”按钮时，`handleSearch`函数会被触发，获取输入框的内容并打印出来。这只是一个基础示例，你可以添加更多的功能，比如实时搜索建议、验证输入等。

阅读全文