新手必备！HTML轻松创建搜索框，一键直达百度！

2023-11-01 18:19:46

制作强大的搜索框，让百度搜索触手可及！

了解搜索框的基本组成部分

就像制作美味佳肴需要食材一样，制作一个功能齐全的搜索框也需要了解它的基本组成部分。搜索框一般由三部分组成：

表单标签 (form)： 这是搜索表单的骨架，它告诉浏览器：“嘿，这是一个搜索框，准备收纳信息。”
输入框 (input)： 这是用户大显身手的舞台，他们可以在此输入要搜索的关键词。
提交按钮 (input)： 当用户迫不及待地想找到答案时，点击这个按钮就会将搜索请求发送到搜索引擎。

使用 HTML 搭建搜索表单

现在，我们来搭建搜索表单。首先，我们使用<form>标签创建一个表单，并指定表单数据将被发送到百度搜索的 URL。接下来，我们添加<input>标签，指定其类型为文本输入，并为其指定一个名称。最后，我们再添加一个<input>标签，指定其类型为提交按钮，并为其设置一个性的文本，例如“搜索”。

代码示例：

<form action="https://www.baidu.com/s" method="get">
  <input type="text" name="wd">
  <input type="submit" value="搜索">
</form>

让搜索框成为网页的一部分

搭建好搜索表单后，我们需要将它添加到网页中。我们将它放入一个<div>元素中，并为其设置一个 ID，以便通过 CSS 进行样式化。

代码示例：

<div id="search">
  <form action="https://www.baidu.com/s" method="get">
    <input type="text" name="wd">
    <input type="submit" value="搜索">
  </form>
</div>

用 CSS 美化搜索框

现在，我们的搜索框已经准备就绪，但我们可以通过 CSS 来让它更美观、更符合网站风格。我们可以设置输入框的宽度、边框和字体大小，也可以设置按钮的背景颜色和悬停效果。

代码示例：

#search {
  width: 300px;
  margin: 0 auto;
}

#search input[type="text"] {
  width: 250px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 16px;
}

#search input[type="submit"] {
  width: 50px;
  height: 30px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

#search input[type="submit"]:hover {
  background-color: #333;
}