自定义 Flask-WTF 或 WTForms答案

【问题标题】：Customizing Flask-WTF or WTForms自定义 Flask-WTF 或 WTForms
【发布时间】：2018-09-03 10:32:26
【问题描述】：

我正在尝试将 Flask 集成为我正在使用的 UI 的后端。

不幸的是，UI 已经为表单设置了 CSS 和 JavaScript（以适应 UI 以及旧版本的 IE 和其他情况）。

我遇到的第一个问题是字段已经有了标签。如果我在模板中使用 .labels 属性：

{{ form.username.label }}

然后它会创建一个额外的标签，我似乎无法为 CSS/JavaScript 添加任何属性。但是，如果我关闭 .label 属性，那么它会在用户名输入上方创建一个额外的空白文本字段。

我的 forms.py 文件中的代码是：

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])

我错过了什么吗？

第二部分是向表单本身添加属性。我找到了如何使用 class_='classname' 添加 HTML class 属性，但 Flask-WTF 和 WTForms 文档似乎没有涉及任何其他属性（例如 autcomplete="off" 或 placholder="username"）

有没有什么方法可以用我刚刚丢失的 Flask-WTF 或 WTForms 来完成？我是否仅限于此类功能的手动属性和/或 Jinja 宏？我无法想象这是 WTForms 和 Flask-WTF 中缺少的东西，但我也没有在文档或 Google/StackOverflow 的任何地方看到它。

谢谢！

【问题讨论】：

标签： python flask wtforms flask-wtforms

【解决方案1】：

发生在WTForms : How to add "autofocus" attribute to a StringField 之后，我尝试使用相同的方法来解决我的问题。它奏效了。仍然不确定为什么 WTForms 或 Flask-WTForms 文档中没有涵盖这一点。

因此，对于标签，要让它们包含您需要的类或其他属性，请在模板中添加与上述 class_= 说明相同的标签。

所以在这种情况下：

{{ form.username.label(class_="ie9") }}

在渲染时将适当的类添加到标签中。

对于字符串输入，属性再次添加到模板中：

{{ form.username(class_="formplace", placeholder="Username", autocomplete="off", autofocus="true", size=32) }}

使用适当的 HTML 呈现字段中的类、占位符、自动完成、自动对焦和大小。

我确信这可以变得动态且可重复使用，但我只是想展示解决方案，因为我不能成为唯一遇到此问题的人。具体来说，是 0xTim 的解决方案让我找到了一些有用的东西。

【讨论】：

【解决方案2】：

除了上面提到的@Andy Lance，您还可以在烧瓶表单中使用render_kw。假设你有一个forms.py：

class CommentForm(FlaskForm):
    comment = TextAreaField('Comment', validators=[DataRequired()]) #<---------Add placeholder info
    submit = SubmitField('Post')

修改TextAreaField 以包含render_kw：

class CommentForm(FlaskForm):
    comment = TextAreaField('Comment', validators=[DataRequired()], render_kw={"placeholder": "Markdown Enabled"}) #<---------placeholder info added
    submit = SubmitField('Post')

您不必修改您的模板就可以显示关键字。将您的模板维护为（如果使用flask-bootstrap）：

{{ wtf.quick_form(form) }}

【讨论】：