Question

如何制作搜索特定关键字（如不同类型）的表单？例如，我有5个按钮，每个按钮都有不同的类型，如Action，Drama，Horror ...当我点击Action时，它会在我的服务器中搜索Action类型，并且只显示包含“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/

搜索表单类型/关键字

1 个答案: