【寶雞Pi桑線下交流群】Web技術交流內部資料3
時間：2023-06-02 19:57:02 | 來源：網站運營
時間：2023-06-02 19:57:02 來源：網站運營
【寶雞Pi桑線下交流群】Web技術交流內部資料3：
Part 1：表單 Form
表單（Form）可以看作超鏈接的升級版，允許用戶在發(fā)送請求時以post方法向服務器提交數據，因此表單也提供了一系列收集數據的控件。（!對比控件和元素的異同）
Web forms 是一種非常有效的交互工具，通常用于收集用戶數據，也用于控制用戶界面。然而，由于歷史和技術原因，如何充分利用它們并不總是顯而易見的。
Web forms 的 HTML元素構造一個或多個 form controls ，控件有時也被稱為 widgets，加上一些輔助構造整體表單的元素，常被稱為 HTML forms. 其中控件可以是單行或多行文本域，下拉框，按鈕等，大部分是用<input>元素創(chuàng)建的。
總的來說，如果我們想要通過一種使用體驗還不錯的方式從用戶處收集想要的數據，在驗證后由客戶端通過HTTP協(xié)議提交給服務器或應用程序，并得到一個反饋的話，Web forms技術是首選方案。雖然通過hyperlinks與URL的查詢字符串也能實現類似的功能，但事倍功半。
注意，這里提到超鏈接的目的是想表達，前端技術是建立request/response模式基礎上的，用不同的方法實現同一個目的，可能沒有實用價值，但可以幫助我們理解。
按
Your first form 一文的講述思路，首先搞明白什么是 web forms， 接著在紙上把想要的表單畫出來（畢竟界面設計是一件專業(yè)的事，所以只要看著正常就好?。詈蟛攀菙]起袖子干。
現在設計一個只有標簽，文本框和按鈕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屬性定義表單提交時的發(fā)送位置（URL）
- method屬性定義使用那種HTTP方法發(fā)送數據
而<input>元素堪稱表單的靈魂，它有一個重要的屬性type，缺省為text，即單行文本域（single-line text field）input元素看起來更像一個UI控件的集合。
<button>元素也有一個type屬性，枚舉類型，接受3個值（submit, reset, button），缺省為submit，向form元素描述的地址發(fā)送數據。而button值屏蔽了元素的默認行為，即什么也不做，這樣就能不受影響的自定義它的行為了。而reset值最好無視它。
最后<label>元素通過for屬性與input元素關聯起來，這樣點擊標簽就可以focus到關聯的文本框。
最后將新建的表單安置在服務器中：
@app.route("/forms")def form_one(): return render_template("form.html")Part 2：提交表單
客戶端使用HTTP協(xié)議向服務器發(fā)送請求，服務器使用相同的協(xié)議響應請求。而表單只是配置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數據。
在線咨詢
