【宝鸡Pi桑线下交流群】Web技术交流内部资料3
时间：2023-06-02 19:57:02 | 来源：网站运营
时间：2023-06-02 19:57:02 来源：网站运营
【宝鸡Pi桑线下交流群】Web技术交流内部资料3：
Part 1：表单 Form
表单（Form）可以看作超链接的升级版，允许用户在发送请求时以post方法向服务器提交数据，因此表单也提供了一系列收集数据的控件。（!对比控件和元素的异同）
Web forms 是一种非常有效的交互工具，通常用于收集用户数据，也用于控制用户界面。然而，由于历史和技术原因，如何充分利用它们并不总是显而易见的。
Web forms 的 HTML元素构造一个或多个 form controls ，控件有时也被称为 widgets，加上一些辅助构造整体表单的元素，常被称为 HTML forms. 其中控件可以是单行或多行文本域，下拉框，按钮等，大部分是用<input>元素创建的。
总的来说，如果我们想要通过一种使用体验还不错的方式从用户处收集想要的数据，在验证后由客户端通过HTTP协议提交给服务器或应用程序，并得到一个反馈的话，Web forms技术是首选方案。虽然通过hyperlinks与URL的查询字符串也能实现类似的功能，但事倍功半。
注意，这里提到超链接的目的是想表达，前端技术是建立request/response模式基础上的，用不同的方法实现同一个目的，可能没有实用价值，但可以帮助我们理解。
按
Your first form 一文的讲述思路，首先搞明白什么是 web forms， 接着在纸上把想要的表单画出来（毕竟界面设计是一件专业的事，所以只要看着正常就好！），最后才是撸起袖子干。
现在设计一个只有标签，文本框和按钮3个元素的表单，在文本框输入名字后提交给服务器，返回
hello, yourname<!DOCTYPE html><html> <head> <meta charset="utf-8" </head> <body> <form action="hello" method="post"> <label for="name">用户名：</label> <input type="text" id="name" name="user_name"> <button type="submit">提交</button> </form> </body></html>表单始于<form>元素，它从形式上定义一个表单，其属性定义表单的行为方式，虽然所有的属性都是可选的，但标准的做法至少需要设置 action 与 method 属性。
- action属性定义表单提交时的发送位置（URL）
- method属性定义使用那种HTTP方法发送数据
而<input>元素堪称表单的灵魂，它有一个重要的属性type，缺省为text，即单行文本域（single-line text field）input元素看起来更像一个UI控件的集合。
<button>元素也有一个type属性，枚举类型，接受3个值（submit, reset, button），缺省为submit，向form元素描述的地址发送数据。而button值屏蔽了元素的默认行为，即什么也不做，这样就能不受影响的自定义它的行为了。而reset值最好无视它。
最后<label>元素通过for属性与input元素关联起来，这样点击标签就可以focus到关联的文本框。
最后将新建的表单安置在服务器中：
@app.route("/forms")def form_one(): return render_template("form.html")Part 2：提交表单
客户端使用HTTP协议向服务器发送请求，服务器使用相同的协议响应请求。而表单只是配置HTTP请求的一种方法。
HTTP请求由2部分组成：header包含一组浏览器能力相关的全局元数据，body包含请求信息的主体。
在使用GET方法时，HTTP request 的 body部分是空的，form数据附于URL；而使用POST方法时，form数据附于body
在Flask中，HTTP请求包含的信息由全局变量request对象提供。
flask.request 是Request类的实例，而 flask.Request 类是 werkzeug.wrappers.Request 的子类。
Flask 提供的一些对象是其他对象的代理。每个工作线程以相同的方式访问代理，但指向绑定到幕后每个工作线程的唯一对象。 flask.request是flask代理对象之一。
在服务器接收并响应表单：
<!-- hello.html --><!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <p>Hello {{name}}!</p> </body></html>-
from flask import Flask, requestfrom flask.templating import render_template@app.route("/hello", methods=['GET', 'POST'])def hello_world(): if request.method == 'POST': return render_template("hello.html", name=request.form['user_name']) else: return render_template("hello.html", name='world')这里用到了request对象的2个属性：method 与 form，分别对应HTTP方法与form数据。
在线咨询
