🧠 BÀI 2: FLASK + HTML FORM NÂNG CAO + CSS
🎯 Mục tiêu bài học
- Tạo form HTML có nhiều trường nhập liệu (tên, tuổi, sở thích...)
- Dùng Flask để nhận và xử lý dữ liệu người dùng gửi lên
- Trang trí giao diện bằng CSS cho đẹp mắt
- Biết cách hiển thị kết quả trả về từ Python ra trang web
📦 1. Chuẩn bị thư mục dự án
flask_form/
├─ app.py
└─ templates/
├─ index.html
└─ result.html
└─ style.css
Chúng ta sẽ viết app.py điều khiển logic, còn HTML & CSS nằm trong thư mục templates.
⚙️ 2. File app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/ketqua', methods=['POST'])
def ketqua():
ten = request.form.get('ten')
tuoi = request.form.get('tuoi')
sothich = request.form.getlist('sothich')
return render_template('result.html', ten=ten, tuoi=tuoi, sothich=sothich)
if __name__ == '__main__':
app.run(debug=True)
💡 Giải thích:
- Trang
/hiển thị form nhập liệu. - Trang
/ketquanhận dữ liệu POST, xử lý và gửi kết quả đếnresult.html. request.form.getlist()dùng khi người dùng chọn nhiều mục (checkbox).
🧾 3. File templates/index.html
Tạo form nhập thông tin cá nhân, có giao diện đẹp nhờ CSS.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Nhập thông tin của bạn</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body {
font-family: "Segoe UI", sans-serif;
background: linear-gradient(120deg,#6dd5fa,#2980b9);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.form-container {
background: #fff;
padding: 30px 40px;
border-radius: 10px;
width: 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h2 {
text-align: center;
color: #2980b9;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
.checkbox-group {
margin-top: 5px;
}
button {
margin-top: 20px;
background: #2980b9;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
button:hover {
background: #1a5f8a;
}
</style>
</head>
<body>
<form class="form-container" action="/ketqua" method="POST">
<h2>💬 Nhập thông tin cá nhân</h2>
<label>Tên của bạn:</label>
<input type="text" name="ten" required>
<label>Tuổi:</label>
<input type="number" name="tuoi" min="10" max="100" required>
<label>Sở thích:</label>
<div class="checkbox-group">
<input type="checkbox" name="sothich" value="Âm nhạc"> Âm nhạc <br>
<input type="checkbox" name="sothich" value="Thể thao"> Thể thao <br>
<input type="checkbox" name="sothich" value="Lập trình"> Lập trình <br>
<input type="checkbox" name="sothich" value="Đọc sách"> Đọc sách <br>
</div>
<button type="submit">Gửi thông tin</button>
</form>
</body>
</html>
🎨 4. File templates/result.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Kết quả</title>
<style>
body {
background: #f0f4f8;
font-family: Arial;
text-align: center;
padding-top: 80px;
}
h2 {
color: #2980b9;
}
ul {
list-style: none;
padding: 0;
}
a {
display: inline-block;
margin-top: 20px;
text-decoration: none;
color: white;
background: #2980b9;
padding: 10px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Xin chào, {{ ten }}! 👋</h2>
<p>Bạn {{ tuoi }} tuổi.</p>
<h3>Sở thích của bạn:</h3>
<ul>
{% for st in sothich %}
<li>✅ {{ st }}</li>
{% endfor %}
</ul>
<a href="/">Quay lại trang nhập</a>
</body>
</html>
🧠 Giải thích:
Flask tự động chèn dữ liệu từ Python vào vị trí
Dòng
Flask tự động chèn dữ liệu từ Python vào vị trí
{{ biến }} trong HTML.Dòng
{% for ... %} dùng để lặp danh sách sở thích.
🚀 5. Kết quả khi chạy
Khi bạn mở trình duyệt đến http://127.0.0.1:5000/, bạn sẽ thấy form như sau:
Sau khi nhập tên, tuổi, chọn sở thích và nhấn Gửi, Flask hiển thị kết quả:
🏁 6. Thử thách cho học sinh
- Thêm trường “Mục tiêu nghề nghiệp” dạng <textarea> vào form.
- Hiển thị kết quả bằng bảng có màu nền xen kẽ.
- Làm nút “Làm lại” để xóa dữ liệu và quay lại trang form.
📘 Kết luận
- Bạn đã biết cách xử lý form nâng cao bằng Flask.
- Đã kết hợp HTML + CSS để web trông hấp dẫn hơn.
- Đây là nền tảng để bước sang các dự án web lớn hơn (Flask + Database).
© 2025 Trường THPT Phan Chu Trinh – Gia Lai | Bài giảng thực hành: Flask cơ bản – Phần 2
📌 Danh sách bình luận