使用Flask-WTForms，我如何设计我的表单部分的HTML？ [英] Using Flask-WTForms, how do I style my form section of the html?

问题描述

我读了Flask-WTF极其简化的wiki，并不能理解我能用它做什么。我现在的印象是HTML的< form> 部分现在只能看上去像

 < form method =post> 
 {{form.hidden_​​tag（）}} 
 {{form.name}} 
< input type =submit> 
< / form> 
  

但是我真的想要使用物化风格，例如：

 < div class =row> 
< div class =input-field col s6> 
< i class =material-icons prefix> account_circle< / i> 
< input value =FNid =first_nametype =textclass =validate> 
< label class =activefor =first_name>名字< / label> 
< / div> 
< div class =input-field col s6> 
< input value =LNid =last_nametype =textclass =validate> 
< label class =activefor =last_name>姓氏< / label> 
< / div> 
< / div> 
  

我可以在哪里找到 {{form.first_name}} 多一点：$ b​​ $ b例如，我想要像Materialized datepicker （一个很好的弹出日历，让用户选择日期），这应该在< input class ='datepicker'length =50> ，但现在我正在替换整个< input> line with {{form.date}} ...我失去了编辑这个类的权限，而不是。


解决方案< rel =nofollow>调用，这些属性将在它们呈现的输入上设置。将样式，JavaScript功能等所需的属性传递给字段，而不仅仅是引用字段。标签的行为方式是一样的，可以通过 field.label 来访问。

对于，值，类型， id 和 name 不需要传递，因为它们是自动处理的。有一些规则用于处理属性的特殊情况。如果属性名称是Python关键字（如 class ），则附加下划线： class _ 。虚线不是有效的Python名称，所以单词之间的下划线被转换为破折号; data_toggle 变成数据切换。

  {{form.first_name（class _ ='validate'）}} 
 {{form.first_name.label（class _ ='active'）}} 
 
 { form.begins（class _ ='datepicker'，length = 50）}} 
  

链接的方法需要直接调用，这些文档只是描述调用字段时的行为。

I read through Flask-WTF extremely simplified wiki, and couldn't understand much about what I can do with it. I am under the impression that the <form> section of the html now can only look like

<form method="post">
    {{ form.hidden_tag() }}
    {{ form.name }}
    <input type="submit">
</form>

But I really want to style my using materialized such as:

        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input value="FN" id="first_name" type="text" class="validate">
                <label class="active" for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
                <input value="LN" id="last_name" type="text" class="validate">
                <label class="active" for="last_name">Last Name</label>
            </div>
        </div>

Where can I fit {{ form.first_name }} and {{ form.last_name }} into?

EDIT: Let me elaborate on my answer a bit more: For example, I want something like Materialized datepicker (a good pop up calendar that lets user to choose the date), this should be in the <input class='datepicker' length="50">, but now that I am replacing the whole <input> line with {{ form.date }}... I lost that privilege to edit the class and what not.

解决方案

WTForms fields can be called with attributes that will be set on the input they render. Pass the attributes you need for styling, JavaScript functionality, etc. to the fields, rather than just referencing the fields. The labels behave the same way, and can be accessed with field.label.

for, value, type, id, and name do not need to be passed, as they are handled automatically. There are some rules for handling special cases of attributes. If an attribute name is a Python keyword such as class, append an underscore: class_. Dashes are not valid Python names, so underscores between words are converted to dashes; data_toggle becomes data-toggle.

{{ form.first_name(class_='validate') }}
{{ form.first_name.label(class_='active') }}

{{ form.begins(class_='datepicker', length=50) }}

Note that neither of the linked methods need to be called directly, those docs just describe the behavior when calling the fields.

这篇关于使用Flask-WTForms，我如何设计我的表单部分的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！