为表单添加 CSS 类到 Jinja 模板答案

【问题标题】：Add css classes to Jinja template for form为表单添加 CSS 类到 Jinja 模板
【发布时间】：2020-05-10 15:40:45
【问题描述】：

我正在将 HTML 模板复制到烧瓶应用程序中。它带有自己的样式表，我已经使它与页面上的静态元素一起工作。我的问题是我尝试使用 Jinja 模板创建的联系我们表单看起来非常基本。我需要弄清楚如何将现有的样式模板添加到表单字段中。

在原始模板中，表单字段如下所示：

<div class="form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>

在我的新形式中，这就是我所拥有的：

<div class="form-group">
            {{ form.name(class="form-control") }}
            </div>

            <div class="form-group">
            {{ form.email.label }}
            {{ form.email }}
            </div>

            <div class="form-group">
            {{ form.subject.label }}
            {{ form.subject }}
            </div>


            <div class="form-group">
            {{ form.message.label }}
            {{ form.message }}
            </div>


            {{ form.submit }}

如您所见，我一直在尝试通过在表单名称中添加 class="form-control" 来将原始 css 类添加到 Jinja 模板中。我还没有弄清楚如何添加其余部分。非常感谢您的帮助。

【问题讨论】：

这能解决你的问题吗...stackoverflow.com/a/24841273
我看了那篇帖子，想到了将class="form-control" 添加到我的代码中。不知道如何让其余的样式元素到位。

标签： css flask css-selectors jinja2 flask-wtforms

【解决方案1】：

<div class="form-group">
        {{ form.name(class="form-control") }}
        </div>

        <div class="form-group">
        {{ form.email.label(class="yourclass") }}
        {{ form.email(class="yourclass") }}
        </div>

        <div class="form-group">
        {{ form.subject.label(class="yourclass") }}
        {{ form.subject(class="yourclass") }}
        </div>


        <div class="form-group">
        {{ form.message.label(class="yourclass") }}
        {{ form.message(class="yourclass") }}
        </div>


        {{ form.submit(class="yourclass") }}

试试这个

【讨论】：