用HTML5做一个搜索框
时间: 2024-03-11 17:28:04 浏览: 18
<!DOCTYPE html>
<html>
<head>
<title>搜索框</title>
<meta charset="UTF-8">
<style type="text/css">
#search {
padding: 10px;
border: none;
border-radius: 5px;
width: 300px;
font-size: 16px;
}
#submit {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<input type="text" id="search" placeholder="请输入搜索内容">
<input type="submit" id="submit" value="搜索">
</form>
</body>
</html>
相关问题
用html做一个搜索框
好的,以下是一个简单的搜索框的 HTML 代码示例:
```html
<form action="search.php" method="get">
<input type="text" name="query" placeholder="搜索">
<button type="submit">搜索</button>
</form>
```
其中,`action` 属性指定了表单提交的地址,`method` 属性指定了提交方式,这里使用了 GET 方法。`input` 标签定义了一个文本输入框,`name` 属性指定了输入框的名称,`placeholder` 属性指定了输入框的提示文本。`button` 标签定义了一个按钮,用于提交表单。
做一个html的搜索框
当然,下面是一个简单的HTML搜索框的示例:
```html
<form action="/search" method="get">
<input type="text" name="query" placeholder="在此输入搜索内容">
<button type="submit">搜索</button>
</form>
```
在这个示例中,我们使用了`<form>`元素来创建一个表单,其中`action`属性指定了搜索请求的目标URL,`method`属性指定了请求的HTTP方法(这里是GET方法)。
表单中包含了一个`<input>`元素,它的`type`属性被设置为"text",用于接收用户输入的搜索内容。`name`属性指定了这个输入字段的名称,这个名称将在提交表单时作为参数传递给服务器。
`<input>`元素还使用了`placeholder`属性来设置一个占位符文本,用于给用户提供输入的提示。
最后,我们添加了一个`<button>`元素来表示搜索按钮。点击这个按钮将提交表单。
你可以将这段HTML代码复制到你的项目中,并根据需要进行样式和功能上的调整。