Question

我正在尝试将Flask整合为我正在使用的用户界面的后端。

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

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

{{ form.username.label }}

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

forms.py 文件中的代码为：

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

我错过了什么吗？

第二部分是向表单本身添加属性。我已经找到了如何使用 class _ =＆＃39; classname＆＃39; 添加HTML 类属性，但Flask-WTF和WTForms文档没有＆＃39 ; t似乎触及任何其他属性（例如 autcomplete =＆＃34; off＆＃34; 或 placholder =＆＃34;用户名＆＃34; ）

有没有办法通过我刚刚失踪的Flask-WTF或WTForms实现这一目标？我是否仅限于此类功能的手动属性和/或Jinja宏？我无法想象WTForms和Flask-WTF会遗漏这些东西，但我也不会在文档或Google / StackOverflow上的任何地方看到它。

谢谢！

Answer 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的解决方案，可以让我找到可用的东西。

Answer 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) }}

自定义Flask-WTF或WTForms

2 个答案: