將 css 類添加到 Jinja 模板以獲取表單

Question

我正在將 HTML 模板復制到 flask 應用程序中。 它帶有自己的樣式表，我已經使它與頁面上的 static 元素一起使用。 我的問題是我嘗試使用 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 模板中。 我還沒有弄清楚如何添加 rest。 感謝您對此的幫助。

Answer 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") }}

嘗試這個