SayHello 项目如何不用宏，手动渲染表单代码？（已经解决）

HelloFlask Flask Web 开发实战
1

在书中示例程序sayhello中，
sayhello\templates\index.html
表单为

class HelloForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired(), Length(1, 20)])
    body = TextAreaField('Message', validators=[DataRequired(), Length(1, 200)])
    submit = SubmitField()

前端用 render_form() 验证和渲染

    <div class="hello-form">
        {{ render_form(form, action=request.full_path) }}
    </div>

我想改成手动处理

        <form action="request.full_path" method="post">
            <div class="form-group">
                  {{ form.name(class='form-control') }}
            </div>
            <div class="form-group">
                  {{ form.body(class='form-control') }}
            </div>
            {{ form.submit(class='btn btn-primary') }}
        </form>

但是不成功，想请教下是哪里写错了，非常感谢
整个demo的源码就是 书中的sayhello项目

同时我还想请教一个问题 就是用render_form一下就渲染完所有的很方便，但是样式不是我想要的请问还能用这个方法么，比如可以用这个方法渲染，在哪里再具体设置样式，比如这个项目渲染出来是上下两个输入框，假如我依然用render_form渲染，但是想让两个输入框并排在一行，我应该怎么去做呢，非常感谢。

2

”不成功“是什么意思？无法渲染还是无法验证？
Flask-WTF默认为表单开启CSRF保护，你手动处理时忘记渲染csrf_token字段了

“让两个输入框并排在一行”应该可以通过自定义CSS实现

3

非常感谢，问题解决了，确实少一句 {{ form.csrf_token }}

        <form action="\" method="post">
            {{ form.csrf_token }}
            <div class="form-group">
                  {{ form.name(class='form-control') }}
            </div>
            <div class="form-group">
                  {{ form.body(class='form-control') }}
            </div>
            {{ form.submit(class='btn btn-primary') }}
        </form>

加上就成功跑起来了

第二个问题我是想请教把写好的CSS写在哪里

{{ render_form(form, action=request.full_path) }}

怎么实现我比较没有思路，比如我就想改第一个输入框的样式
我改的这种分别处理表单，我可以单独处理样式

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

那对这句整体渲染的怎么修改呢

{{ render_form(form, action=request.full_path) }}

怎么才能指定修改谁，css又放在这句话的哪里呢，麻烦您了

4

如果用的是Bootstrap的话，试试

{{ render_form(form, action=request.full_path, class="form-inline") }}

你想单独处理表单的话，自己写一个渲染字段render_field宏，比如下面这个：

{% macro form_field(field) %}
    {{ field.label }}<br>
    {{ field(**kwargs) }}<br> # 在模板中调用字段时可传入关键字参数添加额外HTML属性
    {% if field.errors -%}
        {% for error in field.errors -%}
            <small class="error">{{ error }}</small><br>
        {%- endfor %}
    {%- endif %}
{% endmacro %}

向相应的字段传入class属性，然后在CSS文件通过选择器进行修改

1 个赞
5

非常感谢，我按您写的尝试一下，辛苦您了，回复的有些晚，抱歉。

新年啦，祝您新年快乐！

2 个赞