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>

<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

</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 @ 2015-09-01 00:13 飞牛冲天阅读(390) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

飞牛冲天

Flask 表单开发

公告