搜索表单 genre/keyword

Question

如何制作一个表格来搜索给定的关键字，例如不同的流派？例如，我有 5 个按钮，每个按钮都有不同的类型，例如动作、戏剧、恐怖……当我点击动作时，它会在我的服务器中搜索动作类型，并且只显示其中包含 "Action" 的结果？例如，它可以显示一个动作但也很恐怖的结果...

查看 w3school，我得到的最接近的是单选框或复选框...这不是我想要的...

我的表格，基本上是单击我想要的类型，然后我会得到属于该类型的书籍、音乐和电影。谢谢

   <form action='Search.php' method='GET'>
    <center>
        <h1> Search</h1>
            <input type='text' size='70' name='search'></br></br>
                <input type='submit' name='submit' value='Search' ></br>
    </center>
</form>

Answer 1

这样做的合乎逻辑的方法是有多个复选框，然后您可以操纵设计使其看起来像按钮

这是一个极简主义的例子，供您详细说明。这段代码的作用是隐藏输入，将标签样式设置为按钮，然后在选中时使其与输入交互。

要实现这一点：

Label 标签应该紧跟在输入之后
为输入分配 ID，并在标签上匹配它们

HTML:

<ul>
    <li>
        <input type="checkbox" id="chb1"/>
        <label for="chb1">Action</label>
    </li>
    <li>
        <input type="checkbox" id="chb2"/>
        <label for="chb2">Drama</label>
    </li>
    <li>
        <input type="checkbox" id="chb3"/>
        <label for="chb3">Comedy</label>
    </li>
</ul>

CSS:

ul {
    padding: 0;
    margin: 0;
    list-style: 0;
    text-align: center
}
li {
    display: inline-block;
}
input[type="checkbox"] {
    display: none;
}
label {
    display: inline-block;
    padding: 3px 5px;
    color: #fff;
    background: #690;
    border: 1px solid #999;
}
input[type="checkbox"]:checked + label {
    background: #309;
}

在 JsFiddle 上测试：https://jsfiddle.net/vkq3ow90/

搜索表单 genre/keyword

Search form genre/keyword

html