Flask 表单开发

何谓表单?
表单是HTML页面中负责数据采集功能的部件。它往往由三个部分组成,即表单标签、表单域、表单按钮。我们可以通过表单,将用户输入数据提交给服务端,并交由服务端进行处理。
表单标签
用于声明表单的范围,位于表单标签中的元素将被提交
语法:<form></form>
属性:Method, Enctype, action ...
表单域
表单域包含了文本框,密码框等多种类型
语法:<input ……/>
属性:type, name, value ......
表单域的种类
文本框:<...type = text>
密码框:<...type = password>
文本区域:<...type = textarea>
文本上传框:<...type = file>
单选框:<...type = radio>
复选框:<...type = checkbox>
......
表单按钮
提交按钮
复位按钮
一般按钮

实例:一个含有多种元素的表单
使用 HTML 语言,尝试编写一个含有多种元素的表单。并进行简单排版。同时,尝试通过JavaScript取得页面元素的值。

 

index.html:
<html>

<head>
<script type = "text/javascript" src = "checkValue.js"></script>
</head>

<body>

<form name = "form1">
<input type = "text" placeholder = "Text" name = "text1" />
<input type = "password" placeholder = "password" name = "password" />
<textarea placeholder = "Textarea" name = "textarea" style = "resize:none"></textarea>
<input type = "file" name = "file" />
<input type = "radio" name = "Option" value = "Option1" />Option 1
<input type = "radio" name = "Option" value = "Option2" />Option 2
<input type = "checkbox" name = "check" value = "Option1" />Option 1
<input type = "checkbox" name = "check" value = "Option2" />Option 2

<input type = "submit" value = "Submit" />
<input type = "reset" value = "Reset" />
<input type = "button" value = "button" onclick = "getValue()"/>
</form>

</body>

</html>

checkValue.js:
function getValue(){
//var text = document.form1.text1.value; 输入框或者单选框(把text1改为Option即可)
var arr = document.form1.check;//多选框
alert(arr[0].value);
}


表单的提交方式
GET和POST
GET方式通过URL提交数据,数据在URL中可以看到
POST方式,数据放置在HTML Header中提交
例如:GET方式:www.baidu.com/?wd=value
POST方式:在HTTP头中提交wd=value

两种提交方式的区别
GET请求可以被浏览器缓存
POST所请求的URL可以被缓存,但数据不会被缓存
POST请求不便于分享
POST请求没有长度限制
GET请求的数据暴露在URL中,会带来一些安全问题

GET方式的适用场合
单存的请求数据,不进行其它操作
表单数据较短,不超过1024个字符
对安全性要求一般的场合
POST方式的适用场合
数据不仅仅用于请求,例如,需要将数据插入数据库内
表单数据过长时
要传送的数据不是ASCII编码


实战:用Flask开发用户管理
使用Flask框架,配合HTML和JavaScript程序,编写一个页面。该页面判断用户提交的用户名和密码是否分别为feiniuchongtian和123456,如果是则跳转到百度首页,否则返回错误信息。

index.html(注:要放在template文件夹中):
<html>
<head></head>
<body>
<div align = "center">
<h1>User Management</h1>
{% if message %} {{message}} {% endif %}
<form method = "post">
<input type = "text" name = "username" placeholder = "username" />
<br/>
<input type = "password" name = "password" placeholder = "password"/>
<br/>
<input type = "submit" value = "submit" />
<input type = "reset" value = "reset" />
</form>
</div>
</body>
</html>

main.py文件:
from flask import Flask
from flask import request
from flask import render_template
from flask import redirect

app = Flask(__name__)

@app.route("/user", methods = ['GET', 'POST'])
def login():
if request.method = 'POST':
username = request.form['username']
password = request.form['password']
if username == "feiniuchongtian" and password == "12345":
return redirect("http://www.baidu.com")
else:
message = "Login Failed"
return render_template('index.html', message = message)
return render_template('index.html')

if __name__ == "__main__":
app.run(port = 8080)

打开终端:~$ python main.py
127.0.0.1:8080/user

为使代码更加简洁,我们可以使用Flask的扩展wtf
在终端输入:sudo pip install Flask-wtf 进行安装

以上的 main.py文件可修改为:
from flask import Flask
from flask import request
from flask import render_template
from flask import redirect

app = Flask(__name__)

from wtforms import Form,TextField,PasswordField,validators

class LognForm(Form):
username = TextField("username", [validators.Required()])
password = PasswordField("password", [validators.Required()])

@app.route("/user", methods = ['GET', 'POST'])
def login():
myForm = LoginForm(request.form)
if request.method = 'POST':
if myForm.username.data == "feiniuchongtian" and myForm.password.data == "12345" and myForm.validate():
return redirect("http://www.baidu.com")
else:
message = "Login Failed"
return render_template('index.html', message = message, form = myForm)
return render_template('index.html', form = myForm)

if __name__ == "__main__":
app.run(port = 8080)

以上的index.html文件改为:
<html>
<head></head>
<body>
<div align = "center">
<h1>User Management</h1>
{% if message %} {{message}} {% endif %}
<form method = "post">
Username : {{ form.username }}
<br/>
Password : {{ form.password }}
<br/>
<input type = "submit" value = "submit" />
<input type = "reset" value = "reset" />
</form>
</div>
</body>
</html>

posted @   飞牛冲天  阅读(390)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示