帮忙用javascript写一个web页面(包含搜索输入框)
时间: 2024-03-12 13:49:16 浏览: 15
好的,以下是一个简单的Web页面示例,包含搜索输入框:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web页面示例</title>
</head>
<body>
<h1>欢迎来到我的Web页面</h1>
<form>
<label for="search">请输入搜索关键词:</label>
<input type="text" id="search" name="search">
<button type="submit">搜索</button>
</form>
<p>这是一个简单的Web页面示例,包含了一个搜索输入框。</p>
</body>
</html>
```
同时,我们可以使用JavaScript为这个页面添加一些交互功能,例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web页面示例</title>
</head>
<body>
<h1>欢迎来到我的Web页面</h1>
<form>
<label for="search">请输入搜索关键词:</label>
<input type="text" id="search" name="search">
<button type="submit">搜索</button>
</form>
<p>这是一个简单的Web页面示例,包含了一个搜索输入框。</p>
<script>
// 获取搜索输入框和按钮元素
const searchInput = document.getElementById('search');
const searchButton = document.querySelector('button[type="submit"]');
// 添加搜索按钮点击事件
searchButton.addEventListener('click', function(event) {
event.preventDefault(); // 阻止表单提交
const searchKeyword = searchInput.value.trim(); // 获取搜索关键词
if (searchKeyword) {
alert('你搜索的关键词是:' + searchKeyword);
} else {
alert('请输入搜索关键词');
}
});
</script>
</body>
</html>
```
这段JavaScript代码会获取页面中的搜索输入框和按钮元素,并为按钮添加一个点击事件。当用户点击按钮时,会获取输入框中的搜索关键词并进行处理。如果搜索关键词非空,则弹出一个提示框显示搜索关键词;否则,弹出一个提示框提示用户输入搜索关键词。