html制作搜索框和搜索图标
时间: 2024-03-15 21:45:28 浏览: 17
您可以使用以下 HTML 代码来创建一个搜索框和一个搜索图标:
```
<form action="/search" method="get">
<input type="text" placeholder="Search..." name="q">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
```
这里的 `action` 属性指定了搜索表单提交的 URL,`method` 属性指定了使用 GET 方法提交表单。`input` 标签使用了 `type="text"` 属性来创建一个文本输入框,`placeholder` 属性提供了默认的提示文本,`name` 属性指定了提交的参数名称。`button` 标签用于创建搜索按钮,其中的 `type="submit"` 属性指定了该按钮用于提交表单,`i` 标签用于插入一个搜索图标,可以使用 Font Awesome 等图标库来获取图标样式。
请注意,这里使用了 Font Awesome 图标库,您需要在页面中引入该库的 CSS 样式文件,例如:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
相关问题
HTML制作带放大镜的搜索框
以下是一个简单的HTML代码,可以实现带放大镜的搜索框。你可以在其中添加样式和JavaScript,以使其更适合你的网站。
```html
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
```
在这个代码中,我们使用了一个包含输入框和搜索按钮的`div`元素。在输入框中,我们使用了`placeholder`属性来设置默认文本。在搜索按钮中,我们使用了Font Awesome图标库中的放大镜图标。
你可以使用CSS来设置输入框和搜索按钮的样式,以及设置放大镜图标的样式。你还可以使用JavaScript来实现放大镜功能,当用户单击放大镜图标时,能够显示一个放大镜窗口。
hbuilder制作圆角搜索栏,无边框,搜索框旁边是放大镜的标志,搜索框与放大镜之间有条线
您可以使用以下代码来创建一个圆角搜索栏,无边框,搜索框旁边是放大镜的标志,搜索框与放大镜之间有条线:
```html
<style>
.search-box {
display: flex;
align-items: center;
padding: 5px;
border-radius: 20px;
border: none;
background-color: #f5f5f5;
}
.search-input {
flex: 1;
height: 30px;
margin-left: 10px;
border: none;
outline: none;
font-size: 16px;
background-color: transparent;
}
.search-icon {
margin-right: 10px;
}
.search-line {
height: 20px;
width: 1px;
background-color: #ccc;
margin: 0 10px;
}
</style>
<div class="search-box">
<div class="search-icon">
<img src="放大镜图标的路径" alt="搜索">
</div>
<div class="search-line"></div>
<input type="text" class="search-input" placeholder="请输入关键字">
</div>
```
其中,`放大镜图标的路径`需要替换为您自己的放大镜图标的路径。您可以调整样式以满足您的需要。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)