Artificial Intelligence for Beginners in Cau Giay, Hanoi

1. Collecting User Data

Interactive apps need two-way flow: visitors submit data and the server processes it. This lesson covers HTML forms, POST handling in Flask, reading form fields, and checking requests in the browser Network tab.

2. GET vs POST

• GET — retrieve data (loading a page)
• POST — send data to the server (form submit, credentials, ML payloads)

3. HTML Form (input.html)

  
  Send

• action="/submit" — where data is sent
• method="POST" — how it is sent
• name="username" — key Flask uses to read the value

4. Flask Backend

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/input")
def input_page():
    return render_template("input.html")

@app.route("/submit", methods=["POST"])
def submit():
    name = request.form["username"]
    return f"Hello {name}"

if __name__ == "__main__":
    app.run(debug=True)

5. Test Flow

1. Run the app and open /input
2. Type a name (e.g. Ahmad) and click Send
3. Browser goes to /submit and shows Hello Ahmad

6. Network Tab Check

Inspect → Network → submit the form. The /submit entry should show Method POST, Status 200 OK, and response body Hello Ahmad.