如何制作 HTML 搜索栏

2025 年 3 月 25 日 | 阅读 2 分钟

使用 HTML 和 CSS

如果我们想使用 HTML 和内部 CSS 来制作搜索栏，那么我们需要遵循下面给出的步骤。使用这些步骤，我们可以在浏览器中轻松地在网页上看到搜索栏。

第一步：首先，我们必须在任何文本编辑器中键入 HTML 代码，或者在文本编辑器中打开现有的 HTML 文件，我们想在其中使用 CSS 和 HTML 代码来制作搜索栏。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Search Bar using Html and CSS
</Title>
</Head>
<Body> 
Hello User!....   <br>
Html Tutorial   <br>
This page helps us to understand how to make a search bar .  <br>
</Body>
</Html>

第二步：现在，我们需要将光标放在 body 标签中我们想要放置搜索栏的位置。然后，在该位置键入 <form> 标签。

第三步：现在，我们需要使用带有 type 属性的 <input> 标签。然后，在 type 属性中放置文本值。然后，在 <input> 标签中键入 placeholder 和 name 属性。

<form> 
<input type="text" placeholder=" Search...." name="search"> 

第四步：现在，我们需要使用带有 type 属性的 button 标签。然后在 type 属性中放置 submit 值。然后，我们必须关闭 </button> 标签。最后，我们必须关闭 </form> 标签。

<form> 
<input type="text" placeholder=" Search...." name="search"> 
<button type="submit">Submit</button> 
</form>

第五步：然后，我们必须在 <head> 标签的开始和结束之间使用以下 CSS 代码。

<style>
.searchbox {
float: left;
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.searchbox button {

padding: 8px;
margin-top: 10px;
margin-left: 10px;
background: orange;
font-size: 20px;
border: none;
cursor: pointer;
}
.searchbox button:hover {
background: blue;
}
</style>

步骤 6：最后，我们必须保存 HTML 文件，然后在浏览器中运行该文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Search Bar using Html and CSS
</Title>
<style>
.searchbox {
float: left;
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.searchbox button {

padding: 8px;
margin-top: 10px;
margin-left: 10px;
background: orange;
font-size: 20px;
border: none;
cursor: pointer;
}
.searchbox button:hover {
background: blue;
}
</style>
</Head>
<Body> 
Hello User!....   <br>
Html Tutorial   <br>
This page helps us to understand how to make a search bar . <br>
<div class="searchbox">
<form> 
<input type="text" placeholder=" Search...." name="search"> 
<button type="submit">Submit</button> 
</form>
</div> 
</Body>
</Html>

上述 HTML 代码的输出显示在以下屏幕截图中

下一个主题如何在 HTML 中让文本环绕图片

如何制作 HTML 搜索栏

使用 HTML 和 CSS

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何制作 HTML 搜索栏

使用 HTML 和 CSS

相关帖子

Web 3 将如何改变我们的生活

HTML Android 编译器

IFrame Onload 事件

如何在 HTML 中突出显示文本

HTML 长度

如何在 HTML 中添加社交媒体图标

Hspace

如何创建 HTML 文本框

HTML 注入

HTML 按钮 disabled

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器