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 
加法器的样式:
