如何使用 Flask WTForms 创建多 Select 选项

Question

我想在我的网页上添加一个表单，让用户 select 有多个选项（不在下拉列表中）。例如，如果有3个可能的项目，它们应该如下列出：

 ITEM 1                           ITEM 2                    ITEM 3

它们应该放在单独的“盒子”中，这应该 select 可以。我不想在下拉列表或列表视图中执行此操作。我有哪些选择？

Answer 1

我想我会使用 checkbox 样式。您可以在 Flask/WTF 中执行此操作，但这里是 objective:

body {
  background: white;
  color: #323232;
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Helvetica neue, roboto;
}
input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: #ccc;
  font-style: italic;
  padding: 20px;
  cursor:pointer;
} 
input[type=checkbox]:checked + label {
  background: #f00;
  font-style: normal;
}

<div style="inline-block">
    <input type="checkbox" id="toggle" name="toggle" class="hideThis">
    <label for="toggle">Toggle</label>
</div>
<div style="inline-block">
    <input type="checkbox" id="toggle2" name="toggle2" class="hideThis">
    <label for="toggle2">Toggle</label>
</div>
<div style="inline-block">
    <input type="checkbox" id="toggle3" name="toggle3" class="hideThis">
    <label for="toggle3">Toggle</label>
</div>

如何使用 Flask WTForms 创建多 Select 选项

How to Use Flask WTForms to Create Multi-Select Option

html

python

flask

flask-wtforms