html表单和flask

1, 何谓表单?

表单是HTML页面中负责数据采集功能的部件。它往往由三个部分组成，即表单标签、表单域、表单按钮。我们可以通过表单，将用户输入的数据提交给服务端，并交由服务端进行处理。

表单标签

用于声明表单的范围，位于表单标签中的元素将被提交
语法:<form></form>
属性:Method,Enctype,action...

表单域

表单域包含了文本框，密码框等多种类型
语法:<input />
属性: type,name,value.

表单域的种类

文本框<...type = text>
密码框<...type=password>
文本区域<...type=textarea>
文件上传框<...type=file>
单选框<...type =radio>
复选框<...type=checkbox>
......

表单按钮

提交按钮
复位按钮
般按钮

2, 表单的提交方式

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编码

文件: 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>

与index痛目录的文件:checkValue.js

// 获取text文本和passwod的输入框
// function getValue(){
// 	var text=document.form1.text1.value;
// 	alert(text);
// 	alert(document.form1.password.value);
// }

// 获取单选框的值
// function getValue(){
// 	var text=document.form1.Option.value;
// 	alert(text);
// }

// 获取复选框的值,有点问题,没法获取选中的
function getValue(){
	var arr=document.form1.check;
	alert(arr[0].value);
	// alert(arr[1].value);
	// alert(arr);
}

flask表单开发案例

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 LoginForm(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=="jikexueyuan" and myForm.password.data=="123456" and myForm.validate():
			return redirect("http://www.jikexueyuan.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,debug=True)

文件: /templates/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>

flask开发的加法器

文件: index.py

from flask import Flask
from flask import render_template
from flask import redirect
from flask import url_for
from flask import request

app=Flask(__name__)

@app.route('/')
def index():
	return redirect(url_for('add'))

@app.route('/add',methods=['GET','POST'])
def add():
	if request.method =="POST":
		a=request.form['adder1']
		b=request.form['adder2']
		a=int(a)
		b=int(b)
		sum=a+b
		return render_template('index.html',adder1=str(a),adder2=str(b),message=str(sum))
	return render_template('index.html')

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

文件: templates/index.html

<html>
	<head>
	<script src ="cal.js" type="text/javascript"></script>
	<title>Calculator</title>
	</head>
	<body>
		<div align="center" style="margin-top:40px">
		<img src="{{url_for('static',filename='add.png')}}"><br>
		</div>
		<div align="center" style="margin-top:60px">
			<form name="form1" method='POST'>
					<input type="text" placeholder="加数" name="adder1" class="form-control" value="{{adder1}}">
					+
					<input type="text" placeholder="被加数" name="adder2"  class="form-control" value="{{adder2}}">
					=
					<input type="text" placeholder="总数" name="sum" readonly="readonly" class="form-control" value="{{message}}">
				<input type="submit" class="btn btn-lg btn-info" value="计算">
			</form>
		</div>
	</body>
	<footer>
		
	</footer>
</html>

文件: static/add.png

加法器的样式:

写入自己的博客中才能记得长久