SayHello 项目如何不用宏,手动渲染表单代码?(已经解决)


#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文件通过选择器进行修改


#5

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

新年啦,祝您新年快乐!