完整的搜索框加按钮的代码
时间: 2024-05-03 11:21:53 浏览: 14
以下是一个完整的搜索框加按钮的HTML和CSS代码示例:
HTML代码:
```
<div class="search-container">
<form action="/search">
<input type="text" placeholder="Search..." name="q">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
```
CSS代码:
```
.search-container {
display: flex;
align-items: center;
margin-top: 10px;
}
.search-container input[type=text] {
padding: 10px;
border: none;
font-size: 17px;
width: 80%;
}
.search-container button {
padding: 10px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
width: 20%;
}
.search-container button:hover {
background: #ccc;
}
```
在这个示例中,我们使用了一个`<div>`元素来包含搜索框和搜索按钮。搜索框和搜索按钮都包含在一个`<form>`元素内,以便在提交搜索表单时能够将搜索框中的文本一起发送到服务器。
搜索框使用了一个`<input>`元素,并将其`type`属性设置为"text",以便用户可以在其中输入文本。我们还使用了`name`属性来指定搜索框中输入的文本应该被命名为"q",以便在提交表单时可以将其作为查询参数发送到服务器。
搜索按钮使用了一个`<button>`元素,并将其`type`属性设置为"submit",以便在点击按钮时提交搜索表单。我们还在按钮内放置了一个图标,以便使按钮更加美观。
CSS代码中,我们使用了`display: flex;`来将搜索框和搜索按钮水平对齐。我们还使用了`align-items: center;`来使它们垂直对齐。搜索框和搜索按钮的样式也进行了一些微调,以便使它们在页面上更加美观。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)