Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
369 views
in Technique[技术] by (71.8m points)

python - Using Flask-WTForms, how do I style my form section of the html?

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...