HAKATEMIA
31Backend-perusteet

HTML-Lomakkeiden Käsittely

Helppo5MIN

Muistatko kun aiemmin kurssilla tutustuimme HTML-lomakkeisiin jotka lähettävät (yleensä POST-muotoisia) HTTP-pyyntöjä taustajärjestelmään? Täydennetään nyt yhtälö rakentamalla myös taustajärjestelmän puoli.

Yksinkertainen esimerkki

Aloitetaan luomalla Flask-sovellus ja määrittämällä sille yksinkertainen reitti, joka palauttaa HTML-sivun, jossa on lomake:

PY
1from flask import Flask, render_template, request
2
3app = Flask(__name__)
4
5@app.route('/')
6def index():
7    return render_template('index.html')

Tämä reitti palauttaa 'index.html' -nimisen mallipohjan, joka sisältää HTML-lomakkeen. Luodaan tämä pohja ja lisätään siihen lomake:

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5	<title>Flask-lomake</title>
6</head>
7<body>
8	<h1>Lähetä tietoja Flask-sovellukselle</h1>
9	<form method="POST" action="/submit">
10		<label for="nimi">Nimi:</label>
11		<input type="text" id="nimi" name="nimi"><br><br>
12		<label for="sukunimi">Sukunimi:</label>
13		<input type="text" id="sukunimi" name="sukunimi"><br><br>
14		<label for="email">Sähköposti:</label>
15		<input type="email" id="email" name="email"><br><br>
16		<input type="submit" value="Lähetä">
17	</form>
18</body>
19</html>
20

Tämä lomake sisältää kolme kenttää: nimi, sukunimi ja sähköposti. Kun käyttäjä lähettää lomakkeen, sen tiedot lähetetään POST-pyynnöllä '/submit'-reitille. Määritellään tämä reitti Flask-sovelluksessa ja lisätään siihen koodi, joka käsittelee lomakkeen datan:

PY
1@app.route('/submit', methods=['POST'])
2def submit():
3    nimi = request.form['nimi']
4    sukunimi = request.form['sukunimi']
5    email = request.form['email']
6    return f"Terve {nimi} {sukunimi}, sähköpostisi on {email}."
1 / 2
Hakatemia Pro

Hakkeroinnin oppiminen alkaa tästä

Sadat interaktiiviset kurssit, virtuaalilabrat ja CTF-haasteet selaimessasi. Aloita ilmainen kokeilu ilman korttitietoja.