HTML 如何在文本输入框中添加“搜索”按钮

在本文中，我们将介绍如何在HTML文本输入框中添加一个“搜索”按钮。

阅读更多：HTML 教程

使用input元素创建文本输入框

在HTML中，可以使用input元素创建文本输入框。下面是一个例子：

<input type="text" placeholder="请输入关键字">

在这个例子中，我们使用type属性将input元素的类型设置为”text”，这样就创建了一个文本输入框。同时，我们使用placeholder属性设置了一个提示文本。

添加搜索按钮

要在文本输入框中添加一个“搜索”按钮，可以在输入框旁边添加一个按钮元素。下面是一个例子：

<input type="text" placeholder="请输入关键字">
<button type="submit">搜索</button>

在这个例子中，我们在输入框后面添加了一个button元素，设置了按钮的类型为”submit”，并将按钮文本设置为”搜索”。

使用CSS样式美化按钮

为了使按钮看起来更加美观，可以使用CSS样式进行美化。下面是一个例子：

<style>
  .search-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
</style>

<input type="text" placeholder="请输入关键字">
<button class="search-button" type="submit">搜索</button>

在这个例子中，我们使用内联样式来设置按钮的背景色、边框、颜色等属性，使其具有更好的外观。

使用JavaScript实现搜索功能

为了使搜索按钮实现实际的搜索功能，可以使用JavaScript代码监听按钮的点击事件，并获取文本输入框中的内容。下面是一个例子：

<script>
  function search() {
    var keyword = document.getElementById("keyword").value;
    // 进行搜索操作
    alert("搜索关键字：" + keyword);
  }
</script>

<input id="keyword" type="text" placeholder="请输入关键字">
<button class="search-button" type="button" onclick="search()">搜索</button>