Skip to content

Instantly share code, notes, and snippets.

@prodeveloper

prodeveloper/index.html

Created June 19, 2018 07:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prodeveloper/822083a53d265f5c78c2e3a03bffabaa to your computer and use it in GitHub Desktop.
Save prodeveloper/822083a53d265f5c78c2e3a03bffabaa to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to forms
Raw
index.html
{% extends 'layout.html'%}
{% block content%}
<body>
<div class="container">
<form action="{{url_for('results')}}" method = "POST">
<div class="form-group">
<label for="val1">Input value 1</label>
<input type="text" class="form-control" id="val1" placeholder="Value 1" name="val1">
</div>
<div class="form-group">
<label for="val2">Input value 2</label>
<input type="text" class="form-control" id="val2" placeholder="Value 2" name="val2">
</div>
<button type="submit" class="btn btn-primary">Multiply</button>
</form>
</div>
{% endblock %}
Raw
layout.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Multiplier</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{url_for('static',filename="album.css")}}"
rel="stylesheet">
</head>
{% block content%} {% endblock %}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js"></script>
</html>
Raw
main.py
from flask import (Flask, render_template, request)
app = Flask('app')
@app.route('/')
def index():
return render_template("index.html")
@app.route('/multiply', methods=['POST'])
def results():
data = dict(request.form.items())
val1 = int(data.get('val1', 0))
val2 = int(data.get('val2', 0))
product = val1 * val2
context = {'product': product, 'val1': val1, 'val2': val2}
return render_template("results.html", **context)
app.run(debug=True, host='0.0.0.0', port=8080)
Raw
results.html
{% extends 'layout.html'%}
{% block content%}
<body>
<div class="container">
<p>The product of {{val1}} and {{val2}} is {{product}}</p>
<p> Go back to multiply page <a href="{{url_for("index")}}">Click here</a>
</p>
</div>
</body>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment