html搜索框怎么做

创建一个HTML搜索框通常涉及以下步骤：

1. 创建HTML结构

使用`

```

2. 添加CSS样式

使用CSS来美化搜索框，包括设置宽度、高度、边框、背景色等。

```css

.search-form {

display: flex；

align-items: center；

justify-content: center；

margin-top: 100px；

}

.search-input {

padding: 10px；

font-size: 16px；

border: none；

border-radius: 20px；

box-shadow: 0 2px 4px rgba（0, 0, 0, 0.1）；

width: 300px；

transition: width 0.3s ease；

}

.search-button {

padding: 10px 20px；

font-size: 16px；

border: none；

border-radius: 20px；

background-color: 7FCC0B；

color: white；

cursor: pointer；

margin-left: 10px；

}

```

3. （可选）添加JavaScript功能

如果需要，可以使用JavaScript为搜索框添加交互功能，例如实时搜索建议。

```javascript

document.querySelector（'.search-form'）.addEventListener（'submit', function（event） {

event.preventDefault（）；

const query = document.querySelector（'.search-input'）.value；

// 在此处添加搜索逻辑

}）；

```

以上代码创建了一个简单的搜索框，包括表单结构、CSS样式和基本的JavaScript交互。你可以根据需要进一步自定义样式和功能