html搜索框怎么做

作者：风外听竹发布日期:2025-05-05 浏览:36

<!-- HTML 搜索框示例代码 -->
<!DOCTYPE html>
<html>
<head>
    <title>搜索框示例</title>
    <style>
        /* 简单的样式设置 */
        .search-box {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .search-button {
            padding: 10px 20px;
            margin-left: -5px; /* 让按钮和输入框更靠近 */
            border: 1px solid #ccc;
            border-radius: 0 5px 5px 0;
            background-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 搜索表单 -->
    <form action="/search" method="get">
        <input type="text" name="query" class="search-box" placeholder="请输入搜索内容...">
        <button type="submit" class="search-button">搜索</button>
    </form>
</body>
</html>

解释说明：

HTML部分:
- 使用<form>标签创建一个表单，action="/search"指定表单提交的目标URL，method="get"表示使用GET方法提交数据。
- <input type="text">用于创建文本输入框，name="query"是输入框的名称，placeholder属性用于显示提示文本。
- <button type="submit">用于创建提交按钮，点击后会将表单数据提交到指定的URL。
CSS部分:
- .search-box类设置了搜索框的样式，包括内边距、宽度、边框和圆角等。
- .search-button类设置了按钮的样式，使其与输入框更接近，并添加了背景颜色和鼠标悬停效果。

如果你有任何问题或需要进一步的修改，请告诉我！

上一篇：html单选

下一篇：html缓存