Flask表单:自定义表单样式

这篇文章总结了控制表单样式的几种方式和常见的问题。

使用Flask-WTF

在表单类里控制样式

我们可以在表单类里传入一个字典(render_kw),把需要添加到字段的属性以键值对的形式写进去,像这样:

在HTML里渲染表单:

渲染的结果:

注意事项:字段名将被作为id的值,这可能会和你定义的其他同名元素冲突。

在渲染时控制样式

我们也可以在渲染时传入字段的属性(不使用render_kw),类似这样:

渲染后的结果和上面一样。

render_kw在WTForms 2.1及以上版本适用。

使用Flask-Bootstrap

使用Flask-Bootstrap提供的表单函数来渲染表单时,也可以像上面那样在表单类或是渲染函数里传入字段的属性:

这里需要先导入Flask-Bootstrap提供的表单模板,另外完整的表单形式见Flask表单系列第一篇文章

这里需要注意的是,Flask-Bootstrap会给表单所有字段添加一个form-control来控制样式,这时你再通过render_kw传入已经被定义的属性(class)会失败。如果要传入指定的类,可以在渲染时传入并且增加form-control类

或是:

在一些文档里,推荐使用class_=’ ‘的方式来传入类,因为class是Python的保留关键字。

 

小技巧:在输入框里添加图标

有一些网站会在表单左侧放一个图标来增加交互性,比如这样:

表单内的图标

表单内的图标

如果是普通的表单,那么使用Bootstrap提供的表单验证状态类,可以很容易的实现,但是使用Wtforms渲染表单却没法实现。我们可以这样解决:

在CSS里定义一个类,将glyphicon图标的base64数据作为背景图片:

然后在模板里渲染时传入这个类:

图标(glyphicon)的base64数据可以在这个网站上可以获取到。

另外,也可以使用一个小图片(25*25大小较合适)来代替base64数据,像这样:

实际效果

实际效果

 

相关链接

  1. http://wtforms.readthedocs.io/en/latest/fields.html#the-field-base-class
  2. http://stackoverflow.com/questions/39520899/flask-wtf-forms-adding-a-glyphicon-in-a-form-field

– – – – –

更多关于Flask和Web开发的优质原创内容,欢迎关注Hello, Flask! – 知乎专栏

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*