web前端中怎么添加搜索框和button

在Web前端中，通常会使用HTML和CSS来构建搜索框和按钮的基本结构。这里是一个简单的例子：

<!-- HTML部分 -->
<form id="search-form">
  <input type="text" name="search-term" placeholder="输入关键词" id="search-input" />
  <button type="submit" id="search-button">搜索</button>
</form>

在这个代码片段中：
- `input[type="text"]` 创建了一个文本输入框，用户可以在其中输入搜索关键词；
- `placeholder` 属性设置了输入框的提示信息，让用户知道应该输入什么内容；
- `type="submit"` 的`button`标签创建了一个提交按钮，点击后会触发表单的默认行为（通常是发送请求到服务器）；
- `id` 属性用于后续通过JavaScript获取元素并操作。

接下来，你可以使用CSS来美化它们，比如调整颜色、字体、大小以及间距等：

#search-input {
  width: 250px;
  padding: 8px;
  font-size: 16px;
}

#search-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}

以上CSS将输入框的宽度设为250px，并设置了基本的样式；按钮则设置了绿色背景和白色文字，鼠标悬停时有改变效果。