web表单
程序员文章站
2022-05-29 23:11:59
...
1.表单介绍
表单通常用来收集网页访问者信息，常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等。一个表单通常包括多个表单控件，一些常用的表单控件如下：
添加文本控件：单行文本框、密码框、多行文本框（文本域）
选择控件：单选按钮、复选框、下拉列表
上传文件控件
提交表单控件：提交按钮、图像按钮
html5还加入了日期控件、电子邮件和URL输入控件、搜索输入控件。
下表列出了一些表单控件的元素以及部分属性，元素属性中name和对应的数据会成对地发到服务器，所以大部分控件需要设置name属性。
| 控件名字 | 元素 | 部分元素元素特性 |
| 单行文本框 | <input type="text"> | name,maxlength |
| 密码框 | <input type="password"> | name,size,maxlength |
| 文本域 | <textarea> | name |
| 单选按钮 | <input type=ratio> | name,value(发送到服务器的值),checked(设置为checked表示加载时选定) |
| 复选框 | <input "type"="checkbox"> | name,value(发送到服务器的值),checked |
| 下拉框 | <select>内使用<option>来表示每一项 | name |
| <option> | value,selected(设置为selected表示默认选择) | |
| 多选框 | <select multiple='multiple'>内使用<option>来表示每一项 | |
| 文件上传域 | <input type="file"> | |
| 提交按钮 | <input type="submit"> | name(非必要),value(按钮文本) |
| 图像按钮 | <input type="image"> | |
| html5日期控件 | <input type="date"> | name |
| html5电子邮件 | <input type="email"> | name |
| html5URL输入控件 | <input type="url"> | name |
| html5搜索输入控件 | <input type="search'> |
2.表单的工作原理
用户填写表单，然后单击一个按钮将所填信息提交到服务器，为了区分各类输入数据，表单的内容采用“名称/值”这样成对的格式。在Flask web服务端，可以使用request.form访问到用户提交的表单。服务器接收到表单内容，通常会再返回给浏览器一个页面。
3.表单结构
在服务器返回的html页面中，所有表单控件位于<form>元素中。比如可以构建一个包含一个文本输入框和提交按钮的表单：
hello.html
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta name="charset" content="utf8"/>
</head>
<body>
{% if name %}
<h1>Hello,{{name}}</h1>
{% else %}
<h1>Hello,Stranger!</h1>
{% endif %}
<form actions="http://127.0.0.1:8000" method="post">
<label>What your name?<input type="text" name="name" /></label>
<input type="submit" value="提交">
</form>
</body>
</html>同时在服务端脚本中获取该表单并显示出来：
#coding:utf-8
from flask import Flask,request,render_template
app=Flask(__name__)
@app.route("/",methods=["POST","GET"])
def index():
name=None
form=None
if request.method=="POST":
form=request.form
name=form["name"]
return render_template("hello.html",name=name)
if __name__=="__main__":
app.run(debug=True,host="0.0.0.0",port=8000)可以使用CSS来调整表单表现，同时可以使用JS对输入数据进行表单验证，在浏览器就初步检查用户输入的表单数据是否符合要求，这比发送到服务器服务器再返回结果来得快。
4.一个包含各类表单控件的例子：
hello.html
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<meta charset="utf8"/>
<link rel="stylesheet" href="/static/css/style.css" type="text/css" />
</head>
<body>
<form actions="http://127.0.0.1:8000" method="post">
<fieldset>
<legend>个人信息</legend>
<div class="info">
<label>姓名：<input type="text" name="name" size="30" maxlength="100" /></label>
<br />
<label>电子邮件：<input type="email" size="30" maxlength="100" name="email" /></label>
</div>
<div class="info">
<label>性别：</labe>
<label><input type="radio" name="sex" value="male">男</label>
<label><input type="radio" name="sex" value="female">女</label>
</div>
<div class="info">
<label for="age">年龄：</label>
<select name="age" class="age">
{% for age in range(100) %}
<option value="{{age+1}}">{{age+1}}</option>
{% endfor %}
</select>
</div>
</fieldset>
<fieldset>
<legend>一些问题</legend>
<div class="ques">
<span>你喜欢的运动是什么？</span>
<br />
<label><input type="checkbox" name="run" />跑步</label>
<label><input type="checkbox" name="swim" />游泳</label>
<br />
</div>
<div class="ques">
<label for="comments">你有什么想说的吗？</label>
<br />
<textarea rows="5" cols="40" id="comments"></textarea>
</div>
</fieldset>
<input id="submit" type="submit" value="提交">
</form>
</body>
</html>
static/css/style.css:
input {
font-size:120%;
color:#5a5854;
background-color:#f2f2f2;
border:1px solid #bdbdbd;
padding:5px 5px 5px 5px;
margin-bottom:10px;
border-radius:5px;
}
#submit {
width:100px;
height:45px;
color:white;
background-color:rgb(0,150,255);
}
#submit:focus {
background-color:rgb(0,50,255)
}
input:focus,input:hover {
background-color:#ffffff;
border:1px solid #blele4;
}
select {
border-radius:2px;
border:1px solid #bdbdbd;
}
textarea {
border-radius:5px;
border:1px solid #bdbdbd;
}
fieldset {
width:90%;
border:1px inset rgb(0,150,255);
border-radius:5px;
padding:10px;
margin:10px;
}
legend {
background-color:#efeefef;
border:1px solid rgb(0,170,255);
padding:5px 10px;
text-align:left;
border-radius:5px;
}
div {
float:left;
text-align:right;
clear:left;
margin:5px;
padding:5px;
}
div.ques {
text-align:left;
}这是一个简单的表单示例，自己实现了表单以及样式控制，提交表单后表单可以通过Flask的请求对象request获取表单数据从而处理表单。
但是在Flask中更方便的方法是使用Flask-WTF扩展，可以便捷地处理表单，Flask-WTF在下一篇博客介绍。
下一篇： 使c++控制台的文字变得多彩