使用Flask form 制作注册表单,并使用bootstrap美化
2017-12-14 22:23
369 查看
1.开发环境需要安装插件,flask-wtf插件.
2.login.html
3.在视图中增加,表单提交操作。引用的python文件在文章最后,检查一遍。
3.创建forms.py生成表单
4.创建config.py 作为配置文件
5视图文件别忘了增加import 的python文件,对比下面的检查一遍。
最后来张效果图
pip install flask-wtf
2.login.html
<head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"> </head> {% block navbar %} {{ nav.top.render() }} {% endblock %} <body> {% import 'bootstrap/wtf.html' as wtf %} <div align="center" > <form class="form" method="POST"> {{ form.hidden_tag() }} {{ wtf.form_field(form.email) }} {{ wtf.form_field(form.password) }} {{ wtf.form_field(form.submit) }} </form> </div> </body>
3.在视图中增加,表单提交操作。引用的python文件在文章最后,检查一遍。
@app.route('/login', methods=['GET', 'POST']) def login(): form = forms.LoginForm() if form.validate_on_submit(): return "ok" return render_template('login.html', form=form)
3.创建forms.py生成表单
#!flask/bin/env python #coding:utf-8 from flask_wtf import FlaskForm from wtforms.validators import DataRequired, Length, Email from wtforms import * class LoginForm(FlaskForm): email = StringField(u'邮箱', validators=[ DataRequired(message= u'邮箱不能为空'), Length(1, 64), Email(message= u'请输入有效的邮箱地址,比如:username@domain.com')]) password = PasswordField(u'密码', validators=[DataRequired(message= u'密码不能为空')]) submit = SubmitField(u'登录')
4.创建config.py 作为配置文件
# coding:utf-8 CSRF_ENABLED = True SECRET_KEY = 'bstc1234' DEBUG = True ITEMS_PER_PAGE = 10 #启动CSRF保护 #其中SECRET_KEY用来建立加密的令牌,用于验证Form表单提交
5视图文件别忘了增加import 的python文件,对比下面的检查一遍。
# coding:utf-8 from flask import Flask,render_template,request,url_for from flask_bootstrap import Bootstrap from flask_nav import Nav from flask_nav.elements import * import forms import config
最后来张效果图
相关文章推荐
- 实验五 注册表单制作及美化
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
- 编程心得+使用JS完成注册页面表单校验
- 使用Js完成注册页面表单校验
- 在rails 中,使用 simple_form 和 bootstrap 3.0 组件来美化radio button
- 使用bootstrap和jQuery制作下拉输入框
- 使用express+mongoDB搭建多人博客 学习(3)connect-flash和mongodb,表单注册
- 使用表单制作网页的五点技巧
- Bootstrap表单制作代码
- 一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service(2)--在事件注册表单上创建表单加载规则
- 使用DIV+css中的label.input来编写注册表单
- 全面解析Bootstrap表单样式的使用
- FormData表单数据对象(h5)快速收集表单信息(注册登录时使用的)
- 使用bootstrap制作搜索框
- bootstrapValidator表单验证使用方法
- 在jsp页面中使用bootstrap制作
- iCheck表单美化插件使用方法详解(含参数、事件等)
- bootstrap 使用jquery validation 插件 表单验证
- bootstrap 表单验证使用方法
- 使用VB实现邮箱自动注册(一):表单自动提交